css3 走马灯效果
纯css3实现了一个正六边形的走马灯效果，记录一下css3动画的学习情况，效果如下：
主要用到的css3技术有：keyframes、perspective、perspective-origin、transform（translate、rotate）、animation、transform-origin，另外加一点平面几何知识（计算间距、角度啥的），详细过程如下：
首先设计一下要显示的布局（俯视图），途中垂直的线为辅助线，计算偏移量时需要用的：
红色框框为旋转面（即走马灯效果的结构最终以该面的中点为旋转轴旋转的），六个面也都是基于这个面做的布局，先看红框下面的三个面，左侧的面原本在蓝色线处，通过旋转到达绿色线处，右边同理，中间的面只需要在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*/
-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 走马灯效果的更多相关文章
- 小程序 css3走马灯效果
<view class='notable-container' style='background:#ffffff;'> <view style='z-index:2000;back ...
- vue 实现走马灯效果
Part.1 问题 在写一个H5页面时遇到一个需求,头部公告需要滚动变换,需要实现一个走马灯效果 Part.2 实现 我的做法:利用 定时器 + CSS3 变换公告数组的顺序 从而实现走马灯效果 ...
- Bounce.js – 快速创建漂亮的 CSS3 动画效果
Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代 ...
- Hover.css：一组超实用的 CSS3 悬停效果和动画
Hover.css 是一套基于 CSS3 的鼠标悬停效果和动画,这些可以非常轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,必要的时候使用 before 和 after ...
- 10个实用的 CSS3 按钮效果制作教程
人们往往喜欢那些有更多互动元素的网站,因此现在很多设计师专注于他们的 CSS3 技能.这是因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力.这里分享的10个优秀的 CSS3 按钮效果制作 ...
- 学习制作精美 CSS3 按钮效果的10个优秀教程
由于互联网世界正在发生变化,人们往往喜欢那些有更多互动元素的网站,因此现在很多 Web 开发人员也在专注于提高他们的 CSS3 技能,因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力.这 ...
- Cool！15个创意的 CSS3 文本效果【下篇】
这里文章收集了15个创意的 CSS3 文本效果,所有的都是精心挑选,这些可能会增加创意的火花到你的下一个项目.其中有些是用于特定用途,而另一些则适用于多种用途.如果你想要一个精彩而又充满色彩的文字效果 ...
- Android TextView走马灯效果
布局: <TextView android:id="@+id/myTextView" android:layout_width="match_parent" ...
- CSS3 动画效果带来的bug
css3 动画效果比如transition:all 2s linear;这种用来计算及时的物体坐标的话会带来一定的问题 比如把一个DIV从A点移动到B点.JS为DIV.style.left=B; 但是 ...
随机推荐
- P1114 “非常男女”计划
题意:给你一个01串,求满足0和1总数相等的最大字串 $n\ \le\ 10^5$ 1.$O(n^3)$枚举起点终点,统计判断是否成立 2.$O(n^2)$先$O(n)$时间计算01个数的前缀和, ...
- STP-6-快速生成树协议-新端口角色，状态和类型以及新链路类型
IEEE 802.1w快速生成树协议(RSTP)增强了802.1D标准,在设计合理的网络中收敛时间远少于1秒. 端口状态从5个减少到3个 丢弃状态是在端口刚启用时的默认状态,边界端口除外,它的 ...
- 2-32 while
do while
- Liunx 发送邮件
可以使用rpm -qa | grep mailx查看系统自带的mailx版本. 使用wget http://sourceforge.net/projects/heirloom/files/latest ...
- Kibana6.x.x源码分析--启动时basePath
每次启动Kibana时,发现URL都会随机的生成三位字母,比如:[http://localhost:5601/abc/][http://localhost:5601/dzf/]等等,那么这些随机的字符 ...
- ListItemType.AlternatingItem 和 ListItemType.Item
项目中后台绑定Reapter项时,判断 if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.Alte ...
- Angular组件生命周期——生命周期钩子
生命周期钩子介绍: 1.ngOnChange:响应组件输入值发生变化时触发的事件. 2.ngOnInit:用于数据绑定输入属性之后初始化组件,在第一次ngOnChange之后被调用. a. 组件构造后 ...
- SHA_1计算消息摘要
/** * SHA_1计算消息摘要 * @param bytes 待计算数据 * @return */ public static String SHA_1(byte[] bytes) { Strin ...
- Java8 流的使用示例
foreach遍历处理 dataList.stream().forEach(index -> sb.append(dataList.get(index) + "',")); ...
- SQL 行转列的两种做法
if object_id('tb')is not null drop table tbGocreate table tb(姓名 varchar(10),课程 varchar(10),分数 int)in ...