欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 前端技术 > CSS >内容正文

CSS

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

发布时间：2024/3/13 CSS 79 豆豆
生活随笔 收集整理的这篇文章主要介绍了 CSS3动画产生圆圈由小变大向外扩散的效果 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

涉及到 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>

总结

以上是生活随笔为你收集整理的CSS3动画产生圆圈由小变大向外扩散的效果的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。