一个小玩意

最新推荐文章于 2022-09-08 15:06:32 发布

原创最新推荐文章于 2022-09-08 15:06:32 发布 · 217 阅读

CC 4.0 BY-SA版权

本文通过一个简单的示例，展示了如何使用HTML和CSS来创建具有炫彩闪烁效果的文字动画。通过定义关键帧动画，实现了文字颜色在蓝色和粉色之间的交替闪烁，为网页增添了一抹生动的色彩。

<!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>