Heim > Artikel > Web-Frontend > Reines CSS3 erzeugt einen animierten Spezialeffekt, bei dem sich der Randschatten nach außen ausbreitet

Reines CSS3 erzeugt einen animierten Spezialeffekt, bei dem sich der Randschatten nach außen ausbreitet

青灯夜游Original: 2021-08-25 17:53:055956Durchsuche

Im vorherigen Artikel „Lernen Sie Schritt für Schritt, wie Sie mit CSS3 dynamische Effekte beim Schweben und Blinken von Schaltflächen implementieren“ haben wir die Methode vorgestellt, mit CSS3 dynamische Effekte zu Schaltflächen hinzuzufügen und eine Schattenanimation beim Schweben und Blinken von Schaltflächen zu erzielen Interessiert Sie können mehr darüber erfahren ~

In diesem Artikel erfahren Sie, wie Sie mit CSS3 den Animationseffekt des sich nach außen ausbreitenden Randschattens erzielen.

Werfen wir zunächst einen Blick auf die Darstellungen:

Reines CSS3 erzeugt einen animierten Spezialeffekt, bei dem sich der Randschatten nach außen ausbreitet

Sehen wir uns an, wie dieser Effekt erzielt wird:

Erstellen Sie zunächst den HTML-Teil und definieren Sie einen div-Container, der Text enthält. Text: div容器，包含文本文字：

<div id="box">
	编程是为那些有不同想法的人准备的。。。<br /> 
	对于那些想要创造伟大事物并愿意改变世界的人。
</div>

Reines CSS3 erzeugt einen animierten Spezialeffekt, bei dem sich der Randschatten nach außen ausbreitet

然后开始定义css样式来进行修饰：调整布局样式、背景颜色、div居中对齐、字体颜色

body {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	background: #00ac69;
}
#box {
	font-family: Arial;
	font-size: 18px;
	line-height: 30px;
	font-weight: bold;
	color: white;
	border: 2px solid;
	padding: 15px;
}

Reines CSS3 erzeugt einen animierten Spezialeffekt, bei dem sich der Randschatten nach außen ausbreitet

直角不好看，我们可以使用border-radius来将边框的四个角设置为圆角

#box {
	border-radius: 10px;
}

Reines CSS3 erzeugt einen animierten Spezialeffekt, bei dem sich der Randschatten nach außen ausbreitet

下面就是最关键的，创建影向外扩散的动画特效：我们使用animation和@keyframes来实现

首先把 animation 绑定到#box元素上，使用animation属性为@keyframes动画规定名称、设置完成动画所花费的时间、动画的速度曲线。

#box {
	animation: animated-border 1.5s infinite;
}

然后就是利用@keyframes来设置动画每一帧的动作了

这里是设置动画刚开始（0%{}）时，边框阴影为box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);；然后当动画完成（100%{}）时，边框阴影为box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);，阴影距离变大、颜色变为透明。

@keyframes animated-border {
	0% {
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
	}

	100% {
		box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
	}
}

Reines CSS3 erzeugt einen animierten Spezialeffekt, bei dem sich der Randschatten nach außen ausbreitet

OK，大功告成！下面附上完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			body {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 100vh;
				background: #00ac69;
			}

			#box {
				font-family: Arial;
				font-size: 18px;
				line-height: 30px;
				font-weight: bold;
				color: white;
				border: 2px solid;
				padding: 15px;
				border-radius: 10px;
				animation: animated-border 1.5s infinite;
			}

			@keyframes animated-border {
				0% {
					box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
				}

				100% {
					box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
				}
			}
		</style>
	</head>
	<body>
		<div id="box">
			编程是为那些有不同想法的人准备的。。。<br />
			对于那些想要创造伟大事物并愿意改变世界的人。
		</div>
	</body>
</html>

最后给大家介绍一下关键属性animation和@keyframes：

animation 属性是一个简写属性，可以在一个声明中设置多个动画属性：

animation-name：指定要绑定到选择器的关键帧的名称
animation-duration：动画指定需要多少秒或毫秒完成
animation-timing-function：设置动画将如何完成一个周期
animation-delay：设置动画在启动前的延迟间隔。
animation-iteration-count：定义动画的播放次数。
animation-direction：指定是否应该轮流反向播放动画。
animation-fill-mode：规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-play-state：指定动画是否正在运行或已暂停。

