css3 走马灯效果

纯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;    /*观察距离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>
时间: 2024-10-20 09:22:59

css3 走马灯效果的相关文章

android:TextView实现文字走马灯效果(欺骗系统获取持久的焦点)

通常情况下我们想实现文字的走马灯效果需要在xml文件中这样设置 <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:singleLine="true" android:ellipsize="marquee" android:focusable="true" android:

CSS3 动画效果带来的bug

css3 动画效果比如transition:all 2s linear;这种用来计算及时的物体坐标的话会带来一定的问题 比如把一个DIV从A点移动到B点.JS为DIV.style.left=B; 但是当我们使用上面的transition属性后,A点移动到B点是2秒内完成的,当执行JS代码时候,DIV还没到应该的位置,那么,在Div.style.left=B; console.log(Div.offsetLeft); 这样console出来的是起点坐标而不是终点坐标. 即使你让其JS线程主动挂起使

Jquery 图片走马灯效果原理

本篇只讲解水平走马灯效果,垂直向上走马灯效果不讲解,原理一样,但是水平走马灯效果有一个小坑.待会讲解 照例先上代码: HTML: <div class="box"> <div style="width: 1000px;" id="boxdiv"> <ul> <li style="display: block;" title="清灵少女宛如梦境仙女"><a

css3 动画效果

css3 动画效果  做css3的动画效果,w3c的文档的文档已有事例.动画事例,也是看了半天才搞出来. 下面我就是结合个人理解进行介绍.最后个人做的一个动画demo css3的动画事例主要需要理解animation:可以算是动画的声明部分.你可以把动画属性的内容全部写到后边,动画的属性主要有:animation-name animation-duration还有一些动画延时,动画播放次数.这些要根据动画效果进行添加. 格式有:animation:animation-name animation

纯CSS3文字效果推荐

之前曾经研究过几个纯css实现的文字效果,<CSS文字条纹阴影动画>和<响应式奶油立体字效果>等,今天我们来研究几款文字效果,主要利用text-shadow.webkit内核的几个独有特性实现效果. 在线研究单击这里,下载收藏单击这里. 效果1-立体字效果 我们的html文件貌似这样,为了更好的展示效果,我们加上了可编辑属性. <div contenteditable="true" class="text effect01">前端

css3 过度效果之物体向上冒出

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>无标题文档</title> <link type="text/css" hr

CSS3文本效果

CSS3文本效果实例1: 文本阴影: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>CSS3 文本阴影</title> <style> h1{text-shadow: 5px 5px 5px #FF0000;} </style> </head> <body> <h1>文本阴影效果

css3毛玻璃效果白边问题

注:css3毛玻璃效果应该很多人都知道怎么实现,但是有个问题是图片模糊了之后相当于缩小了,所以颜色深的图片会出现白边,这里说下我参考网上的解决方式吧! 1.毛玻璃实现方法: CSS3 blur滤镜实现如下测试代码: .blur { -webkit-filter: blur(10px); /* Chrome, Opera */ -moz-filter: blur(10px); -ms-filter: blur(10px); filter: blur(10px); } 相关HTML代码如下: <im

第八十三节,CSS3动画效果

CSS3动画效果 学习要点: 1.动画简介 2.属性详解 3.简写和版本 本章主要探讨HTML5中CSS3的动画效果,可以通过类 Flash那样的关键帧模式控制运行. 一.动画简介     CSS3提供了类 Flash关键帧控制的动画效果,通过animation属性实现.     animation实现动画效果主要由两个部分组成:     1.通过类 Flash动画中的关键帧声明一个动画:     2.在animation属性中调用关键帧声明的动画.     CSS3提供的animation是一