CSS3实现渐变背景动画特效

讲台催眠师明哥

已于 2022-03-22 05:13:53 修改

阅读量2.1k

点赞数 1

文章标签： CSS3动画渐变背景山月剧明哥前端有趣的案例 HTML

于 2022-03-21 21:39:23 首次发布

本文为明哥原创文章，未经本文博主允许不得转载，否则将追究法律责任

本文链接：https://blog.csdn.net/weixin_40845165/article/details/123647066

版权

效果图：

具体实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>渐变背景动画</title>
    <style>

        body{
            height: 100vh;
            width: 100vw;
            margin: 0;
            padding: 0;
            font-family: "montserrat";
            background-image: linear-gradient(45deg,#2c3e50,#27ae60,#2980b9,#e74c3c,#8e44ad);
            background-size: 400%;
            animation: bganimation 15s infinite;
        }

        .text{
            color: white;
            text-align: center;
            text-transform: uppercase;
            padding: 30vh;
            font-size: 22px;
        }

        @keyframes bganimation {
            0%{
                background-position: 0% 50%;
            }
            50%{
                background-position: 100% 50%;
            }
            100%{
                background-position: 0% 50%;
            }
        }
    </style>
</head>
<body>
<div class="text">
    实现渐变背景动画
    <br />
    山月剧
</div>
</body>
</html>

优惠劵

讲台催眠师明哥

关注关注

1
点赞
踩
19

收藏

觉得还不错? 一键收藏
打赏
1
评论
CSS3实现渐变背景动画特效

效果图：具体实现代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>渐变背景动画</title> <style> body{ height: 100vh; width: 100vw; margin:
复制链接

扫一扫