溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關如何利用CSS3動畫實現圓圈由小變大向外擴散的效果，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
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>關于“如何利用CSS3動畫實現圓圈由小變大向外擴散的效果”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
