html5——动画案例（大海）

太阳的发散效果主要是利用transform: scale(1.3)，将物体变大
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        html, body {
            width: 100%;
            height: 100%;
            background-color: lightseagreen;
            overflow: hidden;
        }

        .sun {
            width: 80px;
            height: 80px;
            position: absolute;
            top: 45px;
            left: 67px;
            background-color: #fff;
            border-radius: 50%;
        }

        .sun1, .sun2 {
            position: absolute;
            top: 0;
            left: 0;
            width: 80px;
            height: 80px;
            background-color: #fff;
            border-radius: 50%;
        }

        .sun1 {
            animation: bigger 1s infinite alternate;
        }

        .sun2 {
            animation: bigger 1s infinite 0.5s alternate;
        }

        .bottom {
            width: 100%;
            height: 235px;
            position: absolute;
            bottom: 0;
            left: 0;
        }

        .bottom1, .bottom2 {
            width: 100%;
            position: absolute;
            left: 0;
            bottom: 0;
            opacity: 0.5;
        }

        .bottom1 {
            height: 211px;
            background: url("images/bolang1.png");
            background-size: cover;
            animation: upDown 1s infinite alternate;
        }

        .bottom2 {
            height: 235px;
            background: url("images/bolang2.png");
            background-size: cover;
            animation: upDown 1s infinite alternate 0.5s;
        }

        @keyframes bigger {
            0% {
                opacity: 1;
                transform: scale(1);
            }
            100% {
                opacity: 0.3;
                transform: scale(1.3);
            }
        }

        @keyframes upDown {
            0% {
                bottom: 0px;
            }

            100% {
                bottom: -20px;
            }
        }

    </style>
</head>
<body>
<div class="sun">
    <div class="sun1"></div>
    <div class="sun2"></div>
</div>
<div class="bottom">
    <div class="bottom1"></div>
    <div class="bottom2"></div>
</div>
</body>
</html>