纯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 走马灯效果的更多相关文章

  1. 小程序 css3走马灯效果

    <view class='notable-container' style='background:#ffffff;'> <view style='z-index:2000;back ...

  2. vue 实现走马灯效果

    Part.1  问题 在写一个H5页面时遇到一个需求,头部公告需要滚动变换,需要实现一个走马灯效果 Part.2  实现 我的做法:利用 定时器 + CSS3 变换公告数组的顺序 从而实现走马灯效果 ...

  3. Bounce.js – 快速创建漂亮的 CSS3 动画效果

    Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代 ...

  4. Hover.css：一组超实用的 CSS3 悬停效果和动画

    Hover.css 是一套基于 CSS3 的鼠标悬停效果和动画,这些可以非常轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,必要的时候使用 before 和 after ...

  5. 10个实用的 CSS3 按钮效果制作教程

    人们往往喜欢那些有更多互动元素的网站,因此现在很多设计师专注于他们的 CSS3 技能.这是因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力.这里分享的10个优秀的 CSS3 按钮效果制作 ...

  6. 学习制作精美 CSS3 按钮效果的10个优秀教程

    由于互联网世界正在发生变化,人们往往喜欢那些有更多互动元素的网站,因此现在很多 Web 开发人员也在专注于提高他们的 CSS3 技能,因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力.这 ...

  7. Cool！15个创意的 CSS3 文本效果【下篇】

    这里文章收集了15个创意的 CSS3 文本效果,所有的都是精心挑选,这些可能会增加创意的火花到你的下一个项目.其中有些是用于特定用途,而另一些则适用于多种用途.如果你想要一个精彩而又充满色彩的文字效果 ...

  8. Android TextView走马灯效果

    布局: <TextView android:id="@+id/myTextView" android:layout_width="match_parent" ...

  9. CSS3 动画效果带来的bug

    css3 动画效果比如transition:all 2s linear;这种用来计算及时的物体坐标的话会带来一定的问题 比如把一个DIV从A点移动到B点.JS为DIV.style.left=B; 但是 ...

随机推荐

  1. P4094 [HEOI2016/TJOI2016]字符串 后缀数组+主席树+二分答案

    $ \color{#0066ff}{ 题目描述 }$ 佳媛姐姐过生日的时候,她的小伙伴从某东上买了一个生日礼物.生日礼物放在一个神奇的箱子中.箱子外边写了一个长为n的字符串s,和m个问题.佳媛姐姐必须 ...

  2. P1527 [国家集训队]矩阵乘法

    \(\color{#0066ff}{ 题目描述 }\) 给你一个N*N的矩阵,不用算矩阵乘法,但是每次询问一个子矩形的第K小数. \(\color{#0066ff}{输入格式}\) 第一行两个数N,Q ...

  3. 远程私有库的创建 pod 组件化

    参考:   http://www.cnblogs.com/hs-funky/p/6780203.html http://www.jianshu.com/p/4b63dfbd8be7 http://ww ...

  4. Pre- and Post-order Traversals（先序+后序序列，建立二叉树）

    PAT甲级1119,我先在CSDN上面发布的这篇文章:https://blog.csdn.net/weixin_44385565/article/details/89737224 Suppose th ...

  5. JQuery判断页面是否按下了Enter键

    $('#someTextBox').keypress(function(event){ var keycode = (event.keyCode ? event.keyCode : event.whi ...

  6. 用异或运算交换两个整数实现swap函数功能

    对于异或运算有这如下说明: 1^1=0 0^0=0 1^0=1 0^1=1 简单理解就是当两个书相同时结果为0,而两个数不同时异或的结果为1 可用于两个整数的交换,而不用去引入一个中间变量 #incl ...

  7. 8.11zju集训日记

    今天的比赛打得很不好,前一个小时的看的题目都非常难,没有做出题目,中期看到两道题,一道题是我读题,金大佬solo的,另外一道题是金大佬读题,写了代码但wa了,然后我和zz找bug,最后发现答案的范围是 ...

  8. 江西财经大学第一届程序设计竞赛 H

    链接:https://www.nowcoder.com/acm/contest/115/H来源:牛客网 题目描述 晚上,小P喜欢在寝室里一个个静静的学习或者思考,享受自由自在的单身生活. 他总是能从所 ...

  9. BeautifulSoup4模块的使用

    1. 安装 pip3 install beautifulsoup42. 使用 from bs4 import BeautifulSoup obj = BeautifulSoup("HTML内 ...

  10. 使用 maven 打包 src/test/java下的文件，并用 java jar 跑打包出来的jar

    https://blog.csdn.net/nba_2011/article/details/71296745