ホームページ >ウェブフロントエンド >CSSチュートリアル >Pure CSS3 は、境界線の影が外側に広がるアニメーション特殊効果を作成します。
Pure CSS3 は、境界線の影が外側に広がるアニメーション特殊効果を作成します。
- 青灯夜游オリジナル
- 2021-08-25 17:53:056067ブラウズ
前の記事「CSS3 を使用してボタンのホバリングと点滅の動的効果を実装する方法を段階的に説明します」では、CSS3 を使用してボタンに動的効果を追加し、ボタンのホバリングと点滅する影のアニメーション効果です。ご興味があれば、それについて学ぶことができます~
今日は、この記事では境界線のアニメーション効果を紹介します。CSS3 を使用してアニメーション効果を実現する方法を見てみましょう外側に広がる境界線の影。
最初にレンダリングを見てみましょう:
この効果を実現する方法を検討してみましょう:
まず、 HTML パーツ では、テキスト <pre class="brush:php;toolbar:false"><div id="box">
编程是为那些有不同想法的人准备的。。。<br />
对于那些想要创造伟大事物并愿意改变世界的人。
</div></pre>
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;
}
#box {
border-radius: 10px;
}
アニメーションと @ を使用します。達成するキーフレーム
- 最初にアニメーションを #box 要素にバインドし、animation 属性を使用して @keyframes アニメーションの名前を指定し、アニメーションの完了にかかる時間を設定し、アニメーションのスピードカーブ。
-
#box { animation: animated-border 1.5s infinite; }
- 次に、@keyframes を使用してアニメーションの各フレームのアクションを設定します。
-
ここからアニメーションの設定が開始されます (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); } }
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
ルールが使用されますCSS アニメーションを定義するには 周期的な動作。単純なアニメーション効果を作成するには、アニメーション属性と一緒に使用する必要があります。
@keyframe ルールは、キーワード「@keyframe」、その後にアニメーションの名前を指定する識別子 (アニメーション名を使用して参照されます)、その後に続く一連のパラメータで構成されます。スタイル ルール (中括弧で区切られています)。次に、アニメーション名属性の値として識別子を使用して、アニメーションが要素に適用されます。例:
/* 定义动画*/
@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 サイトの他の関連記事を参照してください。