css动画之关键帧动画

最新推荐文章于 2024-05-13 14:34:46 发布

ITBestBai

最新推荐文章于 2024-05-13 14:34:46 发布

阅读量650

点赞数

本文链接：https://blog.csdn.net/qq_40015237/article/details/78053569

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        /*p的关键帧动画*/
        p {
            font-size: 35px;
            align-content: center;
            animation: light 3s linear infinite;
        }

        @keyframes light {
            0% {
                text-shadow: 0 0 0 #fff;
            }
           25% {
                text-shadow: 0 0 10px red;
            }
           50% {
                text-shadow: 0 0 30px blue;
            }
            75% {
                text-shadow: 0 0 10px red;
            }
            100% {
                text-shadow: 0 0 0 #fff ;
            }

        }
        /*box的关键帧动画*/
        .box {
            width: 200px;
            height: 200px;
            background: blue;
            animation: run 2s ease infinite;
            animation-fill-mode: forwards;
        }


        @keyframes run {

            0% {
                width: 200px;
            }
            25% {
                width: 300px;
            }
            50% {
                width: 500px;
            }
            100% {
                width: 300px;
                opacity: 0.3;
            }

        }
        /*shan的关键帧动画*/
        .shan{
            width: 100%;
            height: 20px;
            background: blue;
            animation: shan 2s ease infinite;

        }
        @keyframes shan {
            0%{
                background: yellow;
            }
            50%{
                background: green;
            }
            100%{
                background: yellow;
            }
        }
    </style>
</head>
<body>
<div class="box"></div>
<p>kaljfal</p>
<div class="shan"></div>
</body>
</html>

ITBestBai

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css动画之关键帧动画

html>html lang="en">head> meta charset="UTF-8"> title>Titletitle> style> * { margin: 0; padding: 0; } /*p的关键帧动画*/ p {
复制链接

扫一扫