CSS3动画

最新推荐文章于 2025-06-08 21:28:47 发布

凌冰_

最新推荐文章于 2025-06-08 21:28:47 发布

阅读量1k

点赞数 30

CC 4.0 BY-SA版权

分类专栏： CSS3 文章标签： css3 前端 javascript

本文链接：https://blog.csdn.net/hlx20080808/article/details/148156754

CSS3 专栏收录该内容

33 篇文章

订阅专栏

一、CSS3 动画

CSS3 动画是一种通过纯CSS实现动画效果的技术，它允许开发者在不使用JavaScript或Flash的情况下，为网页元素添加平滑的过渡和动画效果。CSS3 动画的引入，极大地增强了网页的表现力和用户体验。

二、 CSS3 动画的关键组成部分

1、设置关键帧

@keyframes animationname {

from {/*CSS样式写在这里*/}

percentage {/*CSS样式写在这里*/}

to {/*CSS样式写在这里*/}

}

2、调用关键帧

animation 属性用于将 @keyframes 动画绑定到元素上，并控制动画的播放。它可以包含多个子属性，如 animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction 等

语法：

animation属性：

性名称	作用描述	可选值	默认值
animation-name	指定关键帧动画名称	keyframename \| none	none
animation-duration	单次动画持续时间	时间单位（s/ms）	0s
animation-timing-function	动画速度曲线	ease \| linear \| ease-in \| ease-out \| ease-in-out \| steps(n)	ease
animation-delay	动画延迟时间	时间单位（允许负值）	0s
animation-iteration-count	动画播放次数	number \| infinite	1
animation-direction	动画播放方向	normal \| reverse \| alternate \| alternate-reverse	normal
animation-fill-mode	动画外样式应用	none \| forwards \| backwards \| both	none
animation-play-state	动画播放状态控制	running \| paused	running

说明：

animation-direction‌

作用：控制播放方向
参数：
normal：正向播放
reverse：反向播放
alternate：奇数次正向，偶数次反向
alternate-reverse：奇数次反向，偶数次正向

‌animation-fill-mode‌

作用：设置动画执行前后样式状态
参数：
none：默认状态
forwards：保留最后一帧样式
backwards：应用第一帧样式
both：同时应用前后状态

‌animation-play-state‌

作用：控制动画播放状态
参数：

running：将暂停的动画重新播放

paused：将正在播放的元素动画停下来

三、CSS3 动画的优势

纯CSS实现：无需依赖JavaScript或第三方库，减少了代码的复杂性和加载时间。

性能优化：浏览器对CSS动画进行了优化，通常比JavaScript动画更加流畅和高效。

易于维护：CSS动画与页面样式分离，使得样式和动画的维护更加容易。

兼容性：现代浏览器普遍支持CSS3动画，具有良好的兼容性。

四、动画应用

