时间:2021-07-01 10:21:17 帮助过:8人阅读
在线预览立即下载
在本教程中,将基于CSS3创建的一个实现一个有趣的3D开放式效果。教程的目的是展示我们如何能带来一些生活上使用CSS3 。
html:
.grid li span:before {
text-shadow: none;
color: hsla(0, 0%, 0%, 0.12);
}
.ot-letter-left span:before,
.ot-letter-left span:after {
transform-origin: 0 50%;
}
.ot-letter-left span:before {
transform: 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 {
transform: rotateY(-40deg);
}
.ot-letter-left {
background: #e74d3c;
}
.ot-letter-left span {
text-shadow:
1px 4px 6px #e74d3c,
0 0 0 hsla(0, 0%, 0%, 0.3),
1px 4px 6px #e74d3c;
}
.ot-letter-left span:after {
color: #e74d3c;
}
.ot-letter-left:hover span:after {
color: #ea6253;
}
.ot-letter-left {
background: #e74d3c;
}
.ot-letter-left span {
text-shadow:
1px 4px 6px #e74d3c,
0 0 0 hsla(0, 0%, 0%, 0.3),
1px 4px 6px #e74d3c;
}
.ot-letter-left span:after {
color: #e74d3c;
}
.ot-letter-left:hover span:after {
color: #ea6253;
}
.ot-letter-bottom span:before,
.ot-letter-bottom span:after {
transform-origin: 50% 0;
}
.ot-letter-bottom span:before {
transform: scale(1,1.05) skew(4deg,0deg);
}
.ot-letter-bottom span:after {
text-shadow:
0px -1px 0px hsla(360, 100%, 100%, 0.1),
0px 3px 1px hsla(0, 0%, 0%, 0.4);
transform: rotateX(15deg);
}
.ot-letter-bottom:hover span:before {
transform: translateY(-0.035em) scale(1,1.2) skew(10deg,0deg);
}
.ot-letter-bottom:hover span:after {
transform: translateY(0.045em) rotateX(40deg);
}
在线预览立即下载
学习来源:http://tympanus.net/Tutorials/AnimatedOpeningType/
更多htnl5/css3内容请点击