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; 但是 ...
随机推荐
- Luogu1829 JZPTAB
JZPTAB 求\(\sum_{i=1}^n\sum_{j=1}^mlcm(i,j)\) \(=\sum_{i=1}^n\sum_{j=1}^m\frac{ij}{\gcd(i,j)}\) 枚举gcd ...
- linux惊群
基本概念:子进程继承父进程环境和上下文的大部分内容的拷贝,其中就包括文件描述符表. 父进程fork出来的子进程,复制父进程的文件描述符.这些文件描述符fd是独立的,但是文件描述符指向的系统文件表项是唯 ...
- 前三次OO作业总结
一.作业总结 前三次的任务都是表达式求导.这是我在高中就思考过的问题,但是很久都没有付诸实践,直到学习了"类"这个强大的工具.还有正则表达式,如果能适当使用,则不失为一个字符串格式 ...
- Please tell me who you are. Run git config --global user.email "you@example.com" git config --global user.name "Your Name"
解决办法
- linux中脚本权限问题以及win下使用telnet测试linux端口
一个脚本叫up,执行脚本报错如下: -bash: ./up: Permission denied 解决: chmod +rx up 在执行,OK了. /************************ ...
- C语言ctype.h字符函数和字符串
ctype.h存的是与字符相关的函数: 这些函数虽然不能处理整个字符串,但是可以处理字符串中的字符: ToUpper()函数,利用toupper()函数处理字符串中的每个字符,转换成大写: Punct ...
- P5019 铺设道路 (NOIP2018)
传送门 NOIP2013原题 貌似官方数据都是一模一样的 以前写过竟然毫无印象? 考场上自己瞎JB推结论 显然,如果连续的两端区间可以左边区间减 k 次,右边区间也减 k 次 那么把两个区间合并起来一 ...
- Java 字节流和字符流
程序中都是以流的形式进行数据的传输和保存,在java.io包中数据流操作的两大类是字节流和字符流. 1. 字节流 InputStream和OutputStream是所有表示字节流的类的父类,它们都是抽 ...
- Vi编辑器和Vim编辑器的区别及联系
Vi和Vim它们都是多模式编辑器,不同的是vim 是vi的升级版本,它不仅兼容vi的所有指令,而且还有一些新的特性在里面,vi使用于文本编辑,但是vim更适用于coding.vim的这些优势主要体现在 ...
- 技巧：开启ubuntu系统桌面上的右键进入terminal命令行控制台功能
$ sudo apt-get install nautilus-open-terminal 执行上述命令,重启. 重启命令: $ sudo reboot 注意:需要联网