1、背景动画（通过改变背景图片的位置来实现动画效果。）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>背景动画</title>
    <style>
        body {
            display: flex; /* 使用弹性布局 */
            justify-content: center; /* 水平居中 */
            align-items: center; /* 居中显示 */
            height: 100vh; /* 确保足够长，以便滚动 */
            font-size: 30px;
            color: #fff;
            background-image: -webkit-linear-gradient(125deg, #2c3e50, #27ae60, #2980b9, #e74c3c, #8e44ad); /* 渐变背景 */
            background-size: 400%;  /* 背景图大小 */
            animation: bgmove 10s infinite; /* 动画名称、持续时间、无限循环 */
        }

        /* 定义动画 */
        @keyframes bgmove {
            from {
                background-position: 0% 50%; /* 起始位置 */
            }
            50% {
                background-position: 100% 50%; /* 中间位置 */
            }
            to {
                background-position: 0% 50%; /* 结束位置，回到起始点形成循环效果 */
            }
        }
    </style>
</head>
<body>
    <h1>Animate Background</h1>
</body>
</html>

2、逼真的水滴动图（通过改变元素的边框半径和阴影来实现动画。）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>水滴动图</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            width: 100vw;
            height: 100vh;
            display: flex;
            background-color: #00a8ff;
            justify-content: center;
        }

        /* 水面 */
        .water {
            margin-top: 200px;
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            border-radius: 72% 28% 64% 36% / 12% 17% 83% 88%;
            box-shadow: inset 10px 20px 30px rgba(0, 0, 0, 0.5),
                        10px 10px 20px rgba(0, 0, 0, 0.3),
                        15px 15px 30px rgba(0, 0, 0, 0.05),
                        inset -10px -10px 15px rgba(255, 255, 255, 0.8);  /* 阴影效果 */
            animation: move 5s linear infinite alternate; /* 动画效果  */
        }

        /* 水滴 */
        .water::after, .water::before {
            content: '';
            position: absolute;
            background-color: rgba(255, 255, 255, 0.8);
        }

        /* 水滴后 */
        .water::after {
            width: 20px;
            height: 20px;
            top: 240px;
            left: 47%;
            border-radius: 9% 91% 35% 65% / 51% 17% 83% 49%;
        }

        /* 水滴前 */
        .water::before {
            width: 10px;
            height: 10px;
            top: 230px;
            left: 45%;
            border-radius: 53% 47% 46% 54% / 99% 0% 100% 1%;
        }

        /* 动画效果 */
        @keyframes move {
            25% {
                border-radius: 11% 89% 65% 35% / 64% 32% 68% 36%;  /* 改变形状 */
            }
            50% {
                border-radius: 60% 40% 65% 35% / 64% 32% 68% 36%;  /* 改变形状 */
            }
            to {
                border-radius: 73% 27% 65% 35% / 64% 67% 33% 36%;
            }
        }
    </style>
</head>
<body>
    <div class="water"></div>
</body>
</html>

3、热点图动画（通过逐渐放大和降低透明度的圆圈来表示热点的动态变化。）

<!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>
    <style>
        body {
            position: relative;
            background-color: coral;
        }

        /* 热点的位置，大小 颜色 */
        .beijing, .shanghai, .guangzhou {
            position: absolute;
            width: 40px;
            height: 10px;
            font-size: 12px;
            color: white;
        }

        /* 热点位置 */
        .beijing { top: 100px; left: 500px; }
        .shanghai { top: 250px; left: 550px; }
        .guangzhou { top: 350px; left: 480px; }

        /* 动画圆点大小，颜色，阴影 */
        .dot {
            width: 8px;
            height: 8px;
            background-color: deepskyblue;
            border-radius: 50%;
            box-shadow: 0 0 12px deepskyblue;
        }

        /* 动画圆点位置 */
        .bjdot, .shdot, .gzdot {
            position: absolute;
        }

        /* 圆点位置 */
        .bjdot { top: 105px; left: 485px; }
        .shdot { top: 255px; left: 535px; }
        .gzdot { top: 355px; left: 465px; }

        /* 动画圆点 */
        .dot div[class^="circle"] {
            position: absolute;
            transform: translate(-50%, -50%);
            margin-top: 4px;
            margin-left: 4px;
            width: 8px;
            height: 8px;
            border: 1px solid deepskyblue;
            box-sizing: border-box;
            border-radius: 50%;
            box-shadow: 0 0 12px deepskyblue;
        }

        /* 动画延迟时间 */
        .circle1 { animation: movie 3s linear infinite; }
        .circle2 { animation: movie 3s linear 1s infinite; }
        .circle3 { animation: movie 3s linear 2s infinite; }

        /* 动画 */
        @keyframes movie {
            0% {}
            70% {
                width: 60px;
                height: 60px;
                opacity: 0.3;
            }
            100% {
                width: 60px;
                height: 60px;
                opacity: 0;
            }
        }
    </style>
</head>
<body>
    <div class="beijing">北京</div>
    <div class="shanghai">上海</div>
    <div class="guangzhou">杭州</div>
    <div class="dot bjdot">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
    </div>
    <div class="dot shdot">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
    </div>
    <div class="dot gzdot">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
    </div>
</body>
</html>