CSS note

文字上にカーソルを移動してください

文字にちょっとかわいいエフェクトを加えるスタイルシート

HTML

<div class="foo">
 <span class="letter google-font-lato900" data-letter="切">切</span>
 <span class="letter google-font-lato900" data-letter="取">取</span>
 <span class="letter google-font-lato900" data-letter="り">り</span>
</div>

CSS

div.foo{
 width: 90%;
 margin: 0 auto;
 text-align: center;
}
.letter{
 display: inline-block;
 font-weight: 900;
 font-size: 8em;
 margin: 0.2em;
 position: relative;
 color: #00B4F1;
 transform-style: preserve-3d;
 perspective: 400;
 z-index: 1;
}
.letter:before, .letter:after{
 position:absolute;
 content: attr(data-letter);
 transform-origin: top left;
 top:0;
 left:0;
}
.letter, .letter:before, .letter:after{
 transition: all 0.3s ease-in-out;
}
.letter:before{
 color: #fff;
 text-shadow: -1px 0px 1px rgba(255,255,255,.8), 1px 0px 1px rgba(0,0,0,.8);
 z-index: 3;
 transform: rotateX(0deg) rotateY(-15deg) rotateZ(0deg);
}
.letter:after{
 color: rgba(0,0,0,.11);
 z-index:2;
 transform: scale(1.08,1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg,1deg);
}
.letter:hover:before{
 color: #fafafa;
 transform: rotateX(0deg) rotateY(-40deg) rotateZ(0deg);
}
.letter:hover:after{
 transform: scale(1.08,1) rotateX(0deg) rotateY(40deg) rotateZ(0deg) skew(0deg,22deg);
}

新着記事