最全的CSS渐变解析

最新推荐文章于 2024-08-21 09:04:44 发布
最新推荐文章于 2024-08-21 09:04:44 发布
阅读量1.1k 收藏 3
点赞数 5
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45768871/article/details/105595016
版权

文章目录

最全的CSS渐变解析

线性渐变

为了创建一个线性渐变，你需要设置一个起始点和一个方向（指定为一个角度）。你还要定义终止色。终止色就是你想让浏览器去平滑的过渡过去，并且你必须指定至少两种，当然也会可以指定更多的颜色去创建更复杂的渐变效果。

-默认从上到下发生渐变

  linear-gradient(red,blue);

-改变渐变方向：（top bottom left right）

  linear-gradient(to 结束的方向,red,blue);

-使用角度

linear-gradient(角度,red,blue);
在这里插入图片描述

 background-image: linear-gradient(45deg, red, yellow);

在这里插入图片描述

 background-image: linear-gradient(-45deg, red, yellow, green);

在这里插入图片描述

-颜色节点的分布（第一个不写为0%，最后一个不写为100%）
linear-gradient(red 长度或者百分比,blue 长度或者百分比);
百分百，长度，表示从该位置开始渐变

background-image:linear-gradient(90deg,red 10%,yellow 20%,green 30%) ;

在这里插入图片描述

background-image: linear-gradient(90deg, red 100px, yellow 100px, green 100px);

在这里插入图片描述
注意：黄色区域被绿色覆盖

background-image: linear-gradient(90deg, red 100px, yellow 150px);

在这里插入图片描述
此时100px -->150px是渐变

透明度渐变

 background-image: linear-gradient(45deg, rgba(218, 25, 185, 0.2), yellow, green);

背景为黑时
在这里插入图片描述
背景为白时
在这里插入图片描述
-重复渐变

repeating-linear-gradient(60deg,red 0,blue 30%);

  background-image: repeating-linear-gradient(45deg, rgba(218, 25, 185, 0.2) 100px, yellow, green 200px);

实现发廊图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			
			html,body{
				height: 100%;
				overflow: hidden;
			}
			
			#wrap{
				width: 40px;
				height: 300px;
				border: 1px solid;
				margin: 100px auto;
				overflow: hidden;
			}
			#wrap > .inner{
				height: 600px;
				background:repeating-linear-gradient(135deg,black 0px,black 10px,white 10px,white 20px);
			}
			
		</style>
	</head>
	<body>
		<div id="wrap">
			<div class="inner"></div>
		</div>
	</body>
	<script type="text/javascript">
		var inner = document.querySelector("#wrap > .inner");
		var flag =0;
		
		setInterval(function(){
			flag++;
			if(flag==300){
				flag=0;
			}
			inner.style.marginTop = -flag+"px";
		},1000/60)
		
	</script>
</html>

在这里插入图片描述

光斑动画

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			
			html,body{
				height: 100%;
				overflow: hidden;
				background: black;
				text-align: center;
			}
			
			h1{
				/*transition: 3s;*/
				margin-top: 50px;
				display: inline-block;
				color: rgba(255, 255, 255,.3);
				font:bold 80px "微软雅黑";
				background: linear-gradient(120deg,rgba(255,255,255,0) 100px ,rgba(255,255,255,1) 180px ,rgba(255,255,255,0) 260px);
				background-repeat:no-repeat ;
				-webkit-background-clip: text ;
			}
			
			/*h1:hover{
				background-position: 500px 0;
			}*/
		</style>
	</head>
	<body>
		<h1>atguigu尚硅谷</h1>
	</body>
	<script type="text/javascript">
		var h1 = document.querySelector("h1");
		var flag =-160;
		
		setInterval(function(){
			flag+=10;
			if(flag==600){
				flag=-160;
			}
			h1.style.backgroundPosition = flag+"px";
		},30)
		
	</script>
</html>

在这里插入图片描述

径向渐变

radial-gradient() 函数创建一个，用来展示由原点（渐变中心）辐射开的颜色渐变

在这里插入图片描述

默认均匀分布

radial-gradient(red,blue);

不均匀分布
radial-gradient(red 50%,blue 70%);

在这里插入图片描述

改变渐变的形状
  • radial-gradient(circle ,red,blue)
  • circle
  • ellipse（默认为椭圆）
渐变形状的大小

HTMl:

<body>
    <div id="test"></div>
</body>
  1. radial-gradient(closest-corner circle ,red,blue) （默认椭圆)
#test {
            width: 400px;
            height: 300px;
            border: 1px solid;
            margin: 0 auto;
            background-image: radial-gradient(yellow, green 50%, pink);
        }

在这里插入图片描述
2. closest-side 最近边

#test {
            width: 400px;
            height: 300px;
            border: 1px solid;
            margin: 0 auto;
            background-image: radial-gradient(closest-side, yellow, green 50%, pink);
        }

