• CSS动画的三种实现方式

    关键词：css3，动画，三种方式

    大家好，本文将学习前端动画的三种实现方式，简单有趣，如果觉得文章写的不错，还请点赞转发关注呀，你的支持就是对我最大的鼓励，好的，开始吧！

    文章目录

    1. transition过渡

    口诀： 谁要过渡效果给谁加

    相关属性：

    值描述
    transition-property规定设置过渡效果的 CSS 属性的名称。
    transition-duration规定完成过渡效果需要多少秒或毫秒。
    transition-timing-function规定速度效果的速度曲线。
    transition-delay定义过渡效果何时开始。

    青铜

    在这里插入图片描述

    给div添加过渡，当div变化时，过渡就会生效
参数1：给谁加
参数2：过渡几秒
参数3：运行函数，此处是匀速
参数4：延迟几秒执行

    • 1
    • 2
    • 3
    • 4
    • 5
    DOCTYPE html>
<html lang="en">

<head>
    <title>Documenttitle>
    <style>
        div {
            width: 600px;
            height: 80px;
            border: 1px solid;
            /* 
            给div添加过渡，当div变化时，过渡就会生效
            参数1：给谁加
            参数2：过渡几秒
            参数3：运行函数，此处是匀速
            参数4：延迟几秒执行
             */
            transition: background-color 2s linear 1s;
        }

        div:hover {
            background-color: #69F;
        }
    style>
head>

<body>
    <div>div>
body>

html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31

    王者

    在这里插入图片描述

    给div添加过渡，当div变化时，过渡就会生效
这里分别给两个属性添加了过渡，给多个属性分别添加时使用,分隔开
解读：width由100px变为600px，用时2秒，速度函数为ease缓和
background-color由白色变为蓝色，用时1.5秒，并延时0.8秒执行

    • 1
    • 2
    • 3
    • 4
    DOCTYPE html>
<html lang="en">

<head>
    <title>Documenttitle>
    <style>
        div {
            width: 100px;
            height: 80px;
            border: 1px solid;
            /* 
            给div添加过渡，当div变化时，过渡就会生效
            这里分别给两个属性添加了过渡，给多个属性分别添加时使用,分隔开
            解读：width由100px变为600px，用时2秒，速度函数为ease缓和
            background-color由白色变为蓝色，用时1.5秒，并延时0.8秒执行
             */
            transition: width 2s ease, background-color 1.5s 0.8s;
        }

        div:hover {
            width: 600px;
            background-color: #69F;
        }
    style>
head>

<body>
    <div>div>
body>

html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31

    2. transform转换

    使用 transform 可以轻松的完成 2d 下的移动，旋转，缩放，倾斜等的动画基本属性，也可以组合他们，同时css3也提供了对 3d 转换的支持

    属性

    值描述
    none定义不进行转换。
    translate(x,y)定义 2D 转换。
    translate3d(x,y,z)定义 3D 转换。
    translateX(x)定义转换，只是用 X 轴的值。
    translateY(y)定义转换，只是用 Y 轴的值。
    translateZ(z)定义 3D 转换，只是用 Z 轴的值。
    scale(x,y)定义 2D 缩放转换。
    scale3d(x,y,z)定义 3D 缩放转换。
    scaleX(x)通过设置 X 轴的值来定义缩放转换。
    scaleY(y)通过设置 Y 轴的值来定义缩放转换。
    scaleZ(z)通过设置 Z 轴的值来定义 3D 缩放转换。
    rotate(angle)定义 2D 旋转，在参数中规定角度。
    rotate3d(x,y,z,angle)定义 3D 旋转。
    rotateX(angle)定义沿着 X 轴的 3D 旋转。
    rotateY(angle)定义沿着 Y 轴的 3D 旋转。
    rotateZ(angle)定义沿着 Z 轴的 3D 旋转。
    skew(x-angle,y-angle)定义沿着 X 和 Y 轴的 2D 倾斜转换。
    skewX(angle)定义沿着 X 轴的 2D 倾斜转换。
    skewY(angle)定义沿着 Y 轴的 2D 倾斜转换。
    perspective(n)为 3D 转换元素定义透视视图。

    移动 translate

    在这里插入图片描述

    DOCTYPE html>
<html lang="en">

