CSS3实现3D文字动画效果

</p> <p>body{background:#333;}<br /> h1{font:normal 90px/1.5 'Ultra','Curlz MT','Bauhaus 93','Blackoak Std',Courier,Arial;color:#7e9409;position:absolute;top:85px;left:10px;width:300px;<br /> -moz-animation: 1s slidein;<br /> -webkit-animation: 1s slidein;<br /> -webkit-perspective: 600;<br /> -moz-perspective: 600px;<br /> }<br /> @-moz-keyframes slidein {<br /> from {top:1550px;}<br /> 85% {top:5px;}<br /> to {top:85px;}<br /> }<br /> @-webkit-keyframes slidein {<br /> from {top:1550px;}<br /> 85% {top:5px;}<br /> to {top:85px;}<br /> }<br /> .myLogo,.myLogo a{<br /> -moz-transition: all 2s ease-in-out 0s;<br /> -webkit-transition:all 2s ease-in-out 0;<br /> transition:all 2s ease-in-out 0;<br /> }<br /> .myLogo{position:relative;display:inline-block;zoom:1;top:0;left:0;text-shadow:-2px -1px 1px #7e9409;opacity: 0.8;filter:alpha(opacity=50);<br /> -webkit-transform: rotateY(30deg);<br /> -moz-transform: rotateY(30deg);<br /> transform: rotateY(30deg);<br /> }<br /> h1:hover .myLogo {<br /> /* 3d-transform */<br /> -webkit-transform: rotateY(0);<br /> -moz-transform: rotateY(0);<br /> transform: rotateY(0);<br /> text-shadow:0;<br /> }<br /> .myLogo a{position:absolute;top:1px;left:5px;color:#B7D902;text-shadow:-1px -1px 1px #fff;text-decoration: none;}<br /> h1:hover .myLogo a{left: 2px;} </p> <h1> <span class="myLogo">CSS3 3D文字<a href="https://www.kunjuke.com/tag/234/" title="动画" target="_blank">动画</a></span><br /> </h1> <p>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

您可能感兴趣的文章:

• jquery+CSS3实现3D拖拽相册效果
• 基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
• CSS3实现动态翻牌效果 仿百度贴吧3D翻牌一次动画特效
• 原生javascript+css3编写的3D魔方动画旋扭特效
• jQuery+CSS3实现3D立方体旋转效果
• CSS3 3D 技术手把手教你玩转