CSS3动画——案例热点图，奔跑的熊大

最新推荐文章于 2022-11-10 11:19:26 发布

MAX--李

最新推荐文章于 2022-11-10 11:19:26 发布

阅读量666

点赞数

文章标签： css css3

本文链接：https://blog.csdn.net/qq_41935315/article/details/105535130

版权

一.动画的基本使用

1》定义动画
2》调用动画

案例:
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3动画</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        /*@keyframes定义动画*/
        @keyframes move {
            /*开始状态*/
            0% {
                transform: translate(0px, 0px);
            }
            /*结束状态*/
            25% {
                transform: translate(800px, 0px);
            }
            50%{
                transform: translate(800px, 400px);
            }
            75%{
                transform: translate(0px, 400px);
            }
            100%{
                transform: translate(0px, 0px);
            }
        }

        div {

            background-color: rebeccapurple;
            height: 100px;
            width: 100px;
            border: 2px solid royalblue;
            /*调用动画*/
            animation-name: move;
            /*持续时间*/
            animation-duration: 10s;
            /*延时时间*/
            animation-delay: 2s;
        }

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

    </style>
</head>
<body>
<div>
    <img src="img/tudou.jpg" alt="">
</div>
</body>
</html>

**下表列出了@keyframes规则和所有CSS动画属性：

动画简写：
一般顺序
名称和持续时间必须有
多个动画可以叠加，用逗号隔开即可

热点图案例
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3动画</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        .map {
            position: relative;
            width: 537px;
            height: 407px;
            background: url("img/Snipaste_2020-04-15_15-43-55.png") no-repeat;
            margin: 10px auto;
            border: 2px solid royalblue;
        }

        .city {
            position: absolute;
            right: 170px;
            top: 154px;


        }

        .guangzhou {
            position: absolute;
            right: 169px;
            top: 345px;

        }

        .taibei {
            position: absolute;
            right: 103px;
            top: 315px;

        }

        .map .city .dotted {
            width: 8px;
            height: 8px;
            background-color: #68e4ff;
            border-radius: 50%;
        }

        .map div[class^=polse] {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 8px;
            height: 8px;
            box-shadow: 0 0 12px royalblue;
            border-radius: 50%;
            animation: polse 4s linear infinite;
        }

        @keyframes polse {
            0% {

            }
            70% {
                width: 25px;
                height: 25px;
                /*透明度*/
                opacity: 1;
            }
            100% {
                width: 50px;
                height: 50px;
                /*透明度*/
                opacity: 1;
            }
        }

        .map .city .polse2 {
            animation-delay: 1s;
        }

        .map .city .polse3 {
            animation-delay: 2s;
        }

    </style>
</head>
<body>
<div class="map">
    <div class="city">
        <div class="dotted"></div>
        <div class="polse1"></div>
        <div class="polse2"></div>
        <div class="polse3"></div>
    </div>
    <div class="city taibei">
        <div class="dotted"></div>
        <div class="polse1"></div>
        <div class="polse2"></div>
        <div class="polse3"></div>
    </div>
    <div class="city guangzhou">
        <div class="dotted"></div>
        <div class="polse1"></div>
        <div class="polse2"></div>
        <div class="polse3"></div>
    </div>

</div>
</body>
</html>

百度案例之奔跑的熊大

在这里插入图片描述

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            background-color: #ccc;
        }
        div{
            position: absolute;
            width: 80px;
            height: 132px;
            background: url("img/banner.png") no-repeat;
            animation: move 1s steps(8) infinite,b 5s forwards;
            overflow: hidden;
        }
        @keyframes move {
            0%{
                background-position: 0 0;
            }
            100%{
                background-position: -640px 0;
            }
        }
        @keyframes b {
            0%{
                left: 0;
            }
            100%{
                left: 50%;
            }
        }
    </style>
</head>
<body>
<div>

</div>

</body>
</html>