2.css动画(空间转换,动画)

风无雨

已于 2022-07-18 21:26:44 修改

阅读量367

点赞数 2

分类专栏： # css 文章标签： css 前端

于 2022-07-18 20:03:57 首次发布

本文链接：https://blog.csdn.net/wusandaofwy/article/details/125857905

版权

css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1空间转换

使用transform属性实现元素在空间内的位移、旋转、缩放等效果

空间：是从坐标轴角度定义的。x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。

空间转换也叫3D转换

1.1空间位移

使用translate实现元素空间位移效果

1.1.1translatez轴

/* 3d变换连写 transform: translate3d(x轴,y轴,z轴) */transform: translateZ(400px)

1.1.2perspective(透视)属性

使用perspective属性实现透视效果

transform: translateZ(400px);看不到z轴的变化情况,因为大小不变看不出变化;

通过给父级加perspective(透视)属性

(取值推荐800-1200透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。)

,实现近大远小,近实远虚的效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*  transform: translateZ(400px);看不到z轴的变化情况,因为大小不变看不出变化;
        通过给父级加perspective(透视)属性
        (取值推荐800-1200透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。)
        ,实现近大远小,近实远虚的效果 */
        body {
            perspective: 800px;
        }

        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
            transition: all .8s;
            margin: 200px auto;
        }

        .box:hover {
            transform: translate3d(400px, 200px, 200px);
            /* 3d变换连写 transform: translate3d(x轴,y轴,z轴) */
        }
    </style>
</head>

<body>
    <div class="box">

    </div>
</body>

</html>

1.2空间旋转

3d空间旋转

transform: rotate3d(x, y, z, 角度度数):用来设置自定义旋转轴的位置及旋转的角度;

x，y，z 取值为0-1之间的数字

角度单位是:deg,turn

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            /* background-color: pink; */
            margin: 200px auto;
        }
        .box img {
            width: 100%;
            transition: all .8s;
            height: 100%;
        }

        .box:hover img{
            /* transform: rotatex(180deg ); */
            /* x轴,正值从上往下翻 */
            /* transform: rotatey(360deg ); */
            /* y轴,正值从左往右翻 */
            /* transform: rotatez(180deg ); */
            /* z轴,正值从顺时针转圈 */
            transform: rotate3d(1,1,1,1turn)

            /* 3d空间旋转 transform: rotate3d(x, y, z, 角度度数):用来设置自定义旋转轴的位置及旋转的角度;
            x，y，z 取值为0-1之间的数字
            角度单位是:deg,turn*/
        }
    </style>
</head>

<body>
    <div class="box">
<img src="../images/heart.png" alt="">
    </div>
</body>

</html>

1.3立体呈现(transform-style: preserve-3d)

由于perspective透视属性不能呈现立体图形，perspective只增加近大远小、近实远虚的视觉效果。

所以我们对子元素的父元素使用transform-style: preserve-3d; 使子元素处于真正的3d空间.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            position: relative;
            transform-style: preserve-3d;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            background-color: aqua;
            transition: all .9s;
        }

        .box:hover {
            transform: rotatey(0.5turn);
        }

        .one,
        .two {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: red;
            transform: translateZ(100px);

        }

        .two {
            background-color: pink;
            transform: translateZ(-100px);

        }
    </style>
</head>

<body>
    <div class="box">
        <div class="one">
            前面
        </div>
        <div class="two">
            后面
        </div>
    </div>
</body>

</html>

1.4立体按钮

鼠标移动到'首页'时,上方的index旋转至正面,实现代码如下.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        a {
            text-decoration: none;
            color: #fff;
        }

        .box {
            width: 800px;
            height: 50px;
            margin: 100px auto;
        }

        .box li {
            perspective:800px;
            width: 120px;
            height: 50px;
            float: left;
            margin-right: 50px;
        }

        .box li a {
            /* 开启3d */
            transform-style: preserve-3d;
            position: relative;
            display: block;
            width: 100%;
            height: 100%;
            /* background-color: pink; */
            transition: all .9s;
        }

        .box li a:hover {
            transform: rotateX(-90deg);
        }


        .box li span {
            position: absolute;
            left: 0;
            top: 0;
            display: block;
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 50px;
        }

        .box li span:first-child {
            transform:translatey(-25px) rotateX(90deg) ;
            background-color: yellowgreen;

        }

        .box li span:last-child {
            background-color: blue;
            transform: translateZ(25px);
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li>
                <a href="#">
                    <span>index</span>
                    <span>首页</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span>login</span>
                    <span>登录</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span>register</span>
                    <span>注册</span>
                </a>
            </li>

        </ul>
    </div>
</body>

</html>

注意:包含'index'的span需要先y轴上升高盒子高度的一半(25px),然后再绕x轴转90度;

 .box li span:first-child {
            transform:translatey(-25px) rotateX(90deg) ;
            background-color: yellowgreen;
        }

1.5 3d缩放 scale

正常情况下z轴正对我们的方向,即使z轴的高放大我们也无法看到,

所以通过 perspective的近大远小效果,来看到z轴的高的放大,盒子向内转90度后,盒子的z轴高度就能被我们看到.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            perspective: 800px;
            /* 透视默认中心点在盒子中间,所以以后记得把盒子居中 */
        }

        .box {
            width: 400px;
            height: 400px;
            background-color: pink;
            margin: 200px auto;
            transition: all .9s;
        }

        .box:hover {
            /* transform: scalex(2); */
            /* scalx,放大的是宽 */
            /* transform: scaley(2); */
            /* scaly,放大的是高 */
            transform: scalez(200) rotatex(90deg);
                /* scalz,放大的是高 */

        }
    </style>
