找回密码
当前位置：前端开发者 > CSS > 正文

前端开发纯CSS3流星雨

2019-01-06 分类：CSS 阅读(1316) 评论(0)
前端开发小游戏制作
游戏前端和web前端开发
游戏 前端开发

safari和ie9以下无效
代码片段 1

<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”UTF-8″ />
        <title>meteor</title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }
            body {
                background-color: #000;
                overflow: hidden;
            }
            .author {
                color: #fff;
                font: 18px/1.5 ‘微软雅黑’;
                animation: change 4s infinite;
            }
            .star {
                width: 4px;
                height: 4px;
                background-color: #fff;
                display: block;
                position: absolute;
                top: 110px;
                right: 800px;
                border-radius: 4px;
                animation: star 1s infinite linear;
                opacity: 0;
            }
            .star:after {
                position: relative;
                display: block;
                top: -49px;
                left: 23px;
                border: 2px solid #fff;
                border-width: 0 0 0 1px;
                width: 100px;
                height: 100px;
                content: ”;
                transform: rotate(45deg);
            }
            .blue {
                background-color: lightskyblue;
                top: 60px;
                right: 600px;
                animation-delay: 0.25s;
            }
            .blue:after {
                width: 200px;
                height: 200px;
                top: -99px;
                left: 43px;
                border: 2px solid lightskyblue;
                border-width: 0 0 0 1px;
            }
            .pink {
                background-color: lightpink;
                top: 160px;
                right: 500px;
                animation: starPink 1s infinite linear;
                animation-delay: 0.5s;
            }
            .pink:after {
                width: 133px;
                height: 133px;
                top: -65px;
                left: 29px;
                border: 2px solid lightpink;
                border-width: 0 0 0 1px;
            }
            .yellow {
                background-color: yellow;
                top: 127px;
                right: 261px;
                animation: starYellow 1s infinite linear;
                animation-delay: 0.75s;
            }
            .yellow:after {
                width: 209px;
                height: 164px;
                top: -65px;
                left: 29px;
                border: 2px solid yellow;
                border-width: 0 0 0 1px;
            }
            @keyframes change {
                0% {
                    color: #fff;
                }
                25% {
                    color: lightskyblue;
                }
                50% {
                    color: lightpink;
                }
                75% {
                    color: yellow;
                }
            }
            @keyframes star {
                0% {
                    opacity: 0;
                    transform: scale(0) translate(0, 0);
                }
                50% {
                    opacity: 1;
                    transform: scale(1) translate(-200px, 200px);
                }
                100% {
                    opacity: 0;
                    transform: scale(1) translate(-400px, 400px);
                }
            }
            @keyframes starPink {
                0% {
                    opacity: 0;
                    transform: scale(0) translate(0, 0);
                }
                50% {
                    opacity: 1;
                    transform: scale(1) translate(-300px, 300px);
                }
                100% {
                    opacity: 0;
                    transform: scale(1) translate(-600px, 600px);
                }
            }
            @keyframes starYellow {
                0% {
                    opacity: 0;
                    transform: scale(0) translate(0, 0);
                }
                50% {
                    opacity: 1;
                    transform: scale(1) translate(-300px, 300px);
                }
                100% {
                    opacity: 0;
                    transform: scale(1) translate(-600px, 600px);
                }
            }
        </style>
    </head>
    <body>
        <span class=”author”>by Scott</span> <span class=”star”></span>
        <span class=”star blue”></span> <span class=”star pink”></span>
        <span class=”star yellow”></span>
    </body>
</html>
游戏开发前端薪资
开发狼人杀游戏前端
前端开发 游戏
赞(0)
前端开发者 » 前端开发纯CSS3流星雨
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论