纯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. P3398 仓鼠找sugar 树上路径相交判断

    \(\color{#0066ff}{题目描述}\) 小仓鼠的和他的基(mei)友(zi)sugar住在地下洞穴中,每个节点的编号为1~n.地下洞穴是一个树形结构.这一天小仓鼠打算从从他的卧室(a)到餐 ...

  2. luogu2257 YY的GCD--莫比乌斯反演

    link 给定N, M,求1<=x<=N, 1<=y<=M且gcd(x, y)为质数的(x, y)有多少对 多组数据T = 10000 N, M <= 10000000 ...

  3. CoreData 数据库

    封装CoreManager类 @implementation CoreDataManager { //上下文 NSManagedObjectContext *_ctx; } //单例 +(instan ...

  4. Xshell连接不上Ubuntu解决方式

    1—— 首先检查一下自己的网络是否正常,如果是插上网线就能用的,就很好:如果是校园网拨号方式上网的,请检查自己是否建立拨号连接. [编辑连接] [添加] PPPOE上网方式选择[DSL]   2—— ...

  5. TensorFlow入门测试程序

    import tensorflow as tf from tensorflow.examples.tutorials.mnist import input_data mnist=input_data. ...

  6. 在Pycharm上编写WordCount程序

    本篇博客将给大家介绍怎么在PyCharm上编写运行WordCount程序. 第一步 下载安装PyCharm 下载Pycharm PyCharm的下载地址(Linux版本).下载完成后你将得到一个名叫: ...

  7. python3 发送QQ邮件

    from email.header import Headerfrom email.mime.text import MIMETextfrom smtplib import SMTP_SSL emai ...

  8. shell 获取hive表结构

    hive -S -e "select * from db_name.table_name limit 0"|grep table_name|xargs -n1|sed 's/tab ...

  9. 22-----BBS论坛

    BBS论坛(二十二) 22.1.七牛js上传轮播图图片 (1)common/zlqiniu.js 'use strict'; var zlqiniu = { 'setup': function (ar ...

  10. java——抽象类、接口、二者区别

    抽象类: 抽象方法:不包含方法体的方法为抽象方法,抽象方法必须使用abstract关键字来修饰: abstract void method(); 抽象类:当一个类中包含了抽象方法时,该类必须使用abs ...