CSS3動畫產生圓圈由小變大向外擴散的效果
阿新 • • 發佈：2019-01-10
涉及到 CSS3 的動畫（animation）、2D 轉換（transform: scale），具體如程式碼所示。
<!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>