首页 > 代码库 > 基于css3的文字3D翻转特效
基于css3的文字3D翻转特效
一款基于css3的文字3D翻转特效。这款特效当鼠标经过文字的时候3D翻转显示阴影。效果图如下:
在线预览 源码下载
实现的代码。
html代码:
<div class="component"> <ul class="grid"> <li> <div class="codrops-header"> <h1> Animated Opening Type</h1> </div> </li> <li class="ot-letter-left"><span data-letter="C">C</span></li> <li class="ot-letter-top"><span data-letter="J">J</span></li> <li class="ot-letter-right"><span data-letter="8">8</span></li> <li class="ot-letter-bottom"><span data-letter="A">A</span></li> <li class="ot-letter-left"><span data-letter="O">O</span></li> <li class="ot-letter-left"><span data-letter="Q">Q</span></li> <li class="ot-letter-right"><span data-letter="S">S</span></li> <li class="ot-letter-left"><span data-letter="B">B</span></li> <li class="ot-letter-top"><span data-letter="L">L</span></li> <li class="ot-letter-right"><span data-letter="T">T</span></li> <li class="ot-letter-left"><span data-letter="K">K</span></li> <li class="ot-letter-top"><span data-letter="S">S</span></li> <li class="ot-letter-left"><span data-letter="Z">Z</span></li> <li class="ot-letter-top"><span data-letter="3">3</span></li> <li class="ot-letter-right"><span data-letter="D">D</span></li> <li class="ot-letter-bottom"><span data-letter="I">I</span></li> <li class="ot-letter-right"><span data-letter="H">H</span></li> <li class="ot-letter-bottom"><span data-letter="Q">Q</span></li> <li class="ot-letter-right"><span data-letter="E">E</span></li> <li class="ot-letter-left"><span data-letter="A">A</span></li> <li class="ot-letter-top"><span data-letter="P">P</span></li> <li class="ot-letter-right"><span data-letter="F">F</span></li> <li class="ot-letter-left"><span data-letter="S">S</span></li> <li class="ot-letter-top"><span data-letter="K">K</span></li> <li class="ot-letter-left"><span data-letter="U">U</span></li> <li class="ot-letter-top"><span data-letter="L">L</span></li> <li class="ot-letter-right"><span data-letter="6">6</span></li> <li class="ot-letter-bottom"><span data-letter="R">R</span></li> <li class="ot-letter-left"><span data-letter="O">O</span></li> <li class="ot-letter-bottom"><span data-letter="V">V</span></li> <li class="ot-letter-right"><span data-letter="S">S</span></li> <li class="ot-letter-left"><span data-letter="Q">Q</span></li> <li class="ot-letter-top"><span data-letter="J">J</span></li> <li class="ot-letter-right"><span data-letter="G">G</span></li> <li class="ot-letter-left"><span data-letter="R">R</span></li> </ul> </div>
via:http://www.w2bc.com/Article/20004
基于css3的文字3D翻转特效
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。