CSS3 transitionを使ったサンプルです。
テキストを大きくする
CSSコードとHTML
.anime04{
font-size:15px;
color:#000;
padding:25px;
-webkit-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
.anime04:hover{
font-size:65px;
}
中略
<div class="anime04">
大きくなります
</div>
大きくなります
色を変える
CSSコードとHTML
.anime04a{
font:35px bold;
color:#000;
padding:25px;
-webkit-transition: 1s ease-in-out;
transition: 1s ease-in-out;
}
.anime04a:hover{
color:#ff0000;
}
中略
<div class="anime04a">
色が変わります
</div>
色が変わります
テキストに影をつける
CSSコードとHTML
.anime03a{
font:25px bold;
color:#000;
padding:25px;
-webkit-transition: 1s ease-in-out;
transition: 1s ease-in-out;
}
.anime03a:hover{
text-shadow: 10px 3px 15px #800000;
}
中略
<div class="anime03a">
テキストから影がでます
</div>
テキストから影がでます