
コーディングテクニックの実装内容
今回はCSSアニメーションに関する内容です。@keyframesを使用して画像を円形にトリミングしてサーチライトのように動かし続けるテクニックを紹介します。
使いどころ
ページアクセス時にメインビジュアルになどにアニメーションを適用すると効果的に目立たせることが可能です。
実装所要時間:10分程度
難易度:初心者コーダーでも実装可能
CSS,JavaScriptの記述内容
.block {
width: 540px;
margin: 70px auto 0;
}
.img {
position: relative;
overflow: hidden;
border-radius: 50%;
transform-origin: 50.5% 49.5%;
animation: circle01 6s linear infinite;
backface-visibility: hidden;
}
.img img {
transform-origin: 50.6% 49.4%;
animation: circle02 6s linear infinite;
backface-visibility: hidden;
}
@keyframes circle01 {
100% {
transform: rotate(360deg);
}
}
@keyframes circle02 {
0% {
transform: rotate(360deg) scale(1.03);
}
100% {
transform: rotate(0deg) scale(1.03);
}
}
@media screen and (max-width:640px){
.block {
width: 100%;
}
}
実装のポイント
現在制作中
スポンサーリンク