Heim > Artikel > Web-Frontend > Teilen Sie den Effektcode einer CSS3-Kreisanimation zum Vergrößern und Verkleinern einer Schleife

Teilen Sie den Effektcode einer CSS3-Kreisanimation zum Vergrößern und Verkleinern einer Schleife

零下一度Original: 2017-05-12 13:59:526366Durchsuche

CSS3-KreisAnimationVergrößern und VerkleinernLoopAnimationseffekt, die Spezialeffekte sind einfach und schön, es klingt gut, interessierte Freunde können einen Blick darauf werfen

Der Code lautet wie folgt:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3圆圈动画放大缩小循环动画效果</title>
<style>

.dot {
margin:150px auto;
width:200px;
height:200px;
background-color:#E3E3E3;
border-radius: 50%;
box-shadow: 0 0 10px rgba(0,0,0,.3) inset;
-webkit-animation-name:&#39;ripple&#39;;/*动画属性名，也就是我们前面keyframes定义的动画名*/
-webkit-animation-duration: 2s;/*动画持续时间*/
-webkit-animation-timing-function: ease; /*动画频率，和transition-timing-function是一样的*/
-webkit-animation-delay: 0s;/*动画延迟时间*/
-webkit-animation-iteration-count: infinite;/*定义循环资料，infinite为无限次*/
-webkit-animation-direction: alternate;/*定义动画方式*/
}
@keyframes ripple {
0% {

opacity:0.35;
width:190px;
height:190px;
}
100% {
opacity: 0.2;
width:250px;
height:250px;
}
}
</style>
</head>

<body>
	<p class="dot"></p>
</body>
</html>

[Verwandte Empfehlungen]

1. Kostenloses CSS-Online-Video-Tutorial

2. CSS Online-Handbuch

3. php.cn Dugu Jiujian (2) – CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonTeilen Sie den Effektcode einer CSS3-Kreisanimation zum Vergrößern und Verkleinern einer Schleife. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Wie mache ich ein Div mit CSS immer zentriert?Nächster Artikel：Wie mache ich ein Div mit CSS immer zentriert?

In Verbindung stehende Artikel

Mehr sehen