CSS动画及3D转换-Toy模板网

这篇具有很好参考价值的文章主要介绍了CSS动画及3D转换。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一.动画

（1）动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

（2）相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。

1.动画的基本使用

制作动画分为两步：

先定义动画
再使用（调用）动画

1.1用keyframes定义动画（类似定义类选择器）

@keyframes 动画名称 {
  0% {
    width: 200px;
  }
  100% {
    width:200px;
  }
}

1.2动画序列

（1）0%是动画的开始，100%是动画的完成。这样的规则就是动画序列。

（2）在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。

（3）动画是使元素从一种样式逐渐变化为另一种样式的效果，可以改变任意多的样式任意多的次数。

（4）请用百分比来规定变化发生的时间，或用关键词from和to，等同于0%和100%。

1.3元素使用动画

div {

  width:200px;

  height:200px;

  background-color:aqua;

  margin:100px auto;

  调用动画

  animation-name:动画名称；

  持续时间

  animation-duration:持续时间

}

2.动画常用属性

属性	描述
@keyframes	规定动画
animation	所有动画属性的简写属性，除了animation-play-state
animation-name	规定动画名称（必须的）
animation-duration	规定动画完成一个周期所花费的秒或毫秒，默认是0（必须的）
animation-timing-function	规定动画的速度曲线，默认是ease
animation-delay	规定动画何时开始，默认是0
animation-iteration-count	规定动画被播放的次数，默认是1，还有infinite
animation-direction	规定动画是否在下一周期逆向播放，默认是normal,alternate逆播放
animation-play-state	规定动画是否正在运行或暂停，默认是running,还有paused
animation-fill-mode	规定动画结束后状态，保持forwards回到起始backwards

3.动画简写属性

（1）animation ：动画名称持续时间运动曲线何时开始播放次数是否反方向动画起始或者结束状态。

animation：myfirst 5s linear 2s infinite alternate

动画名称持续时间一定要写

注意：

简写属性里面不包含 animation-play-state。
暂停动画: animation-play-state: puased; 经常和鼠标经过等其他配合使用。
想要动画走回来,而不是直接跳回来:animation-direction : alternate。
盒子动画结束后,停在结束位置: animation-fill-mode : forwards。

3.1大数据热点图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>大数据热点图</title>
    <style>
        body {
            background-color: #333;
        }
        .map {
            position: relative;
            width: 747px;
            height: 616px;
            background: url(media/map.png) no-repeat;
            margin: 0 auto;
        }
        .city {
            position: absolute;
            top: 227px;
            right: 193px;
            color: #fff;
        }
        .tb {
            top: 500px;
            right: 80px;
        }
        .dotted {
            width: 8px;
            height: 8px;
            background-color: #09f;
            border-radius: 50%;
        }
        .city div[class^="pulse"] {
            /* 保证我们小波纹在父盒子里面水平垂直居中  放大之后就会中心向四周发散 */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 8px;
            height: 8px;
            box-shadow: 0 0 12px #009dfd;
            border-radius: 50%;
            animation: pulse 1.2s linear infinite;
        }
        .city div.pulse2 {
            animation-delay: 0.4s;
        }
        .city div.pulse3 {
            animation-delay: 0.8s;
        }
        @keyframes pulse {
            0% {}
            70% {
                width: 40px;
                height: 40px;
                /* transform: scale(5);我们不要用scale 因为他会让 阴影变大 */
                opacity: 1;
            }
            100% {
                width: 70px;
                height: 70px;
                opacity: 0;
            }
        }
    </style>
</head>
<body>
    <div class="map">
        <div class="city">
            <div class="dotted"></div>
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
        <div class="city tb">
            <div class="dotted"></div>
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
    </div>
</body>
</html>

4.速度曲线细节

animation-timing-function：规定动画的曲线，默认是“ease”。

值	描述
linear	动画从头到尾的速度是相同的。匀速
ease	默认。动画从低速开始，然后加快，在结束前变慢
ease-in	动画以低俗开始
ease-out	动画以低俗结束
ease-in-out	动画以低俗开始和结束
steps（）	指定了时间函数中的间隔数量（步长）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            overflow: hidden;
            font-size: 20px;
            width: 0;
            height: 30px;
            background-color: pink;
            /* 让我们的文字强制一行内显示 */
            white-space: nowrap;
            /* steps就是分几步来完成我们的动画  有了steps 就不要在写ease  或者 linear了 */
            animation: w 4s steps(10) forwards;
        }
        @keyframes w {
            0% {
                width: 0;
            }
            100% {
                width: 200px;
            }
        }
    </style>
</head>
<body>
    <div>
        世纪佳缘我在这里等你 </div>
</body>
</html>

