基于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翻转特效的更多相关文章
- 基于html5顶部导航3D翻转展开特效
基于html5顶部导航3D翻转展开特效是一款基于jQuery+HTML5实现的3D翻转网站导航菜单代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <header cla ...
- 纯css3响应式3d翻转菜单
前端开发whqet,csdn,王海庆,whqet,前端开发专家 周末快乐哈,今天来看一个纯CSS3实现的3d翻转菜单.3d响应式菜单,希望对大家有所帮助. 在线赞赏效果.在线编辑代码,或者下载收藏. ...
- 基于jQuery图片弹出翻转特效代码
分享一款基于jQuery图片弹出翻转特效代码.这是一款基于jQuery+HTML5实现的,里面包含六款不同效果的鼠标点击图片弹出特效下载.效果图如下: 在线预览 源码下载 实现的代码. html代 ...
- html5和css3实现的3D滚动特效
今天给大家带来一款html5和css3实现的3D滚动特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="container"&g ...
- 一款基于css3鼠标经过圆形旋转特效
今天给大家分享一款基于css3鼠标经过圆形旋转特效.当鼠标经过的时候图片边框颜色旋转,图片显示详情.该实例适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗 ...
- CSS3之图片3D翻转效果(网页效果--每日一更)
今天,带来的是纯CSS3的效果--图片3D翻转. 请看效果:亲,请点击这里 这个效果主要还是运用了CSS3的transform变形属性,与上个效果不同的是,这次并不是动画,所以没有采用animatio ...
- 基于CSS3飘带状3D菜单 菜单带小图标
这次我们要来分享一款很特别的CSS3菜单,菜单的外观是飘带状的,并且每一个菜单项有一个精美的小图标,鼠标滑过菜单项时,菜单项就会向上凸起,像是飘带飘动一样,形成非常酷的3D视觉效果.这款CSS3飘带状 ...
- 一款基于css3的散子3D翻转特效
css3使我们能够跳出2d空间,实现3维空间的动画效果,这里给出一个自动翻转的3d色子动画效果制作过程. 第一步,首先进行HTML的布局,对于3D效果,布局有一定的规律,代码如下: <body& ...
- css 翻牌 翻转 3d翻转 特效
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- 1、Hadoop架构
1.Hadoop 是一个能够对大量数据进行分布式处理的软件框架,实现了Google的MapReduce编程模型和框架,能够把应用程序分割成许多小的工作单元放到任何集群节点上执行. 作业(job):一个 ...
- Context3D 不可用
打开项目文件夹中的html-template,并找到index.template.html,右键使用TextEditor编辑,在params.allowfullscreen=”true”:后面加上pa ...
- Hadoop HDFS概念学习系列之分布式文件管理系统(二十五)
数据量越来越多,在一个操作系统管辖的范围存在不了,那么就分配到更多的操作系统管理的磁盘中,但是不方便管理和维护,因此迫切需要一种系统来 管理多台机器上的文件,这就是分布式文件管理系统. 是一种允许文件 ...
- ArrayList中元素去重问题
如题所示,如果一个ArrayList中包含多个重复元素,该如何去重呢? 思路一以及实现: 声明2个ArrayList,分别为listA与listB ,listA为待去重list ,listB 保存去重 ...
- Android问题-DelphiXE5开发Andriod连接Webservice乱码问题
问题现象:在使用DelphiXE5开发Andriod连接Webservice乱码. 问题原因:数据类型不同. 问题处理:为了不让广大朋友再烦恼,我就把解决办法写出来吧,把数据库中我们要查询的字段类型改 ...
- POJ 2888 Magic Bracelet(Burnside引理,矩阵优化)
Magic Bracelet Time Limit: 2000MS Memory Limit: 131072K Total Submissions: 3731 Accepted: 1227 D ...
- USB枚举过程(1)
总的过程 ① host检测到device,reset 获取设备描述符 host发获取设备描述符请求 ->setup ->data0 <-ack Divice 返回设备描述符 -> ...
- css div 垂直居中
参考:http://css-tricks.com/centering-in-the-unknown/ <style> .valign { font-size: 0px;/* clear s ...
- INNO&&DELPHI
好久不弄delphi了,再次见到inno,居然不知所措~ 让人亲切的 var,又见到了.而如今,到处可见. 整目录复制 Flags: igNoreversion recursesubdirs crea ...
- 转载:页面加载swf插件:swfobject
转自:http://www.cnblogs.com/analyzer/articles/1299592.html 我一直都在用SWFObject 插入flash,好处多多,代码简洁,不会出现微软的“单 ...