DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 網頁特效代碼 >> 純css3圓形從中心向四周擴散動畫
純css3圓形從中心向四周擴散動畫
編輯:網頁特效代碼      日期:2016/12/29 16:42:25
查看效果:
http://hovertree.com/texiao/css3/37/

以下為講解和代碼。

可以通過 @keyframes 規則,創建動畫。

創建動畫的原理是,將一套 CSS 樣式逐漸變化為另一套樣式。
在動畫過程中,您能夠多次改變這套 CSS 樣式。
以百分比來規定改變發生的時間,或者通過關鍵詞 "from" 和 "to",等價於 0% 和 100%。
0% 是動畫的開始時間,100% 動畫的結束時間。
為了獲得最佳的浏覽器支持,您應該始終定義 0% 和 100% 選擇器。

注釋:請使用動畫屬性來控制動畫的外觀,同時將動畫與選擇器綁定。


語法
@keyframes animationname {keyframes-selector {css-styles;}}

其中
animationname 必需。定義動畫的名稱。

keyframes-selector 必需。動畫時長的百分比。
合法的值:
0-100%
from(與 0% 相同)
to(與 100% 相同)


css-styles 必需。一個或多個合法的 CSS 樣式屬性。

例如:
@keyframes hovertreemove
{
from {top:30px;}
to {top:130px;}
}

效果:
http://hovertree.com/texiao/css3/37/1.htm

以下為上下運動的代碼:
<!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使用animation和@keyframes制作動畫_何問起</title>
<meta charset="utf-8" />
<style>
@keyframes hovertreemove
{
from {top:30px;}
to {top:130px;}
}
#hovertreekf{
width:80px;height:80px;
border:1px solid red;
position:absolute;
background:url(http://hovertree.com/themes/hvtimages/smile.png) no-repeat center;
animation:hovertreemove /*動畫樣式名稱*/
1s /*動畫時間*/
linear /*線性運動*/
infinite /*無限播放*/
alternate/*往返動畫*/;
}
a{color:blue;text-decoration:none;} </style>
</head>
<body><a href="http://hovertree.com/h/bjaf/i309b77d.htm" target="_blank">說明</a>
<div id="hovertreekf"></div>
</body>
</html>

以下為圓形擴散運動的代碼:
<!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: 40px;
height: 40px;
/*border: 1px solid #000; hovertree.com */
}
/* 保持大小不變的小圓圈 何問起 */
.dot {
position: absolute;
width: 92px;
height: 92px;
left: 120px;
top: 120px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border: 2px solid red;
border-radius: 50%;
z-index: 2;
}
/* 產生動畫(向外擴散變大)的圓圈 */
.pulse {
position: absolute;
width: 320px;
height: 320px;
left: 2px;
top: 2px;
border: 6px solid red;
-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 red;
}

.pulse1 {
position: absolute;
width: 320px;
height: 320px;
left: 2px;
top: 2px;
border: 6px solid red;
-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 red;
}a{color:blue;text-decoration:none;}
</style>
</head>

<body><a href="http://hovertree.com/h/bjaf/i309b77d.htm" target="_blank">說明</a>
<div class="container">
<div class="dot"></div>
<div class="pulse"></div>
<div class="pulse1"></div>
</div>
</body>
</html>
參考:
http://hovertree.com/h/bjaf/pr_animation.htm
http://hovertree.com/h/bjaf/xpxgjfap.htm
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved