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; 但是 ...
随机推荐
- [USACO06NOV]糟糕的一天Bad Hair Day BZOJ 1660 单调栈
农民John的某 N 头奶牛 (1 <= N <= 80,000) 正在过乱头发节!由于每头牛都 意识到自己凌乱不堪的发型, FJ 希望统计出能够看到其他牛的头发的牛的数量. 每一头牛 i ...
- MySQL安全优化
一.数据库相关 1. MySQL版本的选择 在正式生产环境中,建议使用5.6或以上系列的版本(5.7不建议,曾经用过这个版本,问题有点多). 2. 运行用户与端口的配置 2.1.确保MySQL运行用户 ...
- C#面试题-递归
有一组数1.1.2.3.5.8.13.21.34...,求第n个数是多少? public int Recursion (int n){ ){ ; } &&n<=){ ; } )+ ...
- AngularJs 中使用OpenLayer例子,手机端地图加载不显示问题
var map, toolip, overlay; var layer = new ol.layer.Vector(); var imgLayer = ...
- python 基础及if while for语句
#####变量######一.命名规则 1.正常命名 可以由字母,下划线和数字组成,不能以数字开头,不能和关键字重明 2.驼峰命名法 1)大驼峰:每一个单词的首字母都大写 Fi ...
- Python 初识爬虫-**机场出港业务
# -*- coding:utf-8 -*- from lxml import etree import requests ##先进单页测试,然后在进行多页循环 没有解决的问题,动态解决最大页数,目前 ...
- jinkens 'python' 不是内部或外部命令，也不是可运行的程序 或批处理文件。
jinkens执行构建时报错 解决方法,就是指定路径.python的安装目录和被执行文件的的目录
- java中所有开源注解收集
@resource: resource全名为@Resource ,用来激活一个命名资源(namedresource)的依赖注入,在JavaEE应用程序中,该注解被典型地转换为绑定于JNDI conte ...
- hive支持事务及单行操作 update delete
测试环境 Hive 1.2.1000.2.6.0.3-8 set hive.support.concurrency=true; set hive.exec.dynamic.partition.mod ...
- 报错：The valid characters are defined in RFC 7230 and RFC 3986
访问 spring boot controller时,报错:The valid characters are defined in RFC 7230 and RFC 3986 1.特殊符号 @Spri ...