html5——3D案例(立体汉字,旋转导航)
1、立体汉字:旋转点left,attr(data-cont)可获取自定义属性值,skewY(倾斜转换)参考地址
2、旋转导航:先移动后旋转,li标签需要延迟执行旋转
注意::hover事件触发自己的:afert伪元素事件中间是没有空格的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
} body {
text-align: center;
background-color: #EBE6E6;
} /*汉字*/
.characters {
margin-top: 150px;
} .characters > span {
display: inline-block;
width: 80px;
height: 80px;
font: 500 60px/80px "Microsoft YaHei";
text-align: center;
position: relative;
transform-style: preserve-3d;
} .characters > span::before, .characters > span::after {
content: attr(data-cont);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: white;
transform-origin: left;
transform: scale(0.96, 1);
transition: all 1s;
} .characters > span::before {
color: #ccc;
} .characters:hover span::after {
transform: rotateY(-35deg);
} .characters:hover span::before {
/*倾斜*/
transform: rotateY(-15deg) skewY(15deg);
} /*导航*/
.nav {
width: 420px;
height: 30px;
margin: 50px auto;
transform-origin: bottom;
} ul {
list-style: none;
} li {
float: left;
transform-style: preserve-3d;
position: relative;
width: 60px;
height: 30px;
transform: rotateX(0deg);
transition: all 0.8s;
} li > span {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-align: center;
font: 400 15px/30px "Microsoft YaHei";
} li > span:nth-child(1) {
background-color: green;
transform: translateZ(15px);
} li > span:nth-child(2) {
background-color: yellow;
transform: translateY(-15px) rotateX(90deg);
} .nav:hover li {
transform: rotateX(-90deg);
} li:nth-child(2) {
transition-delay: 0.1s;
} li:nth-child(3) {
transition-delay: 0.2s;
} li:nth-child(4) {
transition-delay: 0.3s;
} li:nth-child(5) {
transition-delay: 0.4s;
} li:nth-child(6) {
transition-delay: 0.6s;
} li:nth-child(7) {
transition-delay: 0.8s;
} </style>
</head>
<body>
<div class="characters">
<span data-cont="安">安</span>
<span data-cont="徽">徽</span>
<span data-cont="省">省</span>
<span data-cont="图">图</span>
<span data-cont="书">书</span>
<span data-cont="馆">馆</span>
</div>
<div class="nav">
<ul>
<li>
<span>第一</span>
<span>第二</span>
</li>
<li>
<span>第一</span>
<span>第二</span>
</li>
<li>
<span>第一</span>
<span>第二</span>
</li>
<li>
<span>第一</span>
<span>第二</span>
</li>
<li>
<span>第一</span>
<span>第二</span>
</li>
<li>
<span>第一</span>
<span>第二</span>
</li>
<li>
<span>第一</span>
<span>第二</span>
</li>
</ul>
</div>
</body>
</html>
html5——3D案例(立体汉字,旋转导航)的更多相关文章
- html5——3D案例(立体导航)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- html5——3D案例(立方体)
立方体:父盒子规定了3d呈现属性,立方体做旋转运动 移动顺序:1.每个盒子都先移动100px,然后再做相应的旋转 2.只有这样立方体的几何中心点与父盒子的几何中心点是一样的 <!DOCTYPE ...
- html5——3D案例(音乐盒子、百度钱包)
1.音乐盒子:触碰盒子,盖子会打开 2.百度钱包:触碰钱包,钱包,会180度旋转 <!DOCTYPE html> <html lang="en"> < ...
- 9个超绚丽的HTML5 3D图片动画特效
在Web 1.0时代,我们的网页中图片数量非常少,而且都是以静态图片为主.HTML5的出现,推动了Web 2.0的发展,同时也催生出了很多绚丽的HTML5图片动画特效,特别是有些还有3D的动画效果.本 ...
- 8款效果惊艳的HTML5 3D动画
1.HTML5 WebGL水面水波荡漾特效 之前已经向各位分享过一款很逼真的HTML5水波荡漾特效,效果还算不错.今天再向大家分享一款更加给力的HTML5水波动画,画面上是一个大水池,水池底部是一颗大 ...
- 超给力的HTML5 3D动画欣赏及源码下载
HTML5有着非常巨大的魅力,尤其是CSS3和Cavnas,可以帮助页面渲染得非常炫酷.值得一提的是,利用HTML5的3D特性可以帮助你更加方便地在网页上实现3D动画特效.本文分享的这些HTML5 3 ...
- CSS3特效----制作3D旋转导航
大致思路:首先给 three-d-box 设置一个 transition是不可少的 然后每个 a 标签里面有两个 span 一个叫 font 一个叫 back,默认状态下 font 旋转0度,也就是没 ...
- 强大!HTML5 3D美女图片旋转实现教程
又到周末,来弄点HTML5的特效玩玩,今天要折腾的是HTML5 3D图片特效,图片在垂直方向上被分割成一条条小矩形,在图片上拖动鼠标即可让每一个小矩形旋转,从而让图片形成3D立体的效果,来看看效果图: ...
- CSS3制作旋转导航
慕课网学习CSS3时,遇到个习题,觉得有必要总结学习下:CSS3制作旋转导航 慕课网习题地址:http://www.imooc.com/code/1883 示例及源码地址:http://codepen ...
随机推荐
- POJ——1061 青蛙的约会
青蛙的约会 Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 117858 Accepted: 24599 Descript ...
- [bzoj 1059][ZJOI 2007]矩阵游戏(二分图最大匹配)
题目:http://www.lydsy.com/JudgeOnline/problem.php?id=1059 分析:不论如何交换,同一行或同一列的点还是同一行或同一列,如果我们称最后可以排成题目要求 ...
- Ubuntu 16.04安装VMware-Workstation-12
1.下载: https://download3.vmware.com/software/wkst/file/VMware-Workstation-Full-12.1.1-3770994.x86_64. ...
- PS和AI软件差别
首先.PS是处理位图图像的.AI是处理矢量图图形的.那就先说一下两者最主要的问题,位图与矢量图的差别和优缺点. 在计算机画图领域中.依据成图原理和绘制方法的不同.数字图形.图像分为"矢量图 ...
- 去除ckeditor上传图片预览中的英文字母
去除ckeditor上传图片预览中的英文字母 CKEDITOR.replace('text', { filebrowserImageUploadUrl : 'upload_img.do', langu ...
- 网络协议IPV6基础知识点集锦
由于互联网的快速发展与普及,原有的IPV4地址已不能满足网络用户的需求,虽然NAT可以缓解IPV4地址的耗尽,但NAT破坏了网络环境的开放.透明以及端到端的特性,因此IPV6地址协议应运而生. IPV ...
- Qt学习之QListWidget删除Item
将QListWidgetItem从QListWidget列表中删除有两种方法能够做到.但也要依据自己的须要进行选择. 第一种是 QListWidgetItem *takeItem(int row); ...
- iOS页面右滑返回的实现方法总结
1.边缘触发的系统方法 ①系统返回按钮 self.navigationController.interactivePopGestureRecognizer.enabled = YES; ②自定义返回 ...
- Hibernate基于注解的双向one-to-many映射关系的实现
在项目中用到了一对多的实体类关系映射,之前接触的都是基于配置文件的映射实现.可是公司的大部分都是基于注解的.因此自己參考之前的代码捣鼓了基于注解的一对多的映射关系实现. 背景: 一的一端:QingAo ...
- UVA - 10691 Subway
题目大意:给定n个点.要求建造尽量少得铁路(从原点发射出的射线).使得全部点到铁路的最短距离小于d. 解题思路:题目能够转化成区间选点问题,即以极角来表示铁轨.然后计算出每一个区间可行的极角范围,进行 ...