利用純css3實現圓形從中心向四周擴散動畫效果代碼
- 高洛峰原創
- 2017-03-16 10:13:462832瀏覽
先來個簡單的範例，例如：
@keyframes hovertreemove
{
from {top:30px;}
to {top:130px;}
}
效果：
http://hovertree.com/texiao/css3/37/1 .htm
可以透過@keyframes 規則，建立動畫。
創建動畫的原理是，將一套 CSS 樣式逐漸改變為另一套樣式。
在動畫過程中，您能夠多次改變這套 CSS 樣式。
以百分比來規定改變發生的時間，或透過關鍵字 "from" 和 "to"，等價於 0% 和 100%。
0% 是動畫的開始時間，100% 動畫的結束時間。
為了獲得最佳的瀏覽器支持，您應該始終定義 0% 和 100% 選擇器。
以下為上下移動的程式碼：
<!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>
<p id="hovertreekf"></p></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>
<p class="container">
<p class="dot"></p>
<p class="pulse"></p>
<p class="pulse1"></p>
</p></body></html>以上是利用純css3實現圓形從中心向四周擴散動畫效果代碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn