HTMLとCSSだけで作成したアニメーションを随時公開します。「実用的なもの」から「使いどころはよくわからないけど見ていて楽しいもの」まで、幅広く作成したいと思います。何かの参考にしていただけると嬉しいです。コードは自由にコピペして使ってください。
ついでにTwitterアカウントをフォローしてくれたら幸せです。
テキストにマーカーで下線を引くアニメーションです。テキストの文字数が変わってもちゃんと追従します。
<input type="checkbox" id="check">
<label class="anime-006" for="check">
ここが重要なポイント！
<div class="pen">
<div class="pen__inner"></div>
</div>
</label>
.anime-006{
display : inline-block ;
position : relative ;
margin : 0 ;
padding : 0 ;
font-size : 20px ;
color : #404040 ;
}
.anime-006::before{
content : "" ;
position : absolute ;
bottom : 0 ;
left : 0 ;
width : 0 ;
height : 4px ;
border-radius : 2px ;
background : #1FE4D1 ;
}
.pen{
display : block ;
position : absolute ;
left : -20px ;
bottom : 0 ;
width : 6px ;
height : 8px ;
border-radius : 2px 2px 0 0 ;
background : #1FE4D1 ;
box-sizing : border-box ;
transform : rotate(180deg);
}
.pen::before,
.pen::after{
content : "" ;
position : absolute ;
top : 0 ;
width : 80% ;
height : 70% ;
}
.pen::before{
left : -100% ;
border-top : solid 0 transparent ;
border-left : solid 6px transparent ;
border-right : solid 0 transparent;
border-bottom : solid 16px #566270 ;
}
.pen::after{
right : -100% ;
border-top : solid 0 transparent ;
border-left : solid 0 transparent;
border-right : solid 6px transparent ;
border-bottom : solid 16px #566270 ;
}
.pen__inner{
position : absolute ;
top : 290% ;
left : -100% ;
margin :0 auto ;
width : 300% ;
height : 400% ;
border-radius : 0 0 4px 4px ;
background : #566270 ;
}
.pen__inner::before{
content : "" ;
position : absolute ;
left : 0 ;
right : 0 ;
bottom : 0 ;
margin : auto ;
border-radius : 0 0 2px 2px ;
width : 100% ;
height : 20% ;
background : #1FE4D1 ;
}
#check{
display : none ;
}
#check:checked ~ .anime-006::before{
animation : marking 1s .8s linear ;
animation-fill-mode : forwards ;
}
#check:checked ~ .anime-006 .pen{
animation : pen 2s linear ;
animation-fill-mode : forwards ;
}
@keyframes pen {
0% {
left : -20px ;
transform : rotate(180deg);
}
10%{
left : -20px ;
transform : rotate(160deg);
}
15%{
left : -20px ;
transform : rotate(160deg);
}
35%{
left : -20px ;
transform : rotate(230deg);
}
90% {
left : 100% ;
transform : rotate(230deg);
}
100% {
left : 100% ;
transform : rotate(230deg);
}
}
@keyframes marking {
0%{
width : 0% ;
}
100%{
width : 100% ;
}
}