在这里插入图片描述

  1. farthest-side 最远边
 #test {
            width: 400px;
            height: 300px;
            border: 1px solid;
            margin: 0 auto;
            background-image: radial-gradient( farthest-side circle, yellow, green 50%, pink);
        }

在这里插入图片描述
4. closest-corner 最近角

		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#test{
				width: 400px;
				height: 300px;
				border: 1px solid;
				margin: 0 auto;
				background-image:radial-gradient( closest-corner circle at 20px 20px,yellow, green 50%,pink) ;
			}
		</style>

在这里插入图片描述
5. farthest-corner 最远角 （默认值）

  #test {
            width: 400px;
            height: 300px;
            border: 1px solid;
            margin: 0 auto;
            background-image: radial-gradient( farthest-corner circle at 20px 20px, yellow, green 50%, pink);
        }

在这里插入图片描述

改变圆心
 radial-gradient(closest-corner  circle at 10px 10px,red,blue);  

   #test {
       width: 400px;
       height: 300px;
       border: 1px solid;
       margin: 0 auto;
       background-image: radial-gradient( circle at 100px 100px, yellow, green 50%, pink);
        }

在这里插入图片描述

后记

渐变就介绍到这里喜欢的小伙伴可以关注哦，许多好玩的CSS效果 等你来探索， 记得点赞哦，关注哦。

在这里插入图片描述
在这里插入图片描述

