分享一個CSS3圓圈放大縮小迴圈動畫的效果代碼

來源:互聯網
上載者:User
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><p class="dot"></p></body></html>

【相關推薦】

1. 免費css線上視頻教程

2. css線上手冊

3. php.cn獨孤九賤(2)-css視頻教程

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.