<head>
    <title>Documenttitle>
    <style>
        body {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        div {
            width: 600px;
            height: 80px;
            border: 1px solid;
            transition: all .8s;
        }

        div:hover {
            transform: translate(10px, -30px);
            background-color: skyblue;
        }
    style>
head>

<body>
    <div>div>
body>

html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32

    缩放 scale

    在这里插入图片描述

    DOCTYPE html>
<html lang="en">

<head>
    <title>Documenttitle>
    <style>
        body {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        div {
            width: 600px;
            height: 80px;
            border: 1px solid;
            transition: all .8s;
        }

        div:hover {
            transform: scale(.95, 1.2);
            background-color: skyblue;
        }
    style>
head>

<body>
    <div>div>
body>

html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32

    旋转 rotate

    transform-origin: left;属性，可以改变变换原点，可以使用left,center,right等等，还可以使用像素或其他单位
    在这里插入图片描述

    DOCTYPE html>
<html lang="en">

<head>
    <title>Documenttitle>
    <style>
        body {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        div {
            width: 200px;
            height: 10px;
            border: 1px solid;
            transition: all 1s;
            transform-origin: left;
        }

        div:hover {
            transform: rotate(720deg);
            background-color: skyblue;
        }
    style>
head>

<body>
    <div>div>
body>

html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33

    倾斜 skew

    在这里插入图片描述

    DOCTYPE html>
<html lang="en">

<head>
    <title>Documenttitle>
    <style>
        body {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        div {
            width: 600px;
            height: 60px;
            border: 1px solid;
            transition: all 1s;
        }

        div:hover {
            transform: skew(30deg,5deg);
            background-color: skyblue;
        }
    style>
head>

<body>
    <div>div>
body>

html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32

    3d 书

    在这里插入图片描述

    DOCTYPE html>
<html lang="en">

<head>
    <title>Documenttitle>
    <style>
        * {
            margin: 0;
        }

        .box {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 200px;
            height: 350px;
            perspective: 500px;
        }

        .door {
            width: 200px;
            height: 350px;
            background-color: #666;
            transform-origin: 0 0;
            transition: all 1s;
        }

        .box:hover .door {
            transform: rotateY(-150deg);
        }

        p {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 200px;
            height: 350px;
            line-height: 350px;
            text-align: center;
            background-color: #ccc;
            z-index: -1;
        }
    style>
head>

<body>
    <div class="box">
        <div class="door">div>
        <p>关注小周p>
    div>
body>

html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55

    3. 关键帧动画@keyframes

    关键帧动画@keyframes通常搭配 animation 属性一起使用，首先学习怎么定义关键帧动画

    值描述
    animationname必需。定义动画的名称。
    keyframes-selector必需。动画时长的百分比。合法的值：0-100%from（与 0% 相同）to（与 100% 相同）
    css-styles必需。一个或多个合法的 CSS 样式属性。

    例子：一个名为 move 的关键帧（动画），从距离坐标10px到100px

    @keyframes move {
    from {
        left: 10px;
    }

    to {
        left: 100px;
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    animation

    属性：

    值描述
    animation-name规定需要绑定到选择器的 keyframe 名称。。
    animation-duration规定完成动画所花费的时间，以秒或毫秒计。
    animation-timing-function规定动画的速度曲线。
    animation-delay规定在动画开始之前的延迟。
    animation-iteration-count规定动画应该播放的次数。
    animation-direction规定是否应该轮流反向播放动画。

    在这里插入图片描述

    DOCTYPE html>
<html lang="en">

<head>
    <title>Documenttitle>
    <style>
        div {
            position: relative;
            width: 600px;
            height: 100px;
            border: 1px solid;
            overflow: hidden;
        }

        p {
            position: absolute;
            width: 112px;
            /* 
            1.动画名 move
            2.动画时间 6s
            3.运动函数 linear 匀速
            4.延时执行 1s
            5.执行次数 infinite 循环
            6.是否倒放 normal 不
            */
            animation: move 6s linear 1s infinite normal;
        }

        @keyframes move {
            from {
                left: -113px;
            }

            to {
                left: 600px;
            }
        }
    style>
head>

<body>
    <div>
        <p>这是一个通知栏p>
    div>
body>

html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47

    写在最后

    相信聪明的你已经收获很多，但只看不行的哦，多写，你才能真的掌握，加油吧，少年，最后还是如果觉得本文不错，点赞转发，推荐呀，这是对博主写原创最大的鼓励和支持，谢谢

    在这里插入图片描述

  • 相关阅读:
    Vue Props
    代码随想录一刷last day|84.柱状图中最大的矩形
    Java核心知识1：泛型机制详解
    豫见大势，豫见智慧——第九届博博会侧记
    luogu 2513 逆序对数列
    每日一题：web常见的攻击方式有哪些？如何防御？
    jmeter逻辑控制器和定时器
    浏览器扩展V3开发系列之 chrome.commands 快捷键的用法和案例
    python基础篇（4）：range语句
    项目经理如何提升团队执行力？
  • 原文地址：https://blog.csdn.net/stu_365392777/article/details/126319807