当前位置：Gxlcms > css > 用css3实现走马灯的效果

用css3实现走马灯的效果

时间：2021-07-01 10:21:17 帮助过：49人阅读

这篇文章主要介绍了纯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场景、一个走马灯的旋转面和走马灯的六个面：

  1. <p class="wapper">        <!--场景-->
  2.     <p class="rotate">   <!--容器-->
  3.         <p class="item itemOne">1</p>  <!--六个面-->
  4.         <p class="item itemTwo">2</p>
  5.         <p class="item itemThree">3</p>
  6.         <p class="item itemFour">4</p>
  7.         <p class="item itemFive">5</p>
  8.         <p class="item itemSix">6</p>
  9.     </p>        
  10. </p>

设置3D场景：

  1. .wapper{
  2.     -webkit-perspective:800;    /*观察距离800*/
  3.     -webkit-perspective-origin:50% -100%;    /*从正前方上方斜向下观察*/
  4.     width:400px;
  5.     height:300px;
  6.     margin:100px auto;
  7. }

设置旋转面：

  1. @-webkit-keyframes rotation{      /*动画过程*/
  2.     0%{-webkit-transform:rotateY(0deg);}    
  3.     100%{-webkit-transform:rotateY(-360deg);}
  4. }
  5. .rotate{
  6.     -webkit-transform-style:preserve-3d;     /*3D变换*/
  7.     -webkit-animation: rotation 6s infinite;  /*动画名称、时间、循环动画*/
  8.     -webkit-animation-timing-function: linear;  /*匀速动画*/
  9.     -webkit-transform-origin:center;      /*沿中间旋转*/
  10.     width:100%;
  11.     height:100%;
  12.     position:relative;   /*相对定位布局*/
  13. }

对六个面除了位置之外的通用样式做设置：

  1. .item{
  2.    -webkit-transform-origin:center;  /*均沿中心旋转*/
  3.    width:198px;
  4.    height:300px;
  5.    position:absolute;   /*绝对定位在旋转面上*/
  6.    background:none;
  7.    text-align:center;
  8.    line-height:300px;
  9. }

分别设置六个面的位置，以一号为例（上面结构图中红框下面左边绿色线标注的面），所有的数值均需要经过几何计算得来：

  1. .itemOne{
  2.     left:-50px;
  3.     -webkit-transform:translateZ(87px) rotateY(-60deg);  /*z轴向外移动87px，沿Y轴方向旋转-60°*/
  4.     background:#f00;
  5. }

在鼠标悬浮在该结构上时动画停止：

  1. .rotate:hover{
  2.     -webkit-animation-play-state:paused;  /*设置动画状态*/
  3. }

本例子只有在webkit内核的浏览器中可以查看效果，如需兼容其他现代浏览器，需添加 -moz- 等前缀，完整代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Animation Test</title>
  6.     <style>
  7.     *{margin:0;padding:0;}
  8.     @-webkit-keyframes rotation{    
  9.         0%{-webkit-transform:rotateY(0deg);}    
  10.         100%{-webkit-transform:rotateY(-360deg);}
  11.     }
  12.     .wapper{
  13.         -webkit-perspective:800;
  14.         -webkit-perspective-origin:50% -100%;
  15.         width:400px;
  16.         height:300px;
  17.         margin:100px auto;
  18.     }
  19.     .rotate{
  20.         -webkit-transform-style:preserve-3d;
  21.         -webkit-animation: rotation 6s infinite;
  22.         -webkit-animation-timing-function: linear;
  23.         -webkit-transform-origin:center;
  24.         width:100%;
  25.         height:100%;
  26.         position:relative;
  27.     }
  28.     .item{
  29.         -webkit-transform-origin:center;
  30.         width:198px;
  31.         height:300px;
  32.         position:absolute;
  33.         background:none;
  34.         text-align:center;
  35.         line-height:300px;
  36.     }
  37.     .itemOne{
  38.         left:-50px;
  39.         -webkit-transform:translateZ(87px) rotateY(-60deg);
  40.         background:#f00;
  41.     }
  42.     .itemTwo{
  43.         left:100px;
  44.         -webkit-transform:translateZ(173px);
  45.         background:#ff0;
  46.     }
  47.     .itemThree{
  48.         left:250px;
  49.         -webkit-transform:translateZ(87px) rotateY(60deg);
  50.         background:#0ff;        
  51.     }
  52.     .itemFour{
  53.         left:250px;
  54.         -webkit-transform:translateZ(-87px) rotateY(120deg);    
  55.         background:#0f0;
  56.     }
  57.     .itemFive{
  58.         left:100px;
  59.         -webkit-transform:translateZ(-173px) rotateY(180deg);
  60.         background:#0ff;
  61.     }
  62.     .itemSix{
  63.         left:-50px;
  64.         -webkit-transform:translateZ(-87px) rotateY(-120deg);
  65.         background:#00f;
  66.     }
  67.     .rotate:hover{
  68.         -webkit-animation-play-state:paused;
  69.     }
  70.     </style>
  71. </head>
  72. <body>
  73.     <p class="wapper">
  74.         <p class="rotate">
  75.             <p class="item itemOne">1</p>
  76.             <p class="item itemTwo">2</p>
  77.             <p class="item itemThree">3</p>
  78.             <p class="item itemFour">4</p>
  79.             <p class="item itemFive">5</p>
  80.             <p class="item itemSix">6</p>
  81.         </p>        
  82.     </p>
  83. </body>
  84. </html>

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

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

如何使用CSS3制作炫酷带方向感应的鼠标滑过图片3D动画

以上就是用css3实现走马灯的效果的详细内容，更多请关注Gxl网其它相关文章！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！