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进行截取替代js的substring
Sep 02 HTML / CSS
CSS中垂直居中的简单实现方法
Jul 06 HTML / CSS
全方位了解CSS3的Regions扩展
Aug 07 HTML / CSS
详解CSS3的perspective属性设置3D变换距离的方法
May 23 HTML / CSS
使用纯 CSS 创作一个脉动 loader效果的源码
Sep 28 HTML / CSS
CSS3实现红包抖动效果
Dec 23 HTML / CSS
HTML5中indexedDB 数据库的使用实例
May 11 HTML / CSS
html5使用canvas实现弹幕功能示例
Sep 11 HTML / CSS
HTML5新特性之语义化标签
Oct 31 HTML / CSS
关于canvas绘制模糊问题的解决方法
Sep 24 HTML / CSS
HTML基础-标签分类(闭合标签,空标签,块级元素,行内元素,行级块元素,可替换元素)
Mar 31 HTML / CSS
CSS+HTML 实现顶部导航栏功能
Aug 30 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
肝肠寸断了解下!盘点史上最伤心的十大动漫
2020/03/04 日漫
PHP 压缩文件夹的类代码
2009/11/05 PHP
在Windows下编译适用于PHP 5.2.12及5.2.13的eAccelerator.dll(附下载)
2010/05/04 PHP
PHP输出数组中重名的元素的几种处理方法
2012/09/05 PHP
php限制文件下载速度的代码
2015/10/20 PHP
In Javascript Class, how to call the prototype method.(three method)
2007/01/09 Javascript
javascript拓展DOM操作 prependChild insertAfert
2010/11/17 Javascript
jQuery 源码分析笔记(6) jQuery.data
2011/06/08 Javascript
js写一个字符串转成驼峰的实例
2013/06/21 Javascript
jQuery获取样式中颜色值的方法
2015/01/29 Javascript
JavaScript制作简易的微信打飞机
2015/03/31 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
2015/09/14 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
2016/06/17 Javascript
AngularJS服务service用法总结
2016/12/13 Javascript
AngularJS 实现购物车全选反选功能
2017/10/24 Javascript
jQuery实现动态加载select下拉列表项功能示例
2018/05/31 jQuery
详解Koa中更方便简单发送响应的方式
2018/07/20 Javascript
js中值引用和地址引用实例分析
2019/06/21 Javascript
Node.js实现简单管理系统
2019/09/23 Javascript
Javascript地址引用代码实例解析
2020/02/25 Javascript
JS中的变量作用域(console版)
2020/07/18 Javascript
利用JS判断元素是否为数组的方法示例
2021/01/08 Javascript
简单讲解Python编程中namedtuple类的用法
2016/06/21 Python
Python多线程threading模块用法实例分析
2019/05/22 Python
django框架实现一次性上传多个文件功能示例【批量上传】
2019/06/19 Python
详解python中的index函数用法
2019/08/06 Python
opencv3/C++ 平面对象识别&amp;透视变换方式
2019/12/11 Python
python中count函数简单的实例讲解
2020/02/06 Python
如何使用Django Admin管理后台导入CSV
2020/11/06 Python
StubHub墨西哥:购买和出售您的门票
2016/09/17 全球购物
英国网上花店:Bunches
2016/11/29 全球购物
美国流行背包品牌:JanSport(杰斯伯)
2018/03/02 全球购物
世界排名第一的万圣节服装店:Spirit Halloween
2018/10/16 全球购物
物流仓储计划书
2014/01/10 职场文书
大学生创业计划书
2014/08/14 职场文书
办理房产证委托书
2014/09/18 职场文书