</head>

<body>
    <div class="box">

    </div>
</body>

</html>

2.动画animation

过渡与动画的区别?

1.过渡实现的是2个状态间的变化过程,而动画可以实现多个状态间的变化过程.,且动画过程可控（重复播放、最终画面、是否暂停）

2.过渡通常要与伪类选择器:hover搭配使用,而动画不必要

2.1 实现动画的步骤

2.1.1 定义一个动画 @keyframes 动画名{}

   @keyframes run {
            100%{
                background-position: -1680px 0;
            }

2.1.1.1定义动画第一种方式

   @keyframes move{
            from{
                transform: translate(0, 0);
            }
            to{
                transform: translate(1000px, 0);
            }
        }

2.1.1.2定义动画第二种方式

  @keyframes run {
            0%{
                background-position: 0 0; 
            }
            100%{
                background-position: -1680px 0;
            }
        }

注意:

1.0%到100%之间可以写多个值,如0%,25%,50%,75%,100%

2.如果from或者0%的盒子位置状态不发生变化可以省略,如:

  @keyframes run {
            100%{
                background-position: -1680px 0;
            }
        }

2.1.2 调用动画 animation: 动画名动画花费时长

            animation: run 2s infinite alternate linear;

2.1.3 animation的连写方式:

2.1.4 animation的部分属性和属性值:

2.2 逐帧动画

使用steps实现逐帧动画
逐帧动画：帧动画。开发中，一般配合精灵图实现动画效果。
animation-timing-function: steps(N)；含义:将动画过程等分成N份

实现剑客奔跑效果

精灵图:

注意:

1.定义动画中(keyframs中)改变背景图的位置移动的距离就是精灵图的宽度.

@keyframes run {
            100%{
                background-position: -1680px 0;
            }
        }

2.添加速度曲线steps(n)时,n就是精灵图上小图的个数.

animation: run 2s  steps(12) infinite,move 3s infinite linear;

3.添加无限重复效果infinite

animation: run 2s  steps(12) infinite,move 3s infinite linear;

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box
        {
            width: 140px;
            height: 140px;
            background-color: green;
            /* border-radius: 50%; */
            background-image: url(../images/bg.png);
            animation: run 2s  steps(12) infinite,move 3s infinite linear;
        }
        @keyframes run {
            100%{
                background-position: -1680px 0;
            }
        }
        /* @keyframes move {
            100%{
                transform: translate(1900px,0) rotate(3turn);

            }
        } */

    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

2.3 轮播图实现

实现轮播框内七个图无缝循环播放,鼠标移动上去会暂停.

注意:

当原本七个图结束后会出现空白,同时会突兀的转到第一二三张图出现在展示框内.

为了解决这个问题,使不出现空白并且使连接第一二三张图更加无缝,我们在原本的七个li后增加三个li,这三个li复制于前三张图,所以其实ul中一共有7+3=10张图.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 600px;
            height: 150px;
            border: 3px solid #000;
            margin: 100px auto;
            overflow: hidden;
        }

        .box ul {
            width: 2000px;
            list-style: none;
            animation: move 6s infinite linear;
        }
        ul:hover{
            animation: move 3s infinite linear paused;
        }

        .box ul li {
            float: left;
        }

        a {
            display: block;
            width: 200px;
            height: 150px;
        }

        img {
            width: 100%;
            height: 100%;
        }

        @keyframes move {
            100% {
                transform: translate(-1400px, 0);
            }
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li><a href="#">
                    <img src="../images/1.jpg" alt=""></a>
            </li>
            <li><a href="#">
                    <img src="../images/2.jpg" alt=""></a>
            </li>
            <li><a href="#">
                    <img src="../images/3.jpg" alt=""></a>
            </li>
            <li><a href="#">
                    <img src="../images/tyre1.png" alt=""></a>
            </li>
            <li><a href="#">
                    <img src="../images/tyre.png" alt=""></a>
            </li>
            <li><a href="#">
                    <img src="../images/product.jpg" alt=""></a>
            </li>
            <li><a href="#">
                    <img src="../images/rotate.png" alt=""></a>
            </li>
            <li><a href="#">
                    <img src="../images/1.jpg" alt=""></a>
            </li>
            <li><a href="#">
                    <img src="../images/2.jpg" alt=""></a>
            </li>
            <li><a href="#">
                    <img src="../images/3.jpg" alt=""></a>
            </li>
            <!-- 解决动画留白问题,在后面补上最前面三个图,造成一种接到第一个的假象 -->
        </ul>
    </div>
</body>

</html>