欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

CSS3-制作一个简单的动画

程序员文章站 2022-06-11 18:09:26
...
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            html,body{
                width: 100%;
                background-color: dodgerblue;
                overflow: hidden;
            }
            /*sea*/
            .sea{
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 235px;
            }
            .sea>div{
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: url(img/1.png) no-repeat bottom left;
                opacity: 0.3;
            }
            .sea>.sea1{
                animation: sea 1s linear infinite alternate;
            }
            .sea>.sea2{
                background-image: url(img/2.png);
                animation: sea 1s linear infinite alternate 0.5s;

            }

            @keyframes sea{
                0%{
                    bottom: 0px;
                }
                100%{
                    bottom: -30px;
                }
            }

            /*sun*/
            .sun{
                position: absolute;
                left: 100px;
                top: 100px;
                width: 100px;
                height: 100px;
                border-radius: 50%;
                background-color: #fff;
            }
            .sun>div{
                position: absolute;
                left: 0;
                top: 0;
                width: 100px;
                height: 100px;
                border-radius: 50%;
                background-color: #fff;
            }
            .sun .sun1{
                animation: sun 1s infinite;
            }
            .sun .sun2{
                animation: sun 1s infinite 0.5s;
            }
            @keyframes sun{
                0%{
                    transform: scale(1);
                    opacity: 1;
                }
                100%{
                    transform: scale(1.5);
                    opacity: 0.1;
                }
            }

        </style>
    </head>
    <body>
        <div class="sun">
            <div class="sun1"></div>
            <div class="sun2"></div>
        </div>
        <div class="sea">
            <div class="sea1"></div>
            <div class="sea2"></div>
        </div>
    </body>
</html>

效果如图

CSS3-制作一个简单的动画