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实现图片翻牌特效
Mar 10 HTML / CSS
详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
Dec 20 HTML / CSS
CSS3 分类菜单效果
May 27 HTML / CSS
让IE支持HTML5的方法
Dec 11 HTML / CSS
html5文字阴影效果text-shadow使用示例
Jul 25 HTML / CSS
HTML5 placeholder(空白提示)属性介绍
Aug 07 HTML / CSS
HTML5的语法变化介绍
Aug 13 HTML / CSS
HTML5 创建canvas元素示例代码
Jun 04 HTML / CSS
使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例
Mar 22 HTML / CSS
Html5之title吸顶功能
Jun 04 HTML / CSS
canvas像素点操作之视频绿幕抠图
Sep 11 HTML / CSS
amazeui模态框弹出后立马消失并刷新页面
Aug 19 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
thinkphp实现附件上传功能
2017/05/26 PHP
laravel实现按月或天或小时统计mysql数据的方法
2019/10/09 PHP
ExtJS 设置级联菜单的默认值
2010/06/13 Javascript
JavaScript面向对象程序设计三 原型模式(上)
2011/12/21 Javascript
div失去焦点事件实现思路
2014/04/22 Javascript
JavaScript设计模式之抽象工厂模式介绍
2014/12/28 Javascript
JavaScript简单下拉菜单实例代码
2015/09/07 Javascript
AngularJs 60分钟入门基础教程
2016/04/03 Javascript
JavaScipt选取文档元素的方法(推荐)
2016/08/05 Javascript
javascript实现多张图片左右无缝滚动效果
2017/03/22 Javascript
ES6学习教程之对象的扩展详解
2017/05/02 Javascript
JavaScript多态与封装实例分析
2018/07/27 Javascript
一篇文章介绍redux、react-redux、redux-saga总结
2019/05/23 Javascript
小程序瀑布流组件实现翻页与图片懒加载
2020/05/19 Javascript
[02:41]DOTA2亚洲邀请赛小组赛第三日 赛事回顾
2015/02/01 DOTA
python使用xauth方式登录饭否网然后发消息
2014/04/11 Python
一键搞定python连接mysql驱动有关问题(windows版本)
2016/04/23 Python
Python 爬虫之超链接 url中含有中文出错及解决办法
2017/08/03 Python
Python Nose框架编写测试用例方法
2017/10/26 Python
使用python根据端口号关闭进程的方法
2018/11/06 Python
python pands实现execl转csv 并修改csv指定列的方法
2018/12/12 Python
python对于requests的封装方法详解
2019/01/03 Python
python程序中的线程操作 concurrent模块使用详解
2019/09/23 Python
如何在VSCode上轻松舒适的配置Python的方法步骤
2019/10/28 Python
Python操作MySQL数据库的示例代码
2020/07/13 Python
如何在pycharm中安装第三方包
2020/10/27 Python
用CSS3实现Win8风格的方格导航菜单效果
2013/04/10 HTML / CSS
迪拜航空官方网站:flydubai
2017/04/20 全球购物
时尚孕妇装:HATCH Collection
2019/09/24 全球购物
汉米尔顿手表官网:Hamilton
2020/09/13 全球购物
HashMap和Hashtable的区别
2013/05/18 面试题
AOP的定义以及作用
2013/09/08 面试题
社区敬老月活动实施方案
2014/02/17 职场文书
2014年乡镇植树节活动方案
2014/02/28 职场文书
《孔繁森》教学反思
2014/04/17 职场文书
销售经理助理岗位职责
2015/04/13 职场文书