ホームページ > 記事 > ウェブフロントエンド > Pure CSS3 は、境界線の影が外側に広がるアニメーション特殊効果を作成します。

Pure CSS3 は、境界線の影が外側に広がるアニメーション特殊効果を作成します。

青灯夜游オリジナル: 2021-08-25 17:53:055956ブラウズ

前の記事「CSS3 を使用してボタンのホバリングと点滅の動的効果を実装する方法を段階的に説明します」では、CSS3 を使用してボタンに動的効果を追加し、ボタンのホバリングと点滅する影のアニメーション効果です。ご興味があれば、それについて学ぶことができます~

今日は、この記事では境界線のアニメーション効果を紹介します。CSS3 を使用してアニメーション効果を実現する方法を見てみましょう外側に広がる境界線の影。

最初にレンダリングを見てみましょう:

Pure CSS3 は、境界線の影が外側に広がるアニメーション特殊効果を作成します。

この効果を実現する方法を検討してみましょう:

まず、 HTML パーツ では、テキスト <pre class="brush:php;toolbar:false"><div id="box"> 编程是为那些有不同想法的人准备的。。。<br /> 对于那些想要创造伟大事物并愿意改变世界的人。 </div></pre>

Pure CSS3 は、境界線の影が外側に広がるアニメーション特殊効果を作成します。

を含む

div コンテナを定義し、変更 ## 用の 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;
}

Pure CSS3 は、境界線の影が外側に広がるアニメーション特殊効果を作成します。

直角は見栄えがよくありません。border-radius を使用して 4 つの角を揃えることができます境界線の角を丸く設定します

#box {
	border-radius: 10px;
}

Pure CSS3 は、境界線の影が外側に広がるアニメーション特殊効果を作成します。

##以下は最も重要で、外側に広がる影のアニメーション効果を作成します:

アニメーションと @ を使用します。達成するキーフレーム

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

ここからアニメーションの設定が開始されます (0%) {} ）、border-shadow は
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
; アニメーションが完了すると (100%{})、border-shadow は影は 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);
	}
}
```

Pure CSS3 は、境界線の影が外側に広がるアニメーション特殊効果を作成します。 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-name：指定要绑定到选择器的关键帧的名称
animation-duration：动画指定需要多少秒或毫秒完成
animation-timing-function：设置动画将如何完成一个周期
animation-delay：设置动画在启动前的延迟间隔。
animation-iteration-count：定义动画的播放次数。
animation-direction：指定是否应该轮流反向播放动画。
animation-fill-mode：规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-play-state：指定动画是否正在运行或已暂停。

@keyframes
ルールが使用されますCSS アニメーションを定義するには周期的な動作。単純なアニメーション効果を作成するには、アニメーション属性と一緒に使用する必要があります。

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

@keyframes ルールの中括弧内で、アニメーション中の特定のポイントでアニメーション化されるプロパティの値を指定するキーフレームまたはウェイポイントを定義する必要があります。これにより、アニメーションシーケンスの中間ステップを制御できるようになります。たとえば、上記の例では:

@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);
	}
}

PHP 中国語 Web サイトプラットフォームには、多くのビデオ教育リソースがあります。誰もが「

css ビデオチュートリアル

」を学習することを歓迎します。

以上がPure CSS3 は、境界線の影が外側に広がるアニメーション特殊効果を作成します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：CSSで3点読み込みアニメーションを素早く作成する方法次の記事：CSSで3点読み込みアニメーションを素早く作成する方法

続きを見る