CSS3动画产生圆圈由小变大向外扩散的效果
生活随笔
收集整理的這篇文章主要介紹了
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动画产生圆圈由小变大向外扩散的效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： TF卡里删掉文件后内存没变大_不用第三方
- 下一篇： html下划线输入框自动延伸,纯CSS实