纯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. 2019.2.25考试T1， 矩阵快速幂加速递推+单位根反演（容斥）

    \(\color{#0066ff}{题解}\) 然后a,b,c通过矩阵加速即可 为什么1出现偶数次3没出现的贡献是上面画绿线的部分呢? 考虑暴力统计这部分贡献,答案为\(\begin{aligned} ...

  2. angularJs条件查询:

    首先需要建立一个输入框进行数据绑定: <div class="box-tools pull-right"> <div class="has-feedba ...

  3. ssh-keygen生成公私钥免密码登录远程服务器

    1.终端输入命令:ssh-keygen -t rsa ssh-keygen命令专门是用来生成密钥的.该命令有很多选项,这里列出了最基本的四个: -t 用来指定密钥类型(dsa | ecdsa | ed ...

  4. poj2002 数正方形 （哈希+几何）

    题目传送门 题目大意:给你一堆点,问你能组成几个正方形. 思路:一开始想的是用对角线的长度来当哈希的key,但判断正方形会太复杂,然后就去找了一下正方形的判断方法,发现 已知: (x1,y1) (x2 ...

  5. Go语言基础之12--Channel

    一.不同goroutine之间如何进行通讯? 1.全局变量和锁同步 缺点:多个goroutine要通信时,定义太多的全局变量(每个全局变量功能不一样),不好维护 2.Channel 二.channel ...

  6. shell脚本：Ctrl+C终止的是哪个进程

    aa.sh中的内容如下图: 运行sh aa.sh, 显示aa.txt后面几行, 此时开启了两个进程:一个sh运行,一个tail -f运行 按Ctrl+C 会终止此sh进程, 父进程死了,里面的tail ...

  7. 时间复杂度——cin加速器

    static auto _=[]() { ios::sync_with_stdio(false); cin.tie(); ; }(); 代码简析:   cin,cout效率低是因为他们要将输入输出的数 ...

  8. 2.1 Rust概念

    标识符 The first character is a letter.The remaining characters are alphanumeric or _.或The first charac ...

  9. my07_lock-tables与single-transaction的区别

    概念描述 ************************************************************ mysqldump进行逻辑备份时(innodb),为保证事务的一致性 ...

  10. 关于element-ui表格样式设置的方法cell-class-name

    关于element-ui表格使用的一些方法 最近在用Vue.js和elment-ui做一个后台管理项目,不得不说element功能非常强大,提供了许多组件,基本可以满足一些基础的开发了.因为我做的后台 ...