您现在的位置是:首页 > Javascript
当前栏目
纯CSS:动态渐变背景【一分钟学会】
2023-04-18 14:43:12 时间
前言
先看看最终效果
这个效果非常简单,只要看完实现原理应该就是有思路了。
?️原理
- 规定好容器尺寸
- 设置渐变背景:
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>
复制代码
?奇思妙想
本例如果不用动画自动播放,可以结合鼠标移动做交互参考系。
通过鼠标当前所在位置控制背景色的渐变效果。
相关文章
- Spring Boot 模块驱动
- SpringBoot 整合 ZXing 步骤详解
- nodejs 框架排名
- 严格模式 – JavaScript
- 根据枚举类型生成前端的js变量
- 判断浏览器的js代码
- 配置SpringSecurity前台后台登录处理
- Word 转成HTML
- 一图讲解 uni-app、vue两种框架跨域请求
- 自创-在uniapp使用全局变量
- SystemUI 开发之启动流程(一)
- SystemUI 开发之服务组件概览(二)
- SystemUI 开发之通知 Notification 的关键 API(三)
- VUE实现的一个简单分页表格
- react 条件分支组件
- JS学习笔记
- js打开新页面
- 天下风云出我辈:Servlet
- IDC预测到2025年美国在人工智能支出将翻倍
- 最全网站日志分析攻略,全面解析百度蜘蛛!