纯CSS：动态渐变背景【一分钟学会】
theme: smartblue
🎈前言
点赞 + 收藏 = 学会了
🐱👓代码仓库
这个效果非常简单，只要看完实现原理应该就是有思路了。
🎗️原理
- 规定好容器尺寸
- 设置渐变背景：
background: linear-gradient(...)自己设置角度和颜色吧 - 设置背景尺寸比容器大几倍：
background-size: 600% 600%; - 搞个循环动画，控制背景移动：
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>🤯奇思妙想
本例如果不用动画自动播放，可以结合鼠标移动做交互参考系。
通过鼠标当前所在位置控制背景色的渐变效果。
这大概也是视差效果的一种吧，可以结合 《视差特效的原理和实现方法》 的原理实现。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2021/12/11 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
相关产品与服务
容器服务
腾讯云容器服务（Tencent Kubernetes Engine, TKE）基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务，覆盖 Serverless、边缘计算、分布式云等多种业务部署场景，业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者，主导开源项目Crane，全面助力客户实现资源优化、成本控制。