4.1案例:奔跑的熊大

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例</title>
    <style>
        body {
            background-color: #ccc;
        }
        div {
            position: absolute;
            width: 200px;
            height: 100px;
            background: url(media/bear.png) no-repeat;
            /* 我们元素可以添加多个动画，用逗号分隔 */
            animation: bear 1s steps(8) infinite, move 3s forwards;
        }
        @keyframes bear {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: -1600px 0;
            }
        }
        @keyframes move {
            0% {
                left: 0;
            }
            100% {
                left: 50%;
                /* margin-left: -100px; */
                transform: translate(-50%);
            }
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

二.CSS 3D转换

我们生活的环境是3D的，照片是3D物体在2D平面呈现的例子。

特点：

近大远小
物体后面遮挡不可见

1.三维坐标系

X轴：水平向右注意：X右边是正值，左边是负值
Y轴：垂直向下注意：Y下面是正值，上面是负值
Z轴：垂直屏幕注意：往外面是正值，往里面是负值

2. 3D移动 translate3d

3D移动在2D移动的基础上多加了一个可以移动的方向，就是z轴方向。

translform:translateX(1080px) :仅仅是在x轴上移动。

translform:translateY(100px) : 仅仅是在Y轴上移动。

transIform:translateZ(1080px): 仅仅是在Z轴上移动(注意:translateZ一般用px单位)。

transform:translate3d(x,y,z) : 其中x、y、z分别指要移动的轴的方向的距离。

3.透视 perspective

（1）在2D平面产生近大远小视觉立体，但是只是效果二维的。

（2）如果想要在网页产生3D效果需要透视(理解成3D物体投影在2D平面内)。

（3）模拟人类的视觉位置，可认为安排一只眼睛去看。

（4）透视我们也称为视距：视距就是人的眼睛到屏幕的距离。

（5）距离视觉点越近的在电脑平面成像越大，越远成像越小（近大远小）。

（6）透视的单位是像素。

（7）透视写在被观察元素的父盒子上面的。

d：就是视距，视距就是一个距离人的眼睛到屏幕的距离。
z：就是z轴，物体距离屏幕的距离，z轴越大(正值) 我们看到的物体就越大。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            /* 透视写到被观察元素的父盒子上面 */
            perspective: 200px;
        }
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* transform: translateX(100px);
            transform: translateY(100px); */
            /* transform: translateX(100px) translateY(100px) translateZ(100px); */
            /* 1.translateZ 沿着z轴移动 */
            /* 2.translateZ 后面的单位我们一般跟px */
            /* 3.translateZ(100px) 向外移动100px(向我们的眼睛来移动的) */
            /* 4.3D  移动有简写的方法 */
            /* transform:translate3d(x,y,z); */
            /* transform: translate3d(100px, 100px, 100px); */
            /* 5.xyz是不能省略的，如果没有就写0 */
            transform: translate3d(400px, 100px, 100px);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

4.translate Z

translform:translateZ(100px) : 仅仅是在Z轴上移动。有了透视，就能看到translateZ引起的变化了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            perspective: 500px;
        }
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            transform: translateZ(0);
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

5. 3D旋转 rotate3d

3D旋转指可以让元素在三维平面内沿着x轴， y轴，z轴或者自定义轴进行旋转。

语法：

transform:rotateX(45deg):沿着x轴正方向旋转45度。

transform:rotateY(45deg) :沿看y轴正方向旋转45deg。

transform:rotateZ(45deg):沿着Z轴正方向旋转45deg。

transform:rotate3d(x,y,z, deg): 沿看自定义轴旋转deg为角度(了解即可)。

对于元素旋转的方向的判断我们需要先学习一个左手准则。

5.1左手准则

左手的手拇指指向x轴的正方向。
其余手指的弯曲方向就是该元素沿着x轴旋转的方向。
左手的手拇指指向y轴的正方向。
其余手指的弯曲方向就是该元素沿着y轴旋转的方向(正值)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            perspective: 500px;
        }
        img {
            display: block;
            margin: 100px auto;
            transition: all 1s;
        }
        img:hover {
            transform: rotateY(45deg);
        }
        img:hover {
            /* transform: rotateZ(180deg); */
            /* transform: rotate3d(x,,y,z,deg); */
            /* transform: rotate3d(1, 0, 0, 45deg); */
            /* transform: rotate3d(0, 1, 0, 45deg); */
            transform: rotate3d(1, 1, 0, 45deg);
        }
    </style>
</head>
<body>
    <img src="media/pig.jpg" alt="">
</body>
</html>

6. 3D呈现 transfrom-style

控制子元素是否开启三维立体环境。

transform-style:flat 子元素不开启3d立体空间 默认的。

