|
|
|
|
|
|
贊助商
分類(lèi)目錄
贊助商
最新文章
搜索
【css3動(dòng)畫(huà)】圓波擴(kuò)散效果
作者:admin 時(shí)間:2017-7-13 10:51:30 瀏覽:圓波擴(kuò)散動(dòng)畫(huà)效果，就是一個(gè)圓由中心向四周循環(huán)擴(kuò)散的動(dòng)畫(huà)效果。圓波擴(kuò)散動(dòng)畫(huà)效果應(yīng)用非常廣泛，例如可以用來(lái)表示某一個(gè)位置的狀態(tài)信息，在網(wǎng)頁(yè)設(shè)計(jì)中，常常被用來(lái)作為登錄或切換頁(yè)面時(shí)的等待狀態(tài)。如下圖所示：
【css3動(dòng)畫(huà)】圓波擴(kuò)散效果
本文將使用純CSS3實(shí)現(xiàn)上圖動(dòng)畫(huà)效果。
實(shí)例一：由實(shí)心圓點(diǎn)向四周擴(kuò)散（有陰影）
<!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動(dòng)畫(huà)圓波擴(kuò)散效果</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;
}
/* 保持大小不變的小圓點(diǎn) */
.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; /* 實(shí)心圓 ，如果沒(méi)有這個(gè)就是一個(gè)小圓圈 */
z-index: 2;
}
/* 產(chǎn)生動(dòng)畫(huà)（向外擴(kuò)散變大）的圓圈 第一個(gè)圓 */
.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; /* 陰影效果 */
}
/* 產(chǎn)生動(dòng)畫(huà)（向外擴(kuò)散變大）的圓圈 第二個(gè)圓 */
.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>
上述代碼簡(jiǎn)要介紹：
1、中心是一個(gè)實(shí)心圓， .dot 類(lèi)里加了背景屬性：background-color:#33ccff; ，如果沒(méi)有背景顏色，則為一個(gè)小圓圈。
2、使用了兩個(gè)圓來(lái)先后循環(huán)擴(kuò)散，形成“波”的效果。兩個(gè)圓的類(lèi)分別是：.pulse 和 .pulse1 。
3、擴(kuò)散圓加了陰影，“波”效果更好。實(shí)現(xiàn)方法是在 .pulse 和 .pulse1 的類(lèi)里使用屬性：box-shadow: 1px 1px 30px #3399ff;
實(shí)例二：由實(shí)心圓點(diǎn)向四周擴(kuò)散（無(wú)陰影）
<!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動(dòng)畫(huà)圓波擴(kuò)散效果</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;
}
/* 保持大小不變的小圓點(diǎn) */
.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; /* 實(shí)心圓 ，如果沒(méi)有這個(gè)就是一個(gè)小圓圈 */
z-index: 2;
}
/* 產(chǎn)生動(dòng)畫(huà)（向外擴(kuò)散變大）的圓圈 第一個(gè)圓 */
.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;
}
/* 產(chǎn)生動(dòng)畫(huà)（向外擴(kuò)散變大）的圓圈 第二個(gè)圓 */
.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>
實(shí)例三：由空心圓圈向四周擴(kuò)散（有陰影）
<!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動(dòng)畫(huà)圓波擴(kuò)散效果</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;
}
/* 產(chǎn)生動(dòng)畫(huà)（向外擴(kuò)散變大）的圓圈 第一個(gè)圓 */
.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; /* 陰影效果 */
}
/* 產(chǎn)生動(dòng)畫(huà)（向外擴(kuò)散變大）的圓圈 第二個(gè)圓 */
.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>
實(shí)例四：由空心圓圈向四周擴(kuò)散（無(wú)陰影）
<!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動(dòng)畫(huà)圓波擴(kuò)散效果</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;
}
/* 產(chǎn)生動(dòng)畫(huà)（向外擴(kuò)散變大）的圓圈 第一個(gè)圓 */
.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;
}
/* 產(chǎn)生動(dòng)畫(huà)（向外擴(kuò)散變大）的圓圈 第二個(gè)圓 */
.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>
本文實(shí)例演示
- css背景圖實(shí)現(xiàn)文字鏈右邊加一個(gè)箭頭圖標(biāo)
- css實(shí)現(xiàn)div或table居中，文字不居中【Chrome/Firefox/IE測(cè)試通過(guò)】
- 【2個(gè)實(shí)例】教你怎樣修改和美化blockquote雙引號(hào)及css樣式
- 3個(gè)Blockquote的css樣式【css3實(shí)現(xiàn)】
- 5個(gè)Blockquote的css樣式
- css實(shí)現(xiàn)超出div長(zhǎng)度文字自動(dòng)隱藏或用省略號(hào)表示
- span標(biāo)簽寫(xiě)法問(wèn)題導(dǎo)致ie8 hover失效
- 漂亮實(shí)用的div+css實(shí)現(xiàn)的下拉菜單 已通過(guò)IE、firefox測(cè)試
- css實(shí)現(xiàn)文章每個(gè)段落開(kāi)頭自動(dòng)縮進(jìn)兩個(gè)空格
- 站長(zhǎng)推薦
