纯css3实现走马灯效果


Posted in HTML / CSS onDecember 26, 2014

纯css3实现了一个正六边形的走马灯效果,记录一下css3动画的学习情况,效果如下:

纯css3实现走马灯效果

主要用到的css3技术有:keyframes、perspective、perspective-origin、transform(translate、rotate)、animation、transform-origin,另外加一点平面几何知识(计算间距、角度啥的),详细过程如下:

首先设计一下要显示的布局(俯视图),途中垂直的线为辅助线,计算偏移量时需要用的:

纯css3实现走马灯效果

红色框框为旋转面(即走马灯效果的结构最终以该面的中点为旋转轴旋转的),六个面也都是基于这个面做的布局,先看红框下面的三个面,左侧的面原本在蓝色线处,通过旋转到达绿色线处,右边同理,中间的面只需要在Z轴方向移动二分之根号三个边长的距离即可,所有的面均通过偏移和旋转的方式达到上图的结构,需要注意的是要保证有图案的面(本例中使用的是文字,思路一致)要向外,比如上面中间的面,在Z轴向外偏移二分之根号三个边长的距离之后还要以中点为圆心旋转180°,所有的面同理易得。在此过程中需要牢记的一点技术是:三维坐标系中,从坐标原点出发,向着坐标轴的正方向看去,逆时针旋转时rotate(X/Y/Z)的值为正数,顺时针旋转时,rotate(X/Y/Z)值为负数。

设置结构:一个3D场景、一个走马灯的旋转面和走马灯的六个面:


复制代码
代码如下:

<div class="wapper"> <!--场景-->
<div class="rotate"> <!--容器-->
<div class="item itemOne">1</div> <!--六个面-->
<div class="item itemTwo">2</div>
<div class="item itemThree">3</div>
<div class="item itemFour">4</div>
<div class="item itemFive">5</div>
<div class="item itemSix">6</div>
</div>
</div>

设置3D场景:


复制代码
代码如下:

.wapper{
-webkit-perspective:800; /*观察距离800*/
-webkit-perspective-origin:50% -100%; /*从正前方上方斜向下观察*/
width:400px;
height:300px;
margin:100px auto;
}

设置旋转面:


复制代码
代码如下:

@-webkit-keyframes rotation{ /*动画过程*/
0%{-webkit-transform:rotateY(0deg);}
100%{-webkit-transform:rotateY(-360deg);}
}
.rotate{
-webkit-transform-style:preserve-3d; /*3D变换*/
-webkit-animation: rotation 6s infinite; /*动画名称、时间、循环动画*/
-webkit-animation-timing-function: linear; /*匀速动画*/
-webkit-transform-origin:center; /*沿中间旋转*/
width:100%;
height:100%;
position:relative; /*相对定位布局*/
}

对六个面除了位置之外的通用样式做设置:


复制代码
代码如下:

.item{
-webkit-transform-origin:center; /*均沿中心旋转*/
width:198px;
height:300px;
position:absolute; /*绝对定位在旋转面上*/
background:none;
text-align:center;
line-height:300px;
}

分别设置六个面的位置,以一号为例(上面结构图中红框下面左边绿色线标注的面),所有的数值均需要经过几何计算得来:


复制代码
代码如下:

.itemOne{
left:-50px;
-webkit-transform:translateZ(87px) rotateY(-60deg); /*z轴向外移动87px,沿Y轴方向旋转-60°*/
background:#f00;
}

在鼠标悬浮在该结构上时动画停止:


复制代码
代码如下:

.rotate:hover{
-webkit-animation-play-state:paused; /*设置动画状态*/
}

本例子只有在webkit内核的浏览器中可以查看效果,如需兼容其他现代浏览器,需添加 -moz- 等前缀,完整代码如下:

复制代码
代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Animation Test</title>
<style>
*{margin:0;padding:0;}
@-webkit-keyframes rotation{
0%{-webkit-transform:rotateY(0deg);}
100%{-webkit-transform:rotateY(-360deg);}
}
.wapper{
-webkit-perspective:800;
-webkit-perspective-origin:50% -100%;
width:400px;
height:300px;
margin:100px auto;
}
.rotate{
-webkit-transform-style:preserve-3d;
-webkit-animation: rotation 6s infinite;
-webkit-animation-timing-function: linear;
-webkit-transform-origin:center;
width:100%;
height:100%;
position:relative;
}
.item{
-webkit-transform-origin:center;
width:198px;
height:300px;
position:absolute;
background:none;
text-align:center;
line-height:300px;
}
.itemOne{
left:-50px;
-webkit-transform:translateZ(87px) rotateY(-60deg);
background:#f00;
}
.itemTwo{
left:100px;
-webkit-transform:translateZ(173px);
background:#ff0;
}
.itemThree{
left:250px;
-webkit-transform:translateZ(87px) rotateY(60deg);
background:#0ff;
}
.itemFour{
left:250px;
-webkit-transform:translateZ(-87px) rotateY(120deg);
background:#0f0;
}
.itemFive{
left:100px;
-webkit-transform:translateZ(-173px) rotateY(180deg);
background:#0ff;
}
.itemSix{
left:-50px;
-webkit-transform:translateZ(-87px) rotateY(-120deg);
background:#00f;
}
.rotate:hover{
-webkit-animation-play-state:paused;
}
</style>
</head>
<body>
<div class="wapper">
<div class="rotate">
<div class="item itemOne">1</div>
<div class="item itemTwo">2</div>
<div class="item itemThree">3</div>
<div class="item itemFour">4</div>
<div class="item itemFive">5</div>
<div class="item itemSix">6</div>
</div>
</div>
</body>
</html>

