【css3動畫】圓波擴散效果

本文轉載自查看原文 2018-05-18 13:36 1695 css3

實例一：由實心圓點向四周擴散（有陰影）

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>css3動畫圓波擴散效果</title>
<style>
@keyframes warn {
0% {
transform: scale(0.3);
-webkit-transform: scale(0.3);
opacity: 0.0;
}

25% {
transform: scale(0.3);
-webkit-transform: scale(0.3);
opacity: 0.1;
}

50% {
transform: scale(0.5);
-webkit-transform: scale(0.5);
opacity: 0.3;
}

75% {
transform: scale(0.8);
-webkit-transform: scale(0.8);
opacity: 0.5;
}

100% {
transform: scale(1);
-webkit-transform: scale(1);
opacity: 0.0;
}
}

@keyframes warn1 {
0% {
transform: scale(0.3);
-webkit-transform: scale(0.3);
opacity: 0.0;
}

25% {
transform: scale(0.3);
-webkit-transform: scale(0.3);
opacity: 0.1;
}

50% {
transform: scale(0.3);
-webkit-transform: scale(0.3);
opacity: 0.3;
}

75% {
transform: scale(0.5);
-webkit-transform: scale(0.5);
opacity: 0.5;
}

100% {
transform: scale(0.8);
-webkit-transform: scale(0.8);
opacity: 0.0;
}
}

.container {
position: relative;
width: 120px;
height: 120px;
left: 10px;
top: 10px;
}
/* 保持大小不變的小圓點 */
.dot {
position: absolute;
width: 7px;
height: 7px;
left: 134px;
top: 134px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border: 1px solid #33ccff;
border-radius: 50%; 
background-color:#33ccff; /* 實心圓 ，如果沒有這個就是一個小圓圈 */
z-index: 2;
}
/* 產生動畫（向外擴散變大）的圓圈 第一個圓 */
.pulse {
position: absolute;
width: 35px;
height: 35px;
left: 120px;
top: 120px;
border: 1px solid #3399ff;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
z-index: 1;
opacity: 0;
-webkit-animation: warn 2s ease-out;
-moz-animation: warn 2s ease-out;
animation: warn 2s ease-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
box-shadow: 1px 1px 30px #3399ff; /* 陰影效果 */
}
/* 產生動畫（向外擴散變大）的圓圈 第二個圓 */
.pulse1 {
position: absolute;
width: 35px;
height: 35px;
left: 120px;
top: 120px;
border: 1px solid #3399ff;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
z-index: 1;
opacity: 0;
-webkit-animation: warn1 2s ease-out;
-moz-animation: warn1 2s ease-out;
animation: warn1 2s ease-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
box-shadow: 1px 1px 30px #3399ff; /* 陰影效果 */
}
</style>
</head>

<body>
由實心圓點向四周擴散（有陰影）
<div class="container">
<div class="dot"></div>
<div class="pulse"></div>
<div class="pulse1"></div>
</div>
</body>
</html>

css3動畫圓波擴散效果

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>css3動畫圓波擴散效果</title>
<style>
@keyframes warn {
0% {
transform: scale(0.3);
-webkit-transform: scale(0.3);
opacity: 0.0;
}

25% {
transform: scale(0.3);
-webkit-transform: scale(0.3);
opacity: 0.1;
}

50% {
transform: scale(0.5);
-webkit-transform: scale(0.5);
opacity: 0.3;
}

75% {
transform: scale(0.8);
-webkit-transform: scale(0.8);
opacity: 0.5;
}

100% {
transform: scale(1);
-webkit-transform: scale(1);
opacity: 0.0;
}
}

@keyframes warn1 {
0% {
transform: scale(0.3);
-webkit-transform: scale(0.3);
opacity: 0.0;
}

25% {
transform: scale(0.3);
-webkit-transform: scale(0.3);
opacity: 0.1;
}

50% {
transform: scale(0.3);
-webkit-transform: scale(0.3);
opacity: 0.3;
}

75% {
transform: scale(0.5);
-webkit-transform: scale(0.5);
opacity: 0.5;
}

100% {
transform: scale(0.8);
-webkit-transform: scale(0.8);
opacity: 0.0;
}
}

