纯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 相关文章推荐
CSS3 选择器 伪类选择器介绍
Jan 21 HTML / CSS
深入CSS3 动画效果的总结详解
May 09 HTML / CSS
一款CSS3实现多功能下拉菜单(带分享按)的教程
Nov 05 HTML / CSS
CSS3实现闪烁动画效果的方法
Feb 09 HTML / CSS
通过CSS3的object-fit来调整图片适配尺寸的技巧简介
Feb 27 HTML / CSS
CSS3实现图片抽屉式效果的示例代码
Nov 06 HTML / CSS
css3中less实现文字长阴影(long shadow)
Apr 24 HTML / CSS
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
May 28 HTML / CSS
html5使用canvas实现弹幕功能示例
Sep 11 HTML / CSS
详解如何通过H5(浏览器/WebView/其他)唤起本地app
Dec 11 HTML / CSS
html5拖拽应用记录及注意点
May 27 HTML / CSS
纯CSS实现hover图片pop-out弹出效果的实例代码
Apr 16 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
留言板翻页的实现详解
2006/10/09 PHP
php获取目录所有文件并将结果保存到数组(实例)
2013/10/25 PHP
浅析php适配器模式(Adapter)
2014/11/25 PHP
thinkphp中session和cookie无效的解决方法
2014/12/19 PHP
详解Yii2 rules 的验证规则
2016/12/02 PHP
PHP实现的DES加密解密封装类完整实例
2017/04/29 PHP
Yii Framework框架使用PHPExcel组件的方法示例
2019/07/24 PHP
javascript eval和JSON之间的联系
2009/12/31 Javascript
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
2013/04/21 Javascript
jQuery取得设置清空select选择的文本与值
2014/07/08 Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
2015/04/13 Javascript
jQuery Ajax中的事件详细介绍
2015/04/16 Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
2015/08/24 Javascript
详解vue slot插槽的使用方法
2017/06/13 Javascript
ES6学习之变量的两种命名方法示例
2017/07/18 Javascript
Javascript快速实现浏览器系统通知
2017/08/26 Javascript
vue-cli 目录结构详细讲解总结
2019/01/15 Javascript
vue内置组件component--通过is属性动态渲染组件操作
2020/07/28 Javascript
[54:57]DOTA2-DPC中国联赛定级赛 Aster vs DLG BO3第二场 1月8日
2021/03/11 DOTA
python类继承与子类实例初始化用法分析
2015/04/17 Python
Python中subprocess模块用法实例详解
2015/05/20 Python
Python 常用的安装Module方式汇总
2017/05/06 Python
基于Python中capitalize()与title()的区别详解
2017/12/09 Python
解决Python print 输出文本显示 gbk 编码错误问题
2018/07/13 Python
python钉钉机器人运维脚本监控实例
2019/02/20 Python
Python 私有化操作实例分析
2019/11/21 Python
python_array[0][0]与array[0,0]的区别详解
2020/02/18 Python
虚拟环境及venv和virtualenv的区别说明
2021/02/05 Python
英国医生在线预约:Top Doctors
2019/10/30 全球购物
主要负责人任命书
2014/06/06 职场文书
联谊活动总结范文
2015/05/09 职场文书
小学教育见习总结
2015/06/23 职场文书
小学教师见习总结
2015/06/23 职场文书
2007年老电脑安装win11会怎么样? 网友实测win11在老电脑运行良好
2021/11/21 数码科技
Android开发实现极为简单的QQ登录页面
2022/04/24 Java/Android
instantclient客户端 连接oracle数据库
2022/04/26 Oracle