妙趣前端
关注
专栏目录
算法设计与分析笔记3-渐变分析
XTL151384的博客
05-29 943
算法设计与分析讲义3 asymptotic analysis 研究问题为：当时，函数的极限行为
CSS 渐变
张恒华的博客
03-20 3063
CSS 渐变CSS 渐变CSS 线性渐变语法线性渐变 - 从上到下（默认）实例线性渐变 - 从左到右实例线性渐变 - 对角线实例使用角度语法实例使用多个色标实例实例使用透明度实例重复线性渐变实例CSS 径向渐变语法径向渐变-均匀间隔的色标（默认）实例径向渐变-不同间距的色标实例设置形状实例重复径向渐变实例 CSS 渐变 CSS 渐变使您可以显示两种或多种指定颜色之间的平滑过渡。 CSS 定义了两种渐变类型： 线性渐变（向下/向上/向左/向右/对角线） 径向渐变（由其中心定义） CSS 线性渐变 如需
详细扒一扒css的背景渐变(通俗易懂)
最新发布
共同学习，共同成长
08-21 4111
CSS 渐变使您可以显示两种或多种指定颜色之间的平滑过渡。CSS 定义了两种渐变类型： 线性渐变（向下/向上/向左/向右/对角线）。径向渐变（由其中心定义）。下面来详细看看吧~
css渐变用法详解
Candy_mi的博客
05-30 791
CSS3 定义了两种类型的渐变（gradients）：线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向径向渐变（Radial Gradients）- 由它们的中心定义   1. CSS3 线性渐变(以标准语法为例)从上到下的线性渐变： background: linear-gradient(red, pink); /* 标准的语法 */从左到右的线性渐变：  bac...
css渐变
从零开始的web前端工程师生活
11-01 548
一、渐变 1、什么渐变 两种或多种颜色间平滑过渡的效果分类： （1）、线性渐变 （2）、径向渐变 （3）、重复渐变 2、渐变的组成（元素） 色标：决定了渐变的每种颜色及其出现的位置每一种渐变效果都是由多个色标组成的(两个及两个以上） 3、渐变的语法 1、先说一下它的语法： 它的属性为： background- image 取值为： linear-gradient() ：线性渐变 radial-gr...
【css】渐变效果
weixin_55639808的博客
01-15 5850
*使用 at 来定义最终的圆心位置 at后面可以接代表方向的关键字 也可以使用百分值默认是先设置水平方向的位置 然后是垂直方向 这里就表示将圆心的位置定义在右上角*//*这里表示的就是创建一个圆形 且该圆形的圆心位于水平方向50% 垂直方向50%的位置*//*这里表示定义了一个水平半径为150px 垂直半径为110px 圆心的位置在水平方向50% 垂直方向50% 即居中显示*/注意：自定义径向大小时，不能自定义形状。
css3按钮渐变动画特效
07-24
本文将详细解析"css3按钮渐变动画特效"这一主题，包括如何利用CSS3来创建具有炫彩动画效果的按钮，以及实现鼠标悬停时流光渐变的技巧。 首先，CSS3的渐变功能是通过`background-image`属性来实现的，它可以创建线性...
使用纯 CSS 创作一个渐变色动画边框
09-22
在本文中，我们将深入探讨如何使用纯 CSS 创建一个渐变色动画边框。这个效果是通过结合使用 CSS 的伪元素、渐变背景、动画和层级属性实现的。下面，我们将详细解析每个关键知识点： 1. **CSS 伪元素**： - `::...
css的渐变
qq_63453268的博客
11-18 140
一、渐变 从一个颜色过渡到另一个颜色 二、常见浏览器(5种) 谷歌：-webkit- 火狐;-moz- 欧鹏:-o- 苹果:-webkit- ie:-ms- 三、线性渐变 由一个方向过渡到另一个方向 1、线性渐变的写法 background：linear-gradient(to方向，颜色1，颜色2，....) 2、线性渐变加前缀的写法 background：前缀linear-gradient(方向，颜色1，颜色2，....) 注意：加前缀后方向不用加to，同时意思发生变化，
CSS3渐变色全解析：线性与环形效果及浏览器兼容
CSS渐变色技术是一项CSS3的重要特性，它允许设计师通过简单的编程创建从一种颜色平滑过渡到另一种颜色的空间填充效果。渐变色主要有两个形式：linear（线性渐变），用于定义颜色沿着一条直线路径变化；以及radial...
CSS：渐变
执念一盏温眸的博客
06-13 134
左右渐变： background: -moz-linear-gradient(left top, #348cff, #7db7ff); background: -webkit-linear-gradient(left top, #348cff, #7db7ff); background: -o-linear-gradient(left top, #348cff, #7db7ff);
CSS特性 之渐变 （全网最全）
qq_45288176的博客
05-27 6615
对自己学习做一个总结 做了一个专题 一：渐变的基础知识 1 什么是渐变 多种颜色，平缓变化的一-种显示效果 影响渐变的因素 2 色标: 一种颜色和这种颜色出现的位置 一个渐变,至少有两种颜色 3 渐变的分类 (1)线性渐变 (2)径向渐变 (3)重复渐变 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
css3背景切割，原点，渐变
Kilitou的博客
05-21 1226
一、css3背景切割 语法：background-clip:border-box|padding-box|content-box; border-box 默认值，背景在border以及border以内的区域可见 padding-box 背景在padding区域和content区域可见 content-box 背景只在content区域可见 注：background-clip就是用来设置背...
CSS3 线性渐变 颜色不均匀分布
07-08 545
最近在使用CSS3linear-gradient属性的时候发现可以使用'%'来指定颜色分布,然后我就试了一下,想做出下面的效果 开始以为是这样写 试了之后发现结果是 然后就开始各种尝试,做最后发现要实现上面的效果要这样写 原来在指定颜色分布时,我们指定的是颜色渐变的中心点,而不是颜色分布的范围 转载于:https://www.cnblogs.com/zh...
CSS3篮球场热力区域图
xzy565143480的博客
07-29 645
CSS3篮球场热力区域图 纯手工生成 文章目录CSS3篮球场热力区域图 纯手工生成如何制作ps做草稿css 敲代码在哪里可用 太不容易了，脑子都要炸 了，如图所示，各个区域独立可点击，自己加代码就好，图给你们画好了 如何制作 ps做草稿 css 敲代码 直接上代码，不说了 <!DOCTYPE html> <html> <head> <meta c...
用css3动画实现地图热力区点标记——开箱即用
qq_42289204的博客
09-25 558
之前想的是用position定位嵌套几个div来实现缩放闪烁的效果，实现出来后发现html嵌套结构过于复杂，在标记点数量多了之后页面结构太过复杂，所以拍脑袋想了一下决定用伪元素来实现外层的闪烁效果，结合css3动画的两个属性来实现：scale()、rotate()。 <div class="box"> <div class="earth"> ...
数据可视化API之热力图实现
腾讯位置服务
02-26 4580
前言 数据可视化API（Web），是基于腾讯位置服务JavaScript API GL实现的专业地理空间数据可视化渲染引擎。 通过这套API，可以实现轨迹数据、坐标点数据、热力、迁徙、航线等空间数据的可视化展现。 使用步骤 1、注册成为腾讯位置服务开发者，并进入控制台 -> key管理界面创建key； 2、数据可视化API（以下简称可视化API），所提供的可视化效果是以图层的方式叠加在JavaScript API GL之上，图层中所显示的数据由实例化的对象统一管理。 3、加载可视化API 可视化A
CSS渐变背景看这一篇就够了
热门推荐
Mq_sir的博客
11-01 6万+
CSS渐变背景看这一篇就够了 在我们自己设计网页的时候，为了好看美观，颜色可谓是最让人头疼的一部分。尤其是在配色上又找不到一些好看的网站。今天我就来记录一些好看的渐变式背景，和一些常用的颜色网站。 CSS 渐变使可以显示两种或多种指定颜色之间的平滑过渡。让我们来玩一玩，看能玩出什么花来。 CSS 定义了两种渐变类型： 一、线性渐变（向下/向上/向左/向右/对角线） 我们通过属性 linear-gradient来这样定义一个线性渐变。 background-image: linear-gradient( 方向
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值