前の記事「CSS3 を使用してボタンのホバリングと点滅の動的効果を実装する方法を段階的に説明します」では、CSS3 を使用してボタンに動的効果を追加し、ボタンのホバリングと点滅する影のアニメーション効果です。ご興味があれば、それについて学ぶことができます~
今日は、この記事では境界線のアニメーション効果を紹介します。CSS3 を使用してアニメーション効果を実現する方法を見てみましょう外側に広がる境界線の影。
最初にレンダリングを見てみましょう:

この効果を実現する方法を検討してみましょう:
まず、 HTML パーツ では、テキスト <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><div id="box">
编程是为那些有不同想法的人准备的。。。<br />
对于那些想要创造伟大事物并愿意改变世界的人。
</div></pre><div class="contentsignin">ログイン後にコピー</div></div>

を含む
div コンテナを定義し、変更 ## 用の CSS スタイルの定義を開始します。 #: レイアウト スタイル、背景色、div の中心揃え、フォントの色を調整します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | 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 を使用して 4 つの角を揃えることができます境界線の角を丸く設定します
1 2 3 | #box {
border-radius: 10px;
}
|
ログイン後にコピー

##以下は最も重要で、外側に広がる影のアニメーション効果を作成します:
アニメーションと @ を使用します。達成するキーフレーム
最初にアニメーションを #box 要素にバインドし、animation 属性を使用して @keyframes アニメーションの名前を指定し、アニメーションの完了にかかる時間を設定し、アニメーションのスピードカーブ。 1 2 3 | #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);
となり、影の距離が大きくなり、色が透明になります。
1 2 3 4 5 6 7 8 9 | @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、完了です。完全なコードは以下に添付されています:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <!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 プロパティは、単一の宣言で複数のアニメーション プロパティを設定できる短縮プロパティです: 1 2 3 4 5 6 7 8 | animation-name:指定要绑定到选择器的关键帧的名称
animation-duration:动画指定需要多少秒或毫秒完成
animation-timing- function :设置动画将如何完成一个周期
animation-delay:设置动画在启动前的延迟间隔。
animation-iteration- count :定义动画的播放次数。
animation-direction:指定是否应该轮流反向播放动画。
animation-fill-mode:规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。
animation-play-state:指定动画是否正在运行或已暂停。
|
ログイン後にコピー
1 2 3 4 5 6 7 8 9 10 | @keyframes 动画名称{
}
.element {
animation-name: 动画名称(在@keyframes中已经声明好的);
animation: 动画名称 1s ...
}
|
ログイン後にコピー
@keyframes ルールの中括弧内で、アニメーション中の特定のポイントでアニメーション化されるプロパティの値を指定するキーフレームまたはウェイポイントを定義する必要があります。これにより、アニメーション シーケンスの中間ステップを制御できるようになります。たとえば、上記の例では:
1 2 3 4 5 6 7 8 9 | @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 サイトの他の関連記事を参照してください。