|
[tr][td]在本教程中，将基于CSS3创建的一个实现一个有趣的3D开放式效果。教程的目的是展示我们如何能带来一些生活上使用CSS3 。
图片：114339m1au001dpezawrpc.jpg  在线预览 立即下载AnimatedOpeningType.zip html: [*] [*] [*]C [*] [*]J [*] [*]8 [*] [*]A [*] 复制代码 css: [*].grid li span { [*] display: inline-block; [*] font-weight: 900; [*] line-height: 1; [*] position: relative; [*] color: hsla(0, 0%, 0%, 0.6); [*] transform-style: preserve-3d; [*] perspective: 550px; [*] z-index: 1; [*]} [*].grid li span:before, [*].grid li span:after { [*] position: absolute; [*] content: attr(data-letter); [*] line-height: inherit; [*] top: 0; [*] left: 0; [*] right: 0; [*] bottom: 0; [*] z-index: 2; [*] transition: all 0.3s; [*]} [*] [*].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); [*]} 复制代码 via:http://www.j--d.com/html/187.html [/td][/tr] |
|
