HTML+ CSS实现动态背景渐变

最新推荐文章于 2022-04-12 23:30:20 发布

淘淘是只狗

最新推荐文章于 2022-04-12 23:30:20 发布

阅读量4k

点赞数 4

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_43477721/article/details/105716921

版权

CSS 专栏收录该内容

26 篇文章 6 订阅

订阅专栏

视频来源👉👉👉： B站地址

<!DOCTYPE html>
<html lang="en" dir="ltr" style="width: 100%; height: 100%;">

<head>
  <meta charset="utf-8">
  <title></title>
  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: "montserrat";
      background-image: linear-gradient(125deg, #2c3e50, #27ae60, #2980b9, #e74c3c, #8e44ad);
      background-size: 400%;
      animation: bganimation 15s infinite;
    }

    .text {
      color: white;
      text-align: center;
      text-transform: uppercase;
      margin: 300px 0;
      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">
    Hello World
  </div>
</body>

</html>

在这里插入图片描述
关注公众号：大明贵妇，无套路获取前端学习资料，期待各位客官来临

淘淘是只狗

关注

4
点赞
踩
29

收藏

觉得还不错? 一键收藏
0
评论
HTML+ CSS实现动态背景渐变

B站地址 https://www.bilibili.com/video/BV1St411P7ef/?spm_id_from=333.788.videocard.6<!DOCTYPE html><html lang="en" dir="ltr" style="width: 100%; height: 100%;"> <head> <meta ...
复制链接

扫一扫