詳細については、クリックしてください
今すぐオンライン プレビューをダウンロード
このチュートリアルでは、CSS3 に基づいて興味深い 3D オープン エフェクトを作成します。このチュートリアルの目的は、CSS3 の使用に命を吹き込む方法を示すことです。
html:
.grid li span:before {
text-shadow: none;
color: hsla(0, 0%, 0 %, 0.12);
}
.ot-letter-left スパン:前,
.ot-letter-left スパン:後 {
変換原点: 0 50%;
}
.ot-letter-left スパン:前{
変換:scale(1.08, 1) skew(0deg, 1deg);
}
.ot-letter-left span:after {
text-shadow:
-1px 0px 0px hsla(360, 100%, 100% , 0.1),
3px 0px 1px hsla(0, 0%, 0%, 0.4);
transform:rotateY(-15deg);
}
.ot-letter-left:hover span:before {
transform:scale( 0.85,1) skew(0deg,20deg);
}
.ot-letter-left:hover span:after {
変換: 回転 Y(-40 度);
}
.ot-letter-left {
背景: # e74d3c;
}
.ot-letter-left スパン {
text-shadow:
1px 4px 6px #e74d3c,
0 0 0 hsla(0, 0%, 0%, 0.3),
1px 4px 6px #e74d3c;
}
.ot-letter-left スパン:after {
color: #e74d3c;
}
.ot-letter-left:hover scan:after {
color: #ea6253; left {
背景: #e74d3c;
}
.ot-letter-left スパン {
1px 4px 6px #e74d3c,
0 0 0 hsla(0, 0%, 0%, 0.3),
1px 4px 6px #e74d3c;
}
color: #e74d3c;
color: #ea6253;
.ot-letter-bottom スパン:前,
.ot-letter-bottom スパン:後 {
}
.ot-letter-bottom スパン:前 {
変換: スケール( 1,1.05) skew(4deg,0deg);
}
.ot-letter-bottom scan:after {
0px -1px 0px hsla(360, 100%, 100%, 0.1),
0px 3px 1px hsla(0, 0%, 0%, 0.4);
変換: 回転 X(15 度);
.ot-letter-bottom:hover span:before {
変換: 変換 Y(-0.035em) スケール( 1,1.2) skew(10deg,0deg);
}
.ot-letter-bottom:hover span:after {
}
オンラインプレビューを今すぐダウンロード
学習ソース: http://tympanus.net/Tutorials/AnimatedopeningType/
htnl5/css3 コンテンツの詳細については、
をクリックしてください。