
コーディングテクニックの実装内容
今回はCSSアニメーションに関する内容です。ページの背景にグラデーションアニメーションを実装するテクニックを紹介します。
使いどころ
動きのあるページなどで背景色に適用すると効果的です。
実装所要時間:10分程度
難易度:初心者コーダーでも実装可能
CSS,JavaScriptの記述内容
.block {
position: relative;
height: 700px;
background: linear-gradient(90deg, #ffebeb, #daf0ff, #fdf7e4);
background-size: 250% 250%;
animation: grad 4s ease infinite;
}
.block p {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
font-size: 50px;
}
@keyframes grad {
0% { background-position:0% 50% }
50%{background-position:100% 50% }
100%{background-position:0% 50%}
}
@media screen and (max-width:640px){
.block {
width: 100%;
}
}
実装のポイント
仕組みは非常にシンプルです。
- 1)linear-gradient()でグラデーションの色を指定
- 2)animationでアニメーション一回分の時間の長さとanimation-timing-functionを指定。infiniteを指定することで無限に再生を繰り返す
- 3)@keyframesでbackground-positionのX座標を0%~100%で指定。Y座標は50%で固定する
スポンサーリンク