您现在的位置是：网站首页> 编程资料编程资料

纯css3实现走马灯效果css3中transform属性实现的4种功能详解CSS3.0(Cascading Style Sheet) 层叠级联样式表纯CSS3实现div按照顺序出入效果CSS3实现列表无限滚动/轮播效果css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效CSS3实现的侧滑菜单CSS3实现的3D隧道效果用CSS3画一个爱心css3 实现文字闪烁效果的三种方式示例代码六种css3实现的边框过渡效果

2021-09-05 1166人已围观

简介这篇文章主要介绍了纯css3实现走马灯效果，主要用到的css3技术有：keyframes、perspective、perspective-origin、transform（translate、rotate）、animation、transform-origin，有需要的小伙伴参考下

纯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场景、一个走马灯的旋转面和走马灯的六个面：

复制代码

代码如下:

设置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- 等前缀，完整代码如下：

复制代码

代码如下:

Animation Test

是不是很炫酷的效果呢，小伙伴们，CSS3真是个好东西，你值得拥有。

上一篇：CSS3实现的炫酷菜单代码分享基于jquery+css3的固定的网页底部的炫酷工具条使用简单的CSS3属性实现炫酷读者墙效果一款既炫酷又实用的jQuery+CSS3多张图片选择动画特效5种CSS3炫酷效果的自定义Checkbox特效代码CSS3与SVG实现文字背景动画炫酷特效源码纯CSS3实现炫酷卡通人物面部表情动画效果源码CSS3+SVG实现的炫酷发光特效进度条Loading动画源码

下一篇：纯css3实现照片墙效果纯css实现照片墙3D效果的示例代码CSS3制作漂亮的照片墙的实现代码CSS3制作精致的照片墙特效CSS3实现漂亮的照片墙效果的简单实例(推荐)CSS3实现鼠标悬停照片墙放大特效源码CSS3简单实现照片墙CSS3实现的悬挂照片墙效果源码jquery+css3实现非常大气的瀑布流照片墙特效利用css制作3D照片墙效果

您现在的位置是：网站首页> 编程资料编程资料

相关内容

点击排行

本栏推荐

猜你喜欢