CSS3圆圈动画放大缩小循环动画效果
生活随笔
收集整理的這篇文章主要介紹了
CSS3圆圈动画放大缩小循环动画效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
代碼如下：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS3圓圈動畫放大縮小循環動畫效果</title> <style>.dot { margin:150px auto; width:200px; height:200px; background-color:#E3E3E3; border-radius: 50%; box-shadow: 0 0 10px rgba(0,0,0,.3) inset; -webkit-animation-name:'ripple';/*動畫屬性名，也就是我們前面keyframes定義的動畫名*/ -webkit-animation-duration: 2s;/*動畫持續時間*/ -webkit-animation-timing-function: ease; /*動畫頻率，和transition-timing-function是一樣的*/ -webkit-animation-delay: 0s;/*動畫延遲時間*/ -webkit-animation-iteration-count: infinite;/*定義循環資料，infinite為無限次*/ -webkit-animation-direction: alternate;/*定義動畫方式*/ }@keyframes ripple { 0% {opacity:0.35; width:190px; height:190px; } 100% {opacity: 0.2; width:250px; height:250px; } }</style> </head><body><div class="dot"></div> </body> </html>
轉載于:https://www.cnblogs.com/chensihan/p/6805570.html
總結
以上是生活随笔為你收集整理的CSS3圆圈动画放大缩小循环动画效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 05构建之法阅读笔记之三
- 下一篇： 乌鲁木齐新铝德源红郡是毛坯房还是精装修？