漫川
Manchuan

每天都是更好的自己

漫川的学习笔记

HTML+ CSS实现动态背景渐变

2024-05-10 21 0

🎈前言

点赞 + 收藏 = 后期方便查找!

先看看最终效果

这个效果非常简单,只要看完实现原理应该就是有思路了。

🎗️原理

  1. 规定好容器尺寸
  2. 设置渐变背景: background: linear-gradient(...) 自己设置角度和颜色吧
  3. 设置背景尺寸比容器大几倍:background-size: 600% 600%;
  4. 搞个循环动画,控制背景移动:background-position

👊示例

<!-- 容器 -->
<div class="gradient"></div>

<style>
  .gradient {
    /* 设置容器尺寸 - 原理1 */
    width: 400px;
    height: 400px;
    /* 背景渐变色 - 原理2 */
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    /* 背景尺寸 - 原理3 */
    background-size: 600% 600%;
    /* 循环动画 - 原理4 */
    animation: gradientBG 5s ease infinite;
  }

  /* 动画,控制背景 background-position */
  @keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
  }
</style>
声明:本文由漫川发布,本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

发布评论

 MANCHUAN BLOG