HTMLとCSSだけで作成したアニメーションを随時公開します。「実用的なもの」から「使いどころはよくわからないけど見ていて楽しいもの」まで、幅広く作成したいと思います。何かの参考にしていただけると嬉しいです。コードは自由にコピペして使ってください。
ついでにTwitterアカウントをフォローしてくれたら幸せです。
テキストが虫眼鏡で拡大されるアニメーションです。文字数を増やすこともできますが「animation-delay」の調整と虫眼鏡が動くスピードの調整が少しめんどくさいです。虫眼鏡のレンズに反射のエフェクトを入れたい・・・・。
<input type="checkbox" id="check">
<label class="anime-010" for="check">
<ul class="sentence">
<li class="keywords keywords-1">こ</li>
<li class="keywords keywords-2">こ</li>
<li class="keywords keywords-3">に</li>
<li class="keywords keywords-4">注</li>
<li class="keywords keywords-5">目</li>
</ul>
<div class="glass"></div>
</label>
.anime-010{
position : relative ;
z-index : 0 ;
}
.sentence{
position : relative ;
z-index : 1 ;
display : flex ;
margin :0 ;
padding : 0 ;
list-style : none ;
}
.keywords{
margin : 0 8px ;
}
.glass{
position : absolute ;
z-index : 2 ;
top : 0 ;
left : -48px ;
bottom : 0 ;
margin : auto 0 ;
padding : 0 ;
width : 40px ;
height : 40px ;
border-radius : 50% ;
border : solid 5px #F04762 ;
box-sizing : border-box ;
}
.glass::before{
content : "" ;
position : absolute ;
top : 0 ;
left : 0 ;
width : 100% ;
height : 100% ;
border-radius : 50% ;
background :rgba(0,200,200,.3);
}
.glass::after{
content : "" ;
position : absolute ;
right : -8px ;
bottom : -14px ;
width : 5px ;
height : 16px ;
border-radius : 0 0 3px 3px ;
background : #F04762 ;
transform: rotate(-45deg);
}
#check{
display: none ;
}
#check:checked ~ .anime-010 .glass{
animation : slide 2.1s linear ;
animation-fill-mode : forwards ;
}
#check:checked ~ .anime-010 .keywords{
animation-name : scaleup ;
animation-timing-function : ease-in-out ;
animation-duration : .5s ;
}
.keywords-1{
animation-delay : .3s ;
}
.keywords-2{
animation-delay : .6s ;
}
.keywords-3{
animation-delay : .9s ;
}
.keywords-4{
animation-delay : 1.2s ;
}
.keywords-5{
animation-delay : 1.5s ;
}
@keyframes scaleup{
0% {transform : scale(1);}
20% {transform : scale(1.2);}
50% {transform : scale(1.4);}
80% {transform : scale(1.2);}
100%{transform : scale(1);}
}
@keyframes slide{
0% {left : -48px ;}
100%{left : 100%;}
}