最終更新日：2020.08.25
サイトのアクセントになるCSSアニメーション。効果的に使っていきたいですね。
今回はストライプをCSSで作成し、それを文字の背景やBoxにアニメーションで表示させていきます。
アニメーションを効果的に使っていこう！
目次
ストライプの作り方
ストライプはCSS3のlinear-gradientタグを使って作成します！
縦・横・斜めもdegで角度を変更するだけなので簡単にできます。
縦
縦ストライプ
<div class="stripe_1">
縦ストライプ
</div>
コピー
.stripe_1 {
background: linear-gradient(0deg,#7d98ce 25%, #C6E6FB 25%,#C6E6FB 50%, #7d98ce 50%,#7d98ce 75%, #C6E6FB 75%,#C6E6FB);
background-size: 40px 40px;
}
background-size: 40px 40px;でストライプの幅を指定しています。
細くしたり太くしたい時はここの数字を変更してみてくださいね！
横
横ストライプ
<div class="stripe_1">
横ストライプ
</div>
コピー
.stripe_1 {
background: linear-gradient(90deg,#7d98ce 25%, #C6E6FB 25%,#C6E6FB 50%, #7d98ce 50%,#7d98ce 75%, #C6E6FB 75%,#C6E6FB);
background-size: 40px 40px;
}
斜め
斜めストライプ
<div class="stripe_1">
斜めストライプ
</div>
コピー
.stripe_1 {
background: linear-gradient(-450deg,#7d98ce 25%, #C6E6FB 25%,#C6E6FB 50%, #7d98ce 50%,#7d98ce 75%, #C6E6FB 75%,#C6E6FB);
background-size: 40px 40px;
}
アニメーション
次はアニメーションを追加していきます。
animation タグを使ってX.Y軸をずらす動きをループさせ動いているように見せます！
縦
縦ストライプ
<div class="stripe_1">
縦ストライプ
</div>
コピー
.stripe_1 {
background: linear-gradient(0deg,#7d98ce 25%, #C6E6FB 25%,#C6E6FB 50%, #7d98ce 50%,#7d98ce 75%, #C6E6FB 75%,#C6E6FB);
background-size: 40px 40px;
animation: anime_stripe_1 .8s infinite linear;
}
@keyframes anime_stripe_1 {
0% { background-position-y: 0;}
100% { background-position-y: -40px;}
}
background-position-y: -40px;で動くpx数を指定します。ループが綺麗に行くようにbackground-size: 40px 40px;で指定した数と同じにしてください！
横
横ストライプ
<div class="stripe_1">
横ストライプ
</div>
コピー
.stripe_1 {
background: linear-gradient(90deg,#7d98ce 25%, #C6E6FB 25%,#C6E6FB 50%, #7d98ce 50%,#7d98ce 75%, #C6E6FB 75%,#C6E6FB);
background-size: 40px 40px;
animation: anime_stripe_1 .8s infinite linear;
}
@keyframes anime_stripe_1 {
0% { background-position-x: 0;}
100% { background-position-x: -40px;}
}
斜め
斜めストライプ
<div class="stripe_1">
斜めストライプ
</div>
コピー
.stripe_1 {
background: linear-gradient(-45deg,#7d98ce 25%, #C6E6FB 25%,#C6E6FB 50%, #7d98ce 50%,#7d98ce 75%, #C6E6FB 75%,#C6E6FB);
background-size: 40px 40px;
animation: anime_stripe_1 .8s infinite linear;
}
@keyframes anime_stripe_1 {
0% { background-position-x: 0;}
100% { background-position-x: -40px;}
}
応用編
ここからは応用編です。
テキストの背景をストライプにしてアニメーションさせたり、画像の上に半透明のストライプアニメーションを乗せてインタラクティヴを演出します。
ボタンのHOVERアクションに設定してもよさそうですね！
テキストの背景にストライプアニメーション
斜めストライプ
<div class="stripe_1">
斜めストライプ
</div>
コピー
.stripe_1 {
background: linear-gradient(-45deg,#7d98ce 25%, #C6E6FB 25%,#C6E6FB 50%, #7d98ce 50%,#7d98ce 75%, #C6E6FB 75%,#C6E6FB);
background-size: 40px 40px;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: anime_stripe_1 .8s infinite linear;
}
@keyframes anime_stripe_1 {
0% { background-position-x: 0;}
100% { background-position-x: -40px;}
}
画像の上にストライプアニメーション
<div class="stripe_1">
<img src="○○○" />
</div>
コピー
.stripe_1 {
position: relative;
display: block;
}
.stripe_1:after{
content: "";
position: absolute; left: 0px; top: 0px;
display: block;
background: linear-gradient(
-45deg,
#7d98ce 25%, #C6E6FB 25%,
#C6E6FB 50%, #7d98ce 50%,
#7d98ce 75%, #C6E6FB 75%,
#C6E6FB
);
background-size: 40px 40px;
opacity:0.2;
animation: anime_stripe_2 .8s infinite linear;
}
.stripe_1 img, .stripe_1:after{
width: 100%;
height: 100%;
}
@keyframes anime_stripe_1 {
0% { background-position-x: 0;}
100% { background-position-x: -40px;}
}
画像にストライプアニメーションを重ねる場合はopacity:0.2;を使ってストライプの透明度を薄くするといい感じに見えます。
0.2の数字部分は数を増やすほど透明度がなくなってくるので好みの数字を入れてみてくださいね！
まとめ
ストライプでの表現とそのアニメーションについてのまとめでした！
CSSは奥深いですね(^o^)