一个小玩意

最新推荐文章于 2019-03-21 19:46:29 发布

米夏Offical

最新推荐文章于 2019-03-21 19:46:29 发布

阅读量155

点赞数 1

本文链接：https://blog.csdn.net/ghode_dave/article/details/81748818

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我好菜啊</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style>
    #scene{
        position: relative;
        width: 400px;
        height: 400px;
        background-color: #000;
        color:#fff;
        text-align: center;
        font-weight: 700;
        font-size: 72px;
    }
    #scene div.layer{
        width:400px;
        height: 100px;
        position: absolute;
        margin:auto;
        left:0;
        right:0;
        top:0;
        bottom:0;
    }
    .blueFlash{
        color: rgb(1, 205, 232);
        -webkit-animation: blueFlash .9s infinite both;
    }

    .pinkFlash{
        color: rgb(255, 37, 233);
        -webkit-animation: pinkFlash .9s infinite both;
    }

    @-webkit-keyframes pinkFlash{
        0%{
            opacity:0;
            transform: matrix(1, 0, 0, 1, 0, 0);
        }
        62.5%{
            opacity:0;
            transform: matrix(1, 0, 0, 1, 2, 2);
        }
        75%{
            opacity:0;
            transform: matrix(1, 0, 0, 1, 3, 3);
        }
        87.5%{
            opacity:1;
            transform: matrix(1, 0, 0, 1, 4, 4);
        }
        100%{
            opacity:0;
            transform: matrix(1, 0, 0, 1, 0, 0);
        }

    }
    @-webkit-keyframes blueFlash{
        0%{
            opacity:0;
            transform: matrix(1, 0, 0, 1, 0, 0);
        }
        12.5%{
            opacity:0;
            transform: matrix(1, 0, 0, 1, 2, 2);
        }
        25%{
            opacity:0;
            transform: matrix(1, 0, 0, 1, 3, 3);
        }
        37.5%{
            opacity:1;
            transform: matrix(1, 0, 0, 1, 4, 4);
        }
        50%{
            opacity:0;
            transform: matrix(1, 0, 0, 1, -1, -1);
        }
        62.5%{
            opacity:0;
            transform: matrix(1, 0, 0, 1, -2, -2);
        }
        75%{
            opacity:0;
            transform: matrix(1, 0, 0, 1, -3, -3);
        }
        87.5%{
            opacity:1;
            transform: matrix(1, 0, 0, 1, -4, -4);
        }
        100%{
            opacity:0;
            transform: matrix(1, 0, 0, 1, 0, 0);
        }
    }

</style>
</head>
<body>
    <div id="scene">
        <div class="layer">
            <div class="text_holder pinkFlash">我好菜啊</div>
        </div>
        <div class="layer">
            <div class="text_holder blueFlash">我好菜啊</div>
        </div>
        <div class="layer">
            <div class="text_holder">我好菜啊</div>
        </div>
    </div>
</body>
</html>

米夏Offical

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一个小玩意

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;title&gt;我好菜啊&lt;/title&gt;&lt;meta name="description" content=""&gt;&lt;meta name=
复制链接

扫一扫