前言
本文主要給大家分享的是關于利用CSS3動畫實現圓圈由小變大向外擴散的效果實例，文中涉及到 CSS3 的動畫（animation）、2D 轉換（transform: scale）
css3中新增了一個animation的屬性，該屬性類似于創建一個animation對象
如：animation: bounce 2.0s infinite ease-in-out;
animation有以下幾個參數：
| 屬性 | 描述 | CSS |
|---|---|---|
| animation | 所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性。 | 3 |
| animation-name | 規定 @keyframes 動畫的名稱。 | 3 |
| animation-duration | 規定動畫完成一個周期所花費的秒或毫秒。默認是 0。 | 3 |
| animation-timing-function | 規定動畫的速度曲線。默認是 "ease"。 | 3 |
| animation-delay | 規定動畫何時開始。默認是 0。 | 3 |
| animation-iteration-count | 規定動畫被播放的次數。默認是 1。 | 3 |
| animation-direction | 規定動畫是否在下一周期逆向地播放。默認是 "normal"。 | 3 |
| animation-play-state | 規定動畫是否正在運行或暫停。默認是 "running"。 | 3 |
| animation-fill-mode | 規定對象動畫時間之外的狀態。 | 3 |
CSS 3 中2D轉換的實現用到兩個屬性：
| 屬性 | 描述 | CSS |
|---|---|---|
| transform | 向元素應用 2D 或 3D 轉換。 | 3 |
| transform-origin | 指定變換的基點的位置。 | 3 |
靜態效果圖：
具體如代碼所示：
| <!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> |
