纯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 相关文章推荐
让IE6、IE7、IE8支持CSS3的脚本
Jul 20 HTML / CSS
10个很棒的 CSS3 开发工具 推荐
May 16 HTML / CSS
35款精致的 CSS3 和 HTML5 网页模板 推荐
Aug 03 HTML / CSS
CSS类名支持中文命名的示例
Apr 04 HTML / CSS
CSS3实现多背景模拟动态边框的效果
Nov 08 HTML / CSS
纯CSS3大转盘抽奖示例代码(响应式、可配置)
Jan 13 HTML / CSS
CSS3实现红包抖动效果
Dec 23 HTML / CSS
CSS3实现苹果手机解锁的字体闪亮效果示例
Jan 05 HTML / CSS
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
Jan 27 HTML / CSS
HTML5 canvas基本绘图之绘制线段
Jun 27 HTML / CSS
HTML5使用Audio标签实现歌词同步的效果
Mar 17 HTML / CSS
CSS3 制作的彩虹按钮样式
Apr 11 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
在PHP3中实现SESSION的功能(二)
2006/10/09 PHP
php学习笔记 类的声明与对象实例化
2011/06/13 PHP
java微信开发之上传下载多媒体文件
2016/06/24 PHP
Zend Framework入门教程之Zend_Db数据库操作详解
2016/12/08 PHP
phpstudy默认不支持64位php的解决方法
2017/02/20 PHP
js自定义事件及事件交互原理概述(一)
2013/02/01 Javascript
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
2013/05/13 Javascript
javascript中数组的concat()方法使用介绍
2013/12/18 Javascript
浅析JS中document对象的一些重要属性
2014/03/06 Javascript
使用npm发布Node.JS程序包教程
2015/03/02 Javascript
浅谈利用JavaScript进行的DDoS攻击原理与防御
2015/06/04 Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
2015/12/10 Javascript
详解vue过滤器在v2.0版本用法
2017/06/01 Javascript
Vue实现导航栏点击当前标签变色功能
2020/08/19 Javascript
javascript实现拖拽碰撞检测
2020/03/12 Javascript
Node Mongoose用法详解【Mongoose使用、Schema、对象、model文档等】
2020/05/13 Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
2020/10/29 Javascript
深入讲解Python中的迭代器和生成器
2015/10/26 Python
如何在Python函数执行前后增加额外的行为
2016/10/20 Python
详解Python中如何写控制台进度条的整理
2018/03/07 Python
python打包exe开机自动启动的实例(windows)
2019/06/28 Python
wxPython实现绘图小例子
2019/11/19 Python
Python图像阈值化处理及算法比对实例解析
2020/06/19 Python
Python如何给函数库增加日志功能
2020/08/04 Python
HTML5 标准将把互联网视频扔回到黑暗时代
2010/02/10 HTML / CSS
新西兰第一的行李箱网站:luggage.co.nz
2019/07/22 全球购物
土木工程应届生自荐信
2013/09/24 职场文书
咖啡店自主创业商业计划书
2014/01/22 职场文书
高中生职业规划范文
2014/03/09 职场文书
小学一年级学生评语
2014/04/22 职场文书
教师自我剖析材料范文
2014/09/30 职场文书
办公室行政主管岗位职责
2015/04/09 职场文书
创业计划书之孕婴生活馆
2019/11/11 职场文书
Python入门之使用pandas分析excel数据
2021/05/12 Python
JS的深浅复制详细
2021/10/16 Javascript
分享CSS盒子模型隐藏的几种方式
2022/02/28 HTML / CSS