transform-style:preserve-3d;子元素开启立体空间。

代码写给父级，但是影响的是子盒子。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            perspective: 500px;
        }
        .box {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            transition: all 2s;
            /* 让子元素保持3d立体空间环境 */
            transform-style: preserve-3d;
        }
        .box:hover {
            transform: rotateY(60deg);
        }
        .box div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: pink;
        }
        .box div:last-child {
            background-color: purple;
            transform: rotateX(60deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <div></div>
        <div></div>
    </div>
</body>
</html>

三.案例练习

1.两面翻转的盒子

（1）搭建HTML结构

box父盒子里面包含前后两个子盒子。
box是翻转的盒子 front是前面盒子 back是后面盒子。

（2）CSS样式

box指定大小，切记要添加3d呈现。
back盒子要沿着Y轴翻转180度。
最后鼠标经过box沿着Y旋转180deg。文章来源地址https://www.toymoban.com/news/detail-829698.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            perspective: 400px;
        }
        .box {
            position: relative;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            transition: all .4s;
            /* 让背面的紫色盒子保留立体空间  给父级添加的*/
            transform-style: preserve-3d;
        }
        .box:hover {
            transform: rotateY(180deg);
        }
        .front,
        .back {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            font-size: 30px;
            color: #fff;
            text-align: center;
            line-height: 300px;
        }
        .front {
            background-color: pink;
            z-index: 1;
            /* CSS 属性 backface-visibility 指定当元素背面朝向观察者时是否可见。 */
            backface-visibility: hidden;
        }
        .back {
            background-color: purple;
            /* 像手机一样背靠背旋转 */
            transform: rotateY(180deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="front">黑马程序员</div>
        <div class="back">pink老师这里等你</div>
    </div>
</body>
</html>

2. 3D导航栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            margin: 100px;
        }
        ul li {
            float: left;
            margin: 0 5px;
            width: 120px;
            height: 35px;
            list-style: none;
            /* 一会我们需要给box旋转  也需要透视 干脆给li加 里面的子盒子都有透视效果 */
            perspective: 500px;
        }
        .box {
            position: relative;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            transition: all .4s;
        }
        .box:hover {
            transform: rotateX(90deg);
        }
        .front,
        .bottom {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }
        .front {
            background-color: pink;
            z-index: 1;
            transform: translateZ(17.5px);
        }
        .bottom {
            background-color: purple;
            /* 这个x轴一定是负值 */
            /* 我们如果有移动  或者其他样式，必须先写我们的移动 */
            transform: translateY(17.5px) rotateX(-90deg);
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <div class="box">
                <div class="front">黑马程序员</div>
                <div class="bottom">pink老师等你</div>
            </div>
        </li>
        <li>
            <div class="box">
                <div class="front">黑马程序员</div>
                <div class="bottom">pink老师等你</div>
            </div>
        </li>
        <li>
            <div class="box">
                <div class="front">黑马程序员</div>
                <div class="bottom">pink老师等你</div>
            </div>
        </li>
        <li>
            <div class="box">
                <div class="front">黑马程序员</div>
                <div class="bottom">pink老师等你</div>
            </div>
        </li>
    </ul>
</body>
</html>

3.综合案例-旋转木马

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            perspective: 1000px;
        }
        section {
            position: relative;
            width: 300px;
            height: 200px;
            margin: 150px auto;
            transform-style: preserve-3d;
            /* 添加动画效果 */
            animation: rotate 3s linear infinite;
            background: url(media/pig.jpg) no-repeat;
        }
        section:hover {
            /* 鼠标放入section停止动画 */
            animation-play-state: paused;
        }
        @keyframes rotate {
            0% {
                transform: rotateY(0);
            }
            100% {
                transform: rotateY(360deg);
            }
        }
        section div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url(media/dog.jpg) no-repeat;
        }
        section div:nth-child(1) {
            transform: rotateY(0) translateZ(300px);
        }
        section div:nth-child(2) {
            /* 先旋转好了，再移动距离 */
            transform: rotateY(60deg) translateZ(300px);
        }
        section div:nth-child(3) {
            /* 先旋转好了，再移动距离 */
            transform: rotateY(120deg) translateZ(300px);
        }
        section div:nth-child(4) {
            /* 先旋转好了，再移动距离 */
            transform: rotateY(180deg) translateZ(300px);
        }
        section div:nth-child(5) {
            /* 先旋转好了，再移动距离 */
            transform: rotateY(240deg) translateZ(300px);
        }
        section div:nth-child(6) {
            /* 先旋转好了，再移动距离 */
            transform: rotateY(300deg) translateZ(300px);
        }
    </style>
</head>
<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </section>
</body>
</html>

到了这里，关于CSS动画及3D转换的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！