web前端，用关键帧@keyframe技术实现炫酷的背景配色源代码

最新推荐文章于 2024-06-20 23:28:37 发布

Pink&Sakura

最新推荐文章于 2024-06-20 23:28:37 发布

阅读量765

点赞数

分类专栏： Web前端文章标签： css javascript html html5

本文链接：https://blog.csdn.net/galaxyrt/article/details/117570341

版权

Web前端专栏收录该内容

23 篇文章 6 订阅

订阅专栏

下面试源代码：

效果图：

下面是源代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      body {
        width: 100vw;
        height: 100vh;
        background: linear-gradient(
          135deg,
          hsl(170deg, 80%, 70%),
          hsl(190deg, 80%, 70%),
          hsl(250deg, 80%, 70%),
          hsl(320deg, 80%, 70%)
        );
        background-size: 200% 200%;
        animation: gradient-move 15s ease alternate infinite;
      }

      @keyframes gradient-move {
        0% {
          background-position: 0% 0%;
        }
        100% {
          background-position: 100% 100%;
        }
      }
    </style>
  </head>
  <body></body>
</html>

下面让我来介绍一下代码原理：

假设背景有两种界面色，每一种界面色有两种颜色组成，我们将这四种颜色直接写到linear-gradient中，一开始她会显示四种界面颜色，这时我们使用background-size在x和y轴上把背景颜色调到原来的两倍然后在背景颜色中使用background-position来移动背景位置，在x和y轴上分别从百分之零移动到百分之百，这样就实现了背景颜色的动画效果了

Pink&Sakura

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
web前端，用关键帧@keyframe技术实现炫酷的背景配色源代码

下面试源代码：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> * {
复制链接

扫一扫