虚位以待,此位置招租
虚位以待,此位置招租
虚位以待,此位置招租
虚位以待,此位置招租
虚位以待,此位置招租
虚位以待,此位置招租
NexaHub聚合登录 阿里云服务器 99元/年 大流量卡 - 免开卡,免运费 172 - 大流量卡 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租
输入验证码,即可复制
扫描二维码输入:jiuge,即可获取验证码
只需要3秒时间
返回列表 发布新帖

[网站源码] 分享三个不错的css动态渐变背景

143 0
发表于 2025-1-6 12:24:14 | 查看全部 阅读模式

第一个


微信截图_20250106121509.png
body:before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -520;
    pointer-events: none
}

body:before {
    background: linear-gradient(90deg,#f795331a,#f370551a 15%,#ef4e7b1a 30%,#a166ab1a,#5073b81a,#1098ad1a,#07b39b1a 86%,#6dba821a)
}

第二个


微信截图_20250106122240.png
body {
  margin: 0;
  min-height: 100vh;
  background-color: #e493d0;
  background-image: 
    radial-gradient(closest-side, rgba(235, 105, 78, 1), rgba(235, 105, 78, 0)),
    radial-gradient(closest-side, rgba(243, 11, 164, 1), rgba(243, 11, 164, 0)),
    radial-gradient(closest-side, rgba(254, 234, 131, 1), rgba(254, 234, 131, 0)),
    radial-gradient(closest-side, rgba(170, 142, 245, 1), rgba(170, 142, 245, 0)),
    radial-gradient(closest-side, rgba(248, 192, 147, 1), rgba(248, 192, 147, 0));
  background-size: 
    130vmax 130vmax,
    80vmax 80vmax,
    90vmax 90vmax,
    110vmax 110vmax,
    90vmax 90vmax;
  background-position:
    -80vmax -80vmax,
    60vmax -30vmax,
    10vmax 10vmax,
    -30vmax -10vmax,
    50vmax 50vmax;
  background-repeat: no-repeat;
  animation: 10s movement linear infinite;
}

@keyframes movement {
  0%, 100% {
    background-size: 
      130vmax 130vmax,
      80vmax 80vmax,
      90vmax 90vmax,
      110vmax 110vmax,
      90vmax 90vmax;
    background-position:
      -80vmax -80vmax,
      60vmax -30vmax,
      10vmax 10vmax,
      -30vmax -10vmax,
      50vmax 50vmax;
  }
  25% {
    background-size: 
      100vmax 100vmax,
      90vmax 90vmax,
      100vmax 100vmax,
      90vmax 90vmax,
      60vmax 60vmax;
    background-position:
      -60vmax -90vmax,
      50vmax -40vmax,
      0vmax -20vmax,
      -40vmax -20vmax,
      40vmax 60vmax;
  }
  50% {
    background-size: 
      80vmax 80vmax,
      110vmax 110vmax,
      80vmax 80vmax,
      60vmax 60vmax,
      80vmax 80vmax;
    background-position:
      -50vmax -70vmax,
      40vmax -30vmax,
      10vmax 0vmax,
      20vmax 10vmax,
      30vmax 70vmax;
  }
  75% {
    background-size: 
      90vmax 90vmax,
      90vmax 90vmax,
      100vmax 100vmax,
      90vmax 90vmax,
      70vmax 70vmax;
    background-position:
      -50vmax -40vmax,
      50vmax -30vmax,
      20vmax 0vmax,
      -10vmax 10vmax,
      40vmax 60vmax;
  }
}

第三个


微信截图_20250106122342.png
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  overflow:scroll;
  overflow-x:hidden;
  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%;
  }
}

免责声明

本社区仅提供信息交流平台,帖子内容由用户自行发布,不代表社区立场。用户对发布内容负全责,包括版权、隐私、诽谤等,社区不承担因使用社区内容导致的损失。禁止发布侵权、隐私信息,发现侵权请联系我们。社区不负责第三方内容,用户因访问第三方内容产生的损失,社区不担责。用户须遵守规则和法律,不得发布违法、不当内容,违规内容将被删除。发表帖子即同意本声明,不同意请勿发帖。


特别提醒:网络空间并非法外之地,请广大用户自觉遵守法律法规,共同营造健康、文明、有序的网络环境。

本社区运营团队

联系我们: 如有疑问或发现违规行为,请联系管理员:kefu@foxccs.com

远方路灯明灭,银河倾斜,一斛星斗洒满天街。

回复

快捷回复: 经历想经历的,成为想成为的 - 九歌社区
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

投诉/建议联系

jiubbs2025@163.com

未经授权禁止转载,复制和建立镜像,
如有违反,追究法律责任
  • QQ交流群
  • 微信公众号
Copyright © 2001-2025 九歌社区 版权所有 All Rights Reserved.

手机版|小黑屋|帮助|九歌社区   |   GMT+8, 2025-4-2 19:26 , Processed in 0.234965 second(s), 39 queries .

关灯 在本版发帖
扫一扫添加微信客服
手机扫一扫访问
返回顶部
快速回复 返回顶部 返回列表