@keyframes

/* 定义动画*/
@keyframes 动画名称{
    /* 样式规则*/
}
/* 将它应用于元素 */
.element {
    animation-name: 动画名称（在@keyframes中已经声明好的）;
    /* 或使用动画简写属性*/
    animation: 动画名称 1s ...
}

Reines CSS3 erzeugt einen animierten Spezialeffekt, bei dem sich der Randschatten nach außen ausbreitet

Dann beginnen Sie mit der Definition von CSS-Stilen für Änderungen

: Passen Sie den Layoutstil, die Hintergrundfarbe, die Ausrichtung der Div-Mitte und die Schriftfarbe an

@keyframes animated-border {
	0% {
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
	}

	100% {
		box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
	}
}

Rechte Winkel sehen nicht gut aus, wir können border-radius verwenden, um die vier Ecken des Rahmens auf abgerundete Ecken einzustellenrrreee

🎜🎜🎜Die Das Folgende ist Das Wichtigste ist, den Animationseffekt des sich nach außen ausbreitenden Schattens zu erzeugen: 🎜Wir verwenden Animation und @keyframes, um dies zu erreichen🎜

🎜Erste Bindung Animation zu #box Verwenden Sie im Element das Animationsattribut, um einen Namen für die @keyframes-Animation anzugeben, die Zeit festzulegen, die zum Abschließen der Animation benötigt wird, und die Geschwindigkeitskurve der Animation. 🎜🎜🎜rrreee
- 🎜Dann verwenden Sie @keyframes, um die Aktion jedes Frames der Animation festzulegen🎜🎜Hier beginnt die Einstellung der Animation (0 % {} ), der Randschatten ist box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);, wenn die Animation abgeschlossen ist (100%{}), der Rand Der Schatten ist box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);, der Schattenabstand wird größer und die Farbe wird transparent.
  🎜🎜🎜rrreee🎜🎜🎜OK, du bist fertig! Der vollständige Code ist unten angehängt: 🎜rrreee🎜Abschließend stelle ich Ihnen die Schlüsselattribute animation und @keyframes vor: 🎜
  - Das Attribut 🎜animation ist ein Kurzattribut, das mehrere Animationsattribute in einer Anweisung festlegen kann: 🎜🎜🎜rrreee
    - 🎜@ Die Keyframes-Regel wird verwendet, um das Verhalten einer CSS-Animationsperiode zu definieren. Sie muss zusammen mit dem Animationsattribut verwendet werden, um einfache Animationseffekte zu erstellen. 🎜🎜🎜🎜 Eine @keyframe-Regel besteht aus dem Schlüsselwort „@keyframe“, gefolgt von einem Bezeichner, der den Namen der Animation angibt (auf den mit „animation-name“ verwiesen wird), gefolgt von einer Reihe von Stilregeln (getrennt durch geschweifte Klammern). ). Die Animation wird dann auf das Element angewendet, indem der Bezeichner als Wert des Attributs „animation-name“ verwendet wird. Zum Beispiel: 🎜rrreee🎜 Innerhalb der geschweiften Klammern der @keyframes-Regel müssen wir Keyframes oder Wegpunkte definieren, die den Wert der Eigenschaft angeben, die an einem bestimmten Punkt während der Animation animiert wird. Dadurch können wir Zwischenschritte in der Animationssequenz steuern. Zum Beispiel im obigen Beispiel: 🎜rrreee🎜Die chinesische Website-Plattform verfügt über viele Video-Lehrressourcen. Jeder ist herzlich willkommen, „🎜css Video Tutorial🎜“ zu lernen! 🎜

Das obige ist der detaillierte Inhalt vonReines CSS3 erzeugt einen animierten Spezialeffekt, bei dem sich der Randschatten nach außen ausbreitet. 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：So erstellen Sie schnell eine 3-Punkt-Ladeanimation mit CSSNächster Artikel：So erstellen Sie schnell eine 3-Punkt-Ladeanimation mit CSS

In Verbindung stehende Artikel

Mehr sehen