微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程
游戏教程 自媒体 新闻
首页 > web前端 > css教程 > 正文

CSS 实现背景动态渐变效果

Guanhui
发布： 2020-06-04 13:14:34
转载
2642人浏览过

CSS 实现背景动态渐变效果

效果图

微信截图_20200604131144.png

CSS 代码：

火龙果写作
火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

火龙果写作 106
查看详情 火龙果写作 
*{
    margin: 0;
    padding: 0;
}

body{
    height: 100vh;
    width: 100%;
    overflow: hidden;
    background-image: linear-gradient(125deg,#F44336,#E91E63,#9C27B0,#3F51B5,#2196F3);
    background-size: 400%;
    font-family: "montserrat";
    animation: bganimation 15s infinite;
}

.text{
    color: #fff;
    font-size: 22px;
    text-align: center;
    margin: 350px 0;
    /* text-transform: uppercase; */
}

@keyframes bganimation{
    0%{
        background-position: 0% 50%;
    }
    50%{
        background-position: 100% 50%;
    }
    100%{
        background-position: 0% 50%;
    }
}
登录后复制

推荐教程：《CSS教程》

立即学习“前端免费学习笔记（深入）”；

以上就是CSS 实现背景动态渐变效果的详细内容，更多请关注php中文网其它相关文章！

相关标签：
css

大家都在看：

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

下载
来源：zhuanlan网
收藏 点赞
上一篇：CSS3圆角边框实现百度首页搜索界面效果-案例解析（代码实例 ） 下一篇：css实现文本溢出时显示省略号
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
CSS分组选择器的作用是什么_让样式表更简洁高效的技巧 分组选择器通过逗号合并多个选择器，共享相同样式规则，如h1,h2,p{color:#333;}，减少重复代码；修改时只需调整一处，提升维护效率；按功能分组（如.btn,.submit-btn）增强可读性，但需避免过度分组导致样式耦合。
2025-11-06 00:51:34
999
Flexbox中align-self属性如何使用_单个子元素对齐控制 align-self用于单独控制Flex子元素在交叉轴的对齐方式，可覆盖align-items设置。其值包括auto、flex-start、flex-end、center、baseline和stretch。例如容器设align-items:center时，某子项设align-self:flex-start则该子项靠上对齐，其余居中不变。适用于需差异化对齐的场景，如卡片文字底部对齐、导航按钮顶部对齐等，是微调布局的关键工具。
2025-11-05 23:52:02
200
CSS浮动和grid布局能一起用吗_布局模式混合使用方法 可以，CSS浮动和Grid布局能一起使用。Grid负责整体二维结构布局，而浮动可用于网格项内的内容层，如文本环绕图片，但浮动不影响网格项本身的定位。
2025-11-05 23:48:02
993
如何用css设置元素边框样式border solid dashed CSS通过border属性设置边框，语法为border:宽度样式颜色；2.常用样式包括solid实线、dashed虚线、dotted点线、none无边框；3.可整体设置如div{border:2pxsolidred}创建红色实线边框；4.或单独设置某一边如border-top:2pxsolidblack；5.关键是灵活运用样式值控制边框外观。
2025-11-05 23:33:03
760
如何使用CSS实现响应式图片画廊_Flex/Grid与媒体查询结合 响应式图片画廊可通过CSSGrid或Flexbox结合媒体查询实现。1.使用Grid时，.gallery设置display:grid和grid-template-columns:repeat(auto-fit,minmax(200px,1fr))，实现自动换行与等分布局；2.使用Flexbox时，.gallery设为display:flex并启用flex-wrap:wrap，子项设flex:11200px以实现弹性伸缩；3.配合媒体查询，在不同屏幕宽度下调整列数与间隙，如小屏设为单列（1fr），
2025-11-05 23:00:07
471
如何用css调整盒模型解决溢出滚动问题 使用box-sizing:border-box可避免元素溢出，结合overflow控制溢出行为，在flex布局中设置min-width:0和flex-shrink确保子元素可压缩，从而防止布局错位。
2025-11-05 22:59:16
576
css响应式图片自适应宽度技巧 设置img{max-width:100%;height:auto;}可使图片自适应容器且保持宽高比；2.图片应置于弹性或百分比宽度的父容器中以增强响应性；3.避免固定尺寸设置，优先使用Flex/Grid布局；4.背景图可用background-size:cover或contain配合background-position:center实现自适应；5.结合媒体查询优化不同设备的显示效果。
2025-11-05 22:55:02
822
CSS定位与flex布局结合使用技巧_混合布局优化方案 使用Flex构建主结构，通过position处理弹窗、角标等覆盖元素；2.在Flex子项中嵌套相对定位容器，内部用绝对定位实现下拉菜单等动态对齐；3.外层Flex实现自适应布局，内部结合fixed或absolute定位添加按钮或遮罩；4.响应式中Flex控制整体排列，定位配合transform实现滑入动画；关键在于Flex负责流动与对齐，定位负责精确与覆盖，分层协作提升布局灵活性。
2025-11-05 22:46:02
246
Flex容器的主轴方向如何调整_flex-direction属性使用技巧 flex-direction属性决定Flex容器主轴方向，默认为row（水平从左到右），可选row-reverse（水平从右到左）、column（垂直从上到下）、column-reverse（垂直从下到上）；横向布局如导航栏用row，纵向布局如菜单用column，倒序内容如聊天记录用column-reverse；主轴方向改变后，justify-content相应调整主轴对齐，align-items控制交叉轴对齐，配合使用可高效实现灵活布局。
2025-11-05 22:34:02
483
如何通过css实现卡片背景渐变过渡 实现卡片背景渐变过渡需设置基础渐变背景，使用linear-gradient定义初始颜色并配置background-size与background-repeat；通过transition设定过渡动画；在:hover状态改变渐变方向或颜色，保持语法一致以避免跳变；优化transition时间和缓动函数为ease-in-out，并配合box-shadow变化增强视觉反馈，最终实现平滑自然的渐变效果。
2025-11-05 22:30:02
863
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部