.container {
position: relative;
width: 120px;
height: 120px;
left: 10px;
top: 10px;
}
/* 保持大小不變的小圓點 */
.dot {
position: absolute;
width: 7px;
height: 7px;
left: 134px;
top: 134px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border: 1px solid #33ccff;
border-radius: 50%; 
background-color:#33ccff; /* 實心圓 ，如果沒有這個就是一個小圓圈 */
z-index: 2;
}
/* 產生動畫（向外擴散變大）的圓圈 第一個圓 */
.pulse {
position: absolute;
width: 35px;
height: 35px;
left: 120px;
top: 120px;
border: 1px solid #3399ff;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
z-index: 1;
opacity: 0;
-webkit-animation: warn 2s ease-out;
-moz-animation: warn 2s ease-out;
animation: warn 2s ease-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
/* 產生動畫（向外擴散變大）的圓圈 第二個圓 */
.pulse1 {
position: absolute;
width: 35px;
height: 35px;
left: 120px;
top: 120px;
border: 1px solid #3399ff;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
z-index: 1;
opacity: 0;
-webkit-animation: warn1 2s ease-out;
-moz-animation: warn1 2s ease-out;
animation: warn1 2s 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 class="pulse1"></div>
</div>
</body>
</html>

css3動畫圓波擴散效果

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>css3動畫圓波擴散效果</title>
<style>
@keyframes warn {
0% {
transform: scale(0.3);
-webkit-transform: scale(0.3);
opacity: 0.0;
}

25% {
transform: scale(0.3);
-webkit-transform: scale(0.3);
opacity: 0.1;
}

50% {
transform: scale(0.5);
-webkit-transform: scale(0.5);
opacity: 0.3;
}

75% {
transform: scale(0.8);
-webkit-transform: scale(0.8);
opacity: 0.5;
}

100% {
transform: scale(1);
-webkit-transform: scale(1);
opacity: 0.0;
}
}

@keyframes warn1 {
0% {
transform: scale(0.3);
-webkit-transform: scale(0.3);
opacity: 0.0;
}

25% {
transform: scale(0.3);
-webkit-transform: scale(0.3);
opacity: 0.1;
}

50% {
transform: scale(0.3);
-webkit-transform: scale(0.3);
opacity: 0.3;
}

75% {
transform: scale(0.5);
-webkit-transform: scale(0.5);
opacity: 0.5;
}

100% {
transform: scale(0.8);
-webkit-transform: scale(0.8);
opacity: 0.0;
}
}

.container {
position: relative;
width: 120px;
height: 120px;
left: 10px;
top: 10px;
}
/* 保持大小不變的小圓圈 */
.dot {
position: absolute;
width: 7px;
height: 7px;
left: 134px;
top: 134px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border: 1px solid #33ccff;
border-radius: 50%; 
z-index: 2;
}
/* 產生動畫（向外擴散變大）的圓圈 第一個圓 */
.pulse {
position: absolute;
width: 35px;
height: 35px;
left: 120px;
top: 120px;
border: 1px solid #3399ff;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
z-index: 1;
opacity: 0;
-webkit-animation: warn 2s ease-out;
-moz-animation: warn 2s ease-out;
animation: warn 2s ease-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
box-shadow: 1px 1px 30px #3399ff; /* 陰影效果 */
}
/* 產生動畫（向外擴散變大）的圓圈 第二個圓 */
.pulse1 {
position: absolute;
width: 35px;
height: 35px;
left: 120px;
top: 120px;
border: 1px solid #3399ff;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
z-index: 1;
opacity: 0;
-webkit-animation: warn1 2s ease-out;
-moz-animation: warn1 2s ease-out;
animation: warn1 2s ease-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
box-shadow: 1px 1px 30px #3399ff; /* 陰影效果 */
}
</style>
</head>

<body>
由空心圓圈向四周擴散（有陰影）
<div class="container">
<div class="dot"></div>
<div class="pulse"></div>
<div class="pulse1"></div>
</div>
</body>
</html>

css3動畫圓波擴散效果

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>css3動畫圓波擴散效果</title>
<style>
@keyframes warn {
0% {
transform: scale(0.3);
-webkit-transform: scale(0.3);
opacity: 0.0;
}

25% {
transform: scale(0.3);
-webkit-transform: scale(0.3);
opacity: 0.1;
}

50% {
transform: scale(0.5);
-webkit-transform: scale(0.5);
opacity: 0.3;
}

75% {
transform: scale(0.8);
-webkit-transform: scale(0.8);
opacity: 0.5;
}

100% {
transform: scale(1);
-webkit-transform: scale(1);
opacity: 0.0;
}
}

@keyframes warn1 {
0% {
transform: scale(0.3);
-webkit-transform: scale(0.3);
opacity: 0.0;
}

25% {
transform: scale(0.3);
-webkit-transform: scale(0.3);
opacity: 0.1;
}

50% {
transform: scale(0.3);
-webkit-transform: scale(0.3);
opacity: 0.3;
}

75% {
transform: scale(0.5);
-webkit-transform: scale(0.5);
opacity: 0.5;
}

100% {
transform: scale(0.8);
-webkit-transform: scale(0.8);
opacity: 0.0;
}
}

.container {
position: relative;
width: 120px;
height: 120px;
left: 10px;
top: 10px;
}
/* 保持大小不變的小圓圈 */
.dot {
position: absolute;
width: 7px;
height: 7px;
left: 134px;
top: 134px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border: 1px solid #33ccff;
border-radius: 50%; 
z-index: 2;
}
/* 產生動畫（向外擴散變大）的圓圈 第一個圓 */
.pulse {
position: absolute;
width: 35px;
height: 35px;
left: 120px;
top: 120px;
border: 1px solid #3399ff;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
z-index: 1;
opacity: 0;
-webkit-animation: warn 2s ease-out;
-moz-animation: warn 2s ease-out;
animation: warn 2s ease-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
/* 產生動畫（向外擴散變大）的圓圈 第二個圓 */
.pulse1 {
position: absolute;
width: 35px;
height: 35px;
left: 120px;
top: 120px;
border: 1px solid #3399ff;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
z-index: 1;
opacity: 0;
-webkit-animation: warn1 2s ease-out;
-moz-animation: warn1 2s ease-out;
animation: warn1 2s 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 class="pulse1"></div>
</div>
</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 css3圓環閃爍動畫 css3圓形軌跡動畫 css3圓角和陰影效果 css3實現半圓和圓效果 CSS3掃描動畫效果使用CSS3實現橢圓動畫效果 css3 鼠標懸浮動畫效果 css3動畫實現偽彈幕效果 Css 閃爍效果_Css3 閃爍動畫效果 CSS3效果：animate實現點點點loading動畫效果（二）