Heim >Web-Frontend >CSS-Tutorial >Verwenden Sie reines CSS3, um den Animationseffektcode eines Kreises zu realisieren, der sich von der Mitte zur Umgebung ausbreitet
Verwenden Sie reines CSS3, um den Animationseffektcode eines Kreises zu realisieren, der sich von der Mitte zur Umgebung ausbreitet
- 高洛峰Original
- 2017-03-16 10:13:462882Durchsuche
Nehmen wir zunächst ein einfaches Beispiel, zum Beispiel:
@keyframes hovertreemove
{
from {top:30px;}
zu {top:130px;}
}
Effekt:
http://hovertree.com/texiao/css3/37/ 1 .htm
kann Animationen über @keyframes-Regeln erstellen.
Animationen werden erstellt, indem nach und nach ein Satz von CSS-Stilen in einen anderen geändert wird.
Sie können diesen Satz von CSS-Stilen während der Animation mehrmals ändern.
Geben Sie den Zeitpunkt an, zu dem die Änderung eintritt, als Prozentsatz oder über die Schlüsselwörter „von“ und „bis“, die 0 % und 100 % entsprechen.
0 % ist die Startzeit der Animation, 100 % ist die Endzeit der Animation.
Für eine optimale Browserunterstützung sollten Sie immer 0 %- und 100 %-Selektoren definieren.
Das Folgende ist der Code für die Auf- und Abwärtsbewegung:
<!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>
Das Folgende ist der Code für die kreisförmige Diffusionsbewegung:
<!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>Das obige ist der detaillierte Inhalt vonVerwenden Sie reines CSS3, um den Animationseffektcode eines Kreises zu realisieren, der sich von der Mitte zur Umgebung ausbreitet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!