HTML中的过渡和动画

最新推荐文章于 2024-08-19 19:55:55 发布

从明天开始好好学习前端

最新推荐文章于 2024-08-19 19:55:55 发布

阅读量2.3k

点赞数 9

文章标签：前端

本文链接：https://blog.csdn.net/l12345666777/article/details/134169026

版权

一、过渡

特点：元素发生改变不会立即生效
过渡需要手动触发 hover active @media
需要告诉系统哪一个元素需要过渡持续时间
transition-property 设置过渡属性
transition-duration 设置过渡持续时间
transition-delay 设置过渡等待时长
transition-timing-function 设置过渡速度曲线
简写为transition:property duration timing-function delay;

可以使用如下代码进行测试：

<!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{
            width: 100px;
            height: 100px;
            background-color: red;
            /* 设置要过渡的属性 设置多个属性过渡 需要使用，隔开 */
            transition-property: width,background-color;
            /* 设置过渡持续时间 */
            transition-duration: 2s,1s;
            /* 设置过渡等待时长 */
            transition-delay: 0s;
            /* 设置过渡速度曲线 linear线性匀速 */
            transition-timing-function: linear;
        }
        div:hover{
            width: 200px;
            background-color: pink;
        }
        img{
            width: 150px;
            /* 设置过渡效果 */
            /* 过渡属性简写: transition:property duration timing-function delay */
            /* transition: width 2s linear 0s; */

            /* 设置图片缩放比例过渡 transform(形变 移动 旋转 缩放) */
            transition: transform 2s ease-in 0s;
        }
        img:hover{
            /* width: 250px; */
            transform: scale(1.2);
        }
    </style>
</head>
<body>
    <div></div>
    <img src="../Day01/音视频/ad7.jpeg" alt="">
</body>
</html>

浏览器运行结果如下：

一个过渡的小案例：

当鼠标悬浮到div块的时候会进行过渡转换

<!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>
        .parent{
            height: 300px;
            background-color: red;
            text-align: center;
            line-height: 300px;
            /* 设置多个属性的过渡 */
            transition: font-size 2s linear 0s,color 2s linear 0s,background-color 2s linear 0s;
        }
        .parent:hover{
            font-size: 58px;
            color: white;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">你好</div>
    </div>
</body>
</html>

浏览器运行如下：

二、动画

特点：不需要手动触发
需要告诉系统哪一个元素需要动画动画持续时间
1.定义动画关键帧
@keyframes 动画名称{
动画状态
from{} 开始状态
to{} 结束状态
0%{

}
25%{

}
50%{

}
100%{

}
}
2.给元素设置动画
animation-name 设置动画名称
animation-duration 设置动画持续时间
animation-timing-function 设置动画速度曲线
animation-delay 设置动画等待时长
animation-iteration-count 设置动画迭代次数 number infinite(无限循环)

可以使用如下代码进行测试：

<!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{
            width: 100px;
            height: 100px;
            background-color: red;
            /* 设置动画名称 */
            animation-name: move;
            /* 设置动画持续时间 */
            animation-duration: 2s;
            /* 设置动画速度曲线 */
            animation-timing-function: linear;
            /* 设置动画等待时长 */
            animation-delay: 0s;
            /* 设置动画持续次数 */
            animation-iteration-count: 1;
            /* 设置动画是否反向播放  alternate反向播放 */
            animation-direction: alternate;
            /* 设置动画应用第几帧 forwards最后一帧 backwards第一帧 */
            animation-fill-mode: forwards;
            /* 简写 name duration timing-function delay iteration-count direction fill-mode */
            animation: move 2s ease-in 0s 1 alternate forwards;
        }
        div:hover{
            /* 设置动画是否暂停 paused暂停 running执行 */
            animation-play-state: paused;
        }
        /* 定义动画关键帧 */
        @keyframes move {
            0%{
                margin-left: 0;
            }
            25%{
                margin-left: 150px;
            }
            50%{
                margin-left: 250px;
            }
            100%{
                margin-left: 350px;
            }
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

浏览器运行如下：

动画案例1：

让div中的小方块来回翻转运动并进行变色变形

<!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{
            width: 100px;
            height: 100px;
            animation: move 2s linear infinite alternate;
        }
        @keyframes move {
            from{
                transform: translateX(0px) rotate(0deg);
                background-color: royalblue;
                border-radius: 0;
            }
            to{
                transform: translateX(200px) rotate(360deg);
                background-color: pink;
                border-radius: 50%;
            }
        }
    </style>
</head>
<body>
    <div>/</div>
</body>
</html>

浏览器运行如下：

动画案例2：

让图片来进行放大缩小操作

<!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>
        img{
            animation: pound 0.1s linear infinite alternate;
        }
        @keyframes pound {
            0%{
                /* 不设置任何形变 */
                transform: none;
            }
            100%{
                /* 设置缩放>1放大 <1缩小 */
                transform: scale(1.2);
            }
        }
    </style>
</head>
<body>
    <img width="150px" src="https://ts4.cn.mm.bing.net/th?id=OIP-C.2vp0qW8X2JxAFYcNsyKMCQHaHa&w=250&h=250&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2" alt="">
</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>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        /* 设置一次展示两张图片容器 div */
        .parent{
            width: 800px;
            height: 200px;
            border: 1px solid royalblue;
            margin: 30px auto;
            overflow: hidden;
        }
        ul{
            width: 3000px;
            height: 200px;
            animation: swipe 8s linear infinite;
        }
        ul>li{
            width: 400px;
            height: 200px;
            float: left;
        }
        li>img{
            width: 400px;
            height: 200px;
        }
        /* 悬浮到ul 每一个li透明度设置为0.5 */
        ul:hover li{
            opacity: 0.5;
        }
        /* 选中哪一个li  li透明度设置为100% */
        ul li:hover{
            opacity: 1;
        }
        @keyframes swipe {
            from{
                margin-left: 0;
            }
            to{
                margin-left: -1600px;
            }
        }
    </style>
</head>
<body>
    <div class="parent">
        <ul>
            <li><img src="./images/ad7.jpeg" alt=""></li>
            <li><img src="./images/ad8.jpg" alt=""></li>
            <li><img src="./images/ad9.jpeg" alt=""></li>
            <li><img src="./images/ad10.jpg" alt=""></li>
            <li><img src="./images/ad7.jpeg" alt=""></li>
            <li><img src="./images/ad8.jpg" alt=""></li>
        </ul>
    </div>
</body>
</html>

浏览器运行如下：