CSS3动画产生圆圈由小变大向外扩散的效果

来源：互联网发布：如何在淘宝上拍卖东西编辑：程序博客网时间：2024/05/22 04:25

涉及到 CSS3 的动画（animation）、2D 转换（transform: scale），具体如代码所示。

github： https://github.com/wind-stone/CSS3-Circle-Diffusion

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style>@keyframes warn {0% {transform: scale(0);opacity: 0.0;}25% {transform: scale(0);opacity: 0.1;}50% {transform: scale(0.1);opacity: 0.3;}75% {transform: scale(0.5);opacity: 0.5;}100% {transform: scale(1);opacity: 0.0;}}@-webkit-keyframes "warn" {0% {-webkit-transform: scale(0);opacity: 0.0;}25% {-webkit-transform: scale(0);opacity: 0.1;}50% {-webkit-transform: scale(0.1);opacity: 0.3;}75% {-webkit-transform: scale(0.5);opacity: 0.5;}100% {-webkit-transform: scale(1);opacity: 0.0;}}.container {position: relative;width: 40px;height: 40px;border: 1px solid #000;}/* 保持大小不变的小圆圈  */.dot {position: absolute;width: 6px;height: 6px;left: 15px;top: 15px;-webkit-border-radius: 20px;-moz-border-radius: 20px;border: 2px solid red;border-radius: 20px;z-index: 2;}/* 产生动画（向外扩散变大）的圆圈  */.pulse {position: absolute;width: 24px; height: 24px;left: 2px;top: 2px;border: 6px solid red;-webkit-border-radius: 30px;-moz-border-radius: 30px;border-radius: 30px;z-index: 1;opacity: 0;-webkit-animation: warn 3s ease-out;-moz-animation: warn 3s ease-out;animation: warn 3s ease-out;-webkit-animation-iteration-count: infinite;-moz-animation-iteration-count: infinite;animation-iteration-count: infinite;}</style></head><body><div class="container">    <div class="dot"></div>    <div class="pulse"></div></div></body></html>

0 0