HTML复杂动画和变形小白入门_动画菜鸟攻略

1、复杂动画(1)涉及到的属性:animation-name:动画名称;animation-duration:单次动画总时长;animation-timing-function:时间函数;animation-delay:播放前延时的时长;animation-iteration-count:播放次数(具体的数字),当设置infinite时是循环播放;anima

HTML复杂动画和变形小白入门

1、复杂动画

(1)涉及到的属性:

HTML复杂动画和变形小白入门_动画菜鸟攻略

animation-name:动画名称;

animation-duration:单次动画总时长;

animation-timing-function:时间函数;

animation-delay:播放前延时的时长;

animation-iteration-count:播放次数(具体的数字),当设置infinite时是循环播放;

animation-direction:播放顺序,其中normal是正常播放,alternate是轮流反向播放,播放次数必须在2次以上。

(2)书写方式

@keyframes 名字(自己取一个名字){   ——>定义一个动画}

 HTML复杂动画和变形小白入门_动画菜鸟攻略

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>复杂动画练习</title>
</head>
<style>
    .box {
        width: 200px;
        height: 200px;
        background-color: blueviolet;
        border: solid black;
        position: relative;
        top: 0;
        /* 动画名称 */
        animation-name: demo;
        /* 动画时长 */
        animation-duration: 5s;
        /* 动画运行速度 */
        animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
        /* 播放前延迟的时长 */
        animation-delay: 3s;
        /* 播放次数,这里写的时循环播放,可以写具体数字 */
        animation-iteration-count: infinite;
        /* 播放顺序,这里写的时轮流反向播放,可以写normal正常播放 */
        animation-direction: alternate;
    }
    
    @keyframes demo {
        from {
            top: 0;
            border-radius: 0;
        }
        20% {
            top: 100px;
            left: 100px;
            border-radius: 30px;
        }
        50% {
            top: 200px;
            left: 100px;
            border-radius: 30px
        }
        to {
            top: 400px;
            left: 400px;
            border-radius: 50%
        }
    }
</style>

<body>
    <div class="box">
        动画练习
        <!-- <img src="img/2010011712541759.jpg" alt=""> -->
    </div>
</body>

</html>

效果如下:

HTML复杂动画和变形小白入门_动画菜鸟攻略

2、盒子变形

(1)  变形:通过变形可以改变盒子的视觉效果,变形不会改变盒子原本的位置和尺寸,因此不会对其他元素造成影响。

(2)  变形的类型

Translate(移动)

Scale(缩放,1以下是缩小,1以上是扩大)

Skew(倾斜,单位deg)

Rotate(旋转,默认是沿着Z轴旋转,单位deg)

(3)  定义原点

Transform-origin:设置盒子的中心点。

(4)  其他属性

背面可见性:backface-visibility

visible:默认值,背面可见

hidden:背面不可见

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>盒子变形</title>
</head>
<style>
    .box {
        width: 260px;
        height: 260px;
        position: relative;
    }
    
    .zheng,
    .fan {
        width: 260px;
        height: 260px;
        font-size: 26px;
        border: solid black;
        color: white;
        text-align: center;
        line-height: 260px;
        position: absolute;
        top: 0;
        left: 0;
        transition: all 1s;
        backface-visibility: hidden;
    }
    
    .zheng {
        background-color: blueviolet;
        z-index: 2;
    }
    
    .fan {
        background-color: green;
        transform: rotateY(-180deg) rotateZ(-180deg);
    }
    
    .box:hover .zheng {
        transform: rotateY(180deg) rotateZ(180deg);
    }
    
    .box:hover .fan {
        transform: rotateY(0deg) rotateZ(0deg);
    }
</style>

<body>
    <div class="box">
        <div class="zheng">正面</div>
        <div class="fan">反面</div>
    </div>
</body>

</html>

变形效果如下:

HTML复杂动画和变形小白入门_动画菜鸟攻略

海计划公众号
(0)
上一篇 2020/03/23 18:39
下一篇 2020/03/23 18:39

您可能感兴趣的内容