css3实现背景动态渐变效果


Posted in HTML / CSS onDecember 10, 2019

对于css3的学习,更多的是在于对新特性和基础理论的熟悉,这篇文章通过一个案例带领大家了解css3里一些理论知识,也将一些技巧加以总结,从而提高大家的开发效率;

css3实现背景动态渐变效果

本次案例为(背景颜色渐变),运用css3就能实现背景颜色渐变的效果;

HTML部分:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> 渐变——天际线</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
   <div class="text">
      渐变——天际线
    </div>
</body>
</html>

实现背景颜色渐变不需要在HTML(结构)部分做任何操作 这里加了一行字,方便显示效果;

CSS部分:

body{
  margin: 0;
  padding: 0;
  font-family: "montserrat";
  background-image: linear-gradient(125deg,#E4FFCD,#6DD5FA,#2980B9,#E4FFCD);  background-size: 400%;
  animation: bganimation 15s infinite;
}

.text{
  color: white;
  text-align: center;
  text-transform: uppercase;
  margin: 400px 0;
  font-size: 22px;
}

@keyframes bganimation {
  0%{
    background-position: 0% 50%;
  }
  50%{
    background-position: 100% 50%;
  }
  100%{
    background-position: 0% 50%;
  }
}

要点:

一部分内容在之前的(水纹波动)以及提到过:https://3water.com/css/672226.html

 background-image: linear-gradient();  

         linear-gradient() 函数用于创建一个线性渐变的 "图像"。为了创建一个线性渐变,你需要设置一个起始点和一个方向(指定为一个角度)的渐变效果。你还要定义终止色。终止色就是你想让Gecko去平滑的过渡,并且你必须指定至少两种,当然也会可以指定更多的颜色去创建更复杂的渐变效果。

其中的“125deg” 是设置渐变的倾斜角度;

background-position:

属性设置背景图像的起始位置。  

也可以试试这种桌布渐变:

background:white;
background-image: linear-gradient(90deg,
                  rgba(200,0,0,.5) 50%, transparent 0),
                  linear-gradient( 
                  rgba(200,0,0,.5) 50%, transparent 0);
background-size: 30px 30px;

总结

以上所述是小编给大家介绍的css3实现背景动态渐变效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

HTML / CSS 相关文章推荐
CSS3媒体查询(Media Queries)介绍
Sep 12 HTML / CSS
基于CSS3制作立体效果导航菜单
Jan 12 HTML / CSS
利用CSS3 动画 绘画 圆形动态时钟
Mar 20 HTML / CSS
css3实现椭圆轨迹旋转的示例代码
Oct 29 HTML / CSS
详解HTML5中垂直上下居中的解决方案
Dec 20 HTML / CSS
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
Jan 08 HTML / CSS
html5中地理位置定位api接口开发应用小结
Jan 04 HTML / CSS
浅谈HTML5 Web Worker的使用
Jan 05 HTML / CSS
高清屏下canvas重置尺寸引发的问题的解决
Oct 14 HTML / CSS
amaze ui 的使用详细教程
Aug 19 HTML / CSS
简洁自适应404页面HTML好看的404源码
Dec 16 HTML / CSS
血轮眼轮回眼特效 html+css
Mar 31 HTML / CSS
css3动画 小球滚动 js控制动画暂停
Nov 29 #HTML / CSS
CSS3实现酷炫的3D旋转透视效果
Nov 21 #HTML / CSS
CSS实现半透明边框与多重边框的场景分析
Nov 13 #HTML / CSS
CSS3 新增选择器的实例
Nov 13 #HTML / CSS
CSS3制作轮播图的一种方法
Nov 11 #HTML / CSS
CSS3实现图片抽屉式效果的示例代码
Nov 06 #HTML / CSS
css3给背景图片加颜色遮罩的方法
Nov 05 #HTML / CSS
You might like
深入php list()函数的详解
2013/06/05 PHP
yii操作session实例简介
2014/07/31 PHP
php递归创建目录的方法
2015/02/02 PHP
Laravel 5框架学习之路由、控制器和视图简介
2015/04/07 PHP
微信自定义菜单的处理开发示例
2015/04/16 PHP
symfony2.4的twig中date用法分析
2016/03/18 PHP
Javascript下判断是否为闰年的Datetime包
2010/10/26 Javascript
jquery常用操作小结
2014/07/21 Javascript
jQuery中insertAfter()方法用法实例
2015/01/08 Javascript
javascript十六进制及二进制转化的方法
2015/05/06 Javascript
4种JavaScript实现简单tab选项卡切换的方法
2016/01/06 Javascript
jQuery点击输入框显示验证码图片
2016/05/19 Javascript
什么是JavaScript注入攻击?
2016/09/14 Javascript
NodeJs读取JSON文件格式化时的注意事项
2016/09/25 NodeJs
Node.js测试中的Mock文件系统详解
2016/11/21 Javascript
Angularjs修改密码的实例代码
2017/05/26 Javascript
angular内置provider之$compileProvider详解
2017/09/27 Javascript
使用vue-cli编写vue插件的方法
2018/02/26 Javascript
详解React之父子组件传递和其它一些要点
2018/06/25 Javascript
vue实现日历备忘录功能
2020/09/24 Javascript
微信小程序实现上传照片代码实例解析
2020/08/04 Javascript
python脚本监控docker容器
2016/04/27 Python
Python实现Smtplib发送带有各种附件的邮件实例
2017/06/05 Python
Python 3中print函数的使用方法总结
2017/08/08 Python
win8下python3.4安装和环境配置图文教程
2018/07/31 Python
使用Python 统计高频字数的方法
2019/01/31 Python
python3+selenium自动化测试框架详解
2019/03/17 Python
pytorch中使用cuda扩展的实现示例
2020/02/12 Python
Vans英国官方网站:美国南加州的原创极限运动潮牌
2017/01/20 全球购物
美工的岗位职责
2013/11/14 职场文书
施工员岗位职责
2014/03/16 职场文书
《真想变成大大的荷叶》教学反思
2014/04/14 职场文书
研究生导师推荐信
2014/09/06 职场文书
乡镇群众路线整改落实情况汇报
2014/10/28 职场文书
2016教师党员学习心得体会
2016/01/21 职场文书
python中的getter与setter你了解吗
2022/03/24 Python