是不是很炫酷的效果呢,小伙伴们,CSS3真是个好东西,你值得拥有。

HTML / CSS 相关文章推荐
CSS+jQuery实现的在线答题功能
Apr 25 HTML / CSS
css3的动画特效之动画序列(animation)
Dec 22 HTML / CSS
CSS3 新增选择器的实例
Nov 13 HTML / CSS
Html5之svg可缩放矢量图形_动力节点Java学院整理
Jul 17 HTML / CSS
详解rem 适配布局
Oct 31 HTML / CSS
详解Html5原生拖拽操作
Jan 12 HTML / CSS
让IE支持HTML5的方法
Dec 11 HTML / CSS
IE9对HTML5中部分属性不支持的原因分析
Oct 15 HTML / CSS
HTML5之语义标签介绍
Jul 07 HTML / CSS
html5使用canvas实现弹幕功能示例
Sep 11 HTML / CSS
html5 canvas简单封装一个echarts实现不了的饼图
Jun 12 HTML / CSS
深入理解margin塌陷和margin合并的解决方案
Jun 26 HTML / CSS
纯CSS3实现的阴影效果
Dec 24 #HTML / CSS
使用CSS3实现圆角,阴影,透明
Dec 23 #HTML / CSS
纯css3实现的鼠标悬停动画按钮
Dec 23 #HTML / CSS
css3实现3D色子翻转特效
Dec 23 #HTML / CSS
CSS3使用border-radius属性制作圆角
Dec 22 #HTML / CSS
CSS3 实现侧边栏展开收起动画
Dec 22 #HTML / CSS
css3选择器基本介绍
Dec 15 #HTML / CSS
You might like
提高Laravel应用性能方法详解
2019/06/24 PHP
laravel实现一个上传图片的接口,并建立软链接,访问图片的方法
2019/10/12 PHP
PHP页面静态化――纯静态与伪静态用法详解
2020/06/05 PHP
使用onbeforeunload属性后的副作用
2007/03/08 Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
2013/11/19 Javascript
js解决弹窗问题实现班级跳转DIV示例
2014/01/06 Javascript
javascript中arguments,callee,caller详解
2016/03/16 Javascript
深入理解Angular2 模板语法
2016/08/07 Javascript
Javascript下拉刷新的简单实现
2017/02/14 Javascript
微信小程序商城项目之购物数量加减(3)
2017/04/17 Javascript
Bootstrap fileinput文件上传组件使用详解
2017/06/06 Javascript
Bootstrap datepicker日期选择器插件使用详解
2017/07/26 Javascript
JavaScript实现简单图片轮播效果
2017/08/21 Javascript
vue父子组件的嵌套的示例代码
2017/09/08 Javascript
JavaScript实现随机数生成器(去重)
2017/10/13 Javascript
vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
2018/04/20 Javascript
vue踩坑记录之数组定义和赋值问题
2019/03/20 Javascript
[41:52]2018DOTA2亚洲邀请赛3月29日小组赛B组Effect VS Secret
2018/03/30 DOTA
Python实现的金山快盘的签到程序
2013/01/17 Python
Python中的TCP socket写法示例
2018/05/11 Python
Python txt文件加入字典并查询的方法
2019/01/15 Python
python em算法的实现
2020/10/03 Python
HTML如何让IMG自动适应DIV容器大小的实现方法
2020/02/25 HTML / CSS
美国领先的水果篮送货公司和新鲜水果供应商:The Fruit Company
2018/02/13 全球购物
JSF如何进行表格处理及取值
2012/08/06 面试题
学生打架检讨书
2014/10/20 职场文书
西岭雪山导游词
2015/02/06 职场文书
毕业答辩开场白范文
2015/05/27 职场文书
导游词之藏龙百瀑景区
2019/12/30 职场文书
SqlServer: 如何更改表的文件组?(进而改变存储位置)
2021/04/05 SQL Server
python控制台打印log输出重复的解决方法
2021/05/14 Python
golang连接MySQl使用sqlx库
2022/04/14 Golang
Mysql 8.x 创建用户以及授予权限的操作记录
2022/04/18 MySQL
Python绘制散乱的点构成的图的方法
2022/04/21 Python
Python 视频画质增强
2022/04/28 Python
PHP 时间处理类Carbon
2022/05/20 PHP