前言
本文主要給大家分享的是關(guān)于利用CSS3動(dòng)畫實(shí)現(xiàn)圓圈由小變大向外擴(kuò)散的效果實(shí)例，文中涉及到 CSS3 的動(dòng)畫（animation）、2D 轉(zhuǎn)換（transform: scale）
css3中新增了一個(gè)animation的屬性，該屬性類似于創(chuàng)建一個(gè)animation對(duì)象
如：animation: bounce 2.0s infinite ease-in-out;
animation有以下幾個(gè)參數(shù)：
| 屬性 | 描述 | CSS |
|---|---|---|
| animation | 所有動(dòng)畫屬性的簡寫屬性，除了 animation-play-state 屬性。 | 3 |
| animation-name | 規(guī)定 @keyframes 動(dòng)畫的名稱。 | 3 |
| animation-duration | 規(guī)定動(dòng)畫完成一個(gè)周期所花費(fèi)的秒或毫秒。默認(rèn)是 0。 | 3 |
| animation-timing-function | 規(guī)定動(dòng)畫的速度曲線。默認(rèn)是 "ease"。 | 3 |
| animation-delay | 規(guī)定動(dòng)畫何時(shí)開始。默認(rèn)是 0。 | 3 |
| animation-iteration-count | 規(guī)定動(dòng)畫被播放的次數(shù)。默認(rèn)是 1。 | 3 |
| animation-direction | 規(guī)定動(dòng)畫是否在下一周期逆向地播放。默認(rèn)是 "normal"。 | 3 |
| animation-play-state | 規(guī)定動(dòng)畫是否正在運(yùn)行或暫停。默認(rèn)是 "running"。 | 3 |
| animation-fill-mode | 規(guī)定對(duì)象動(dòng)畫時(shí)間之外的狀態(tài)。 | 3 |
CSS 3 中2D轉(zhuǎn)換的實(shí)現(xiàn)用到兩個(gè)屬性：
| 屬性 | 描述 | CSS |
|---|---|---|
| transform | 向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換。 | 3 |
| transform-origin | 指定變換的基點(diǎn)的位置。 | 3 |
靜態(tài)效果圖：
具體如代碼所示：
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>無標(biāo)題文檔</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;}/* 產(chǎn)生動(dòng)畫（向外擴(kuò)散變大）的圓圈 */.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>總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對(duì)武林網(wǎng)的支持。
新聞熱點(diǎn)
疑難解答
圖片精選
