11 - css3渐变

css3渐变

鼠标样式
透明度的使用以及兼容性写法(针对IE的大傻逼)
线性渐变
径向渐变

###鼠标样式(cursor)

规定当鼠标进入元素呢内容区域显示的光标类型

只需要修改cursor的对应的值

####cursor指针样式

cursor: default;/* 箭头 */
cursor: auto;/* 默认,根据浏览器设置的光标 */
cursor: move:/* 可拖拽的状态/可移动 */
cursor: pointer;/* 小手 */
cursor: crosshair;/* 十字架 */
/* 需要在写在css样式里面,针对小白提醒一下 */

####自定义指针样式

通过引入自己设定的自指针样式

依次检索加载,前面的不行,后面的备胎顶上去,需要用逗号分隔。

div{cursor: url("引入的鼠标资源的路径"),pointer;}

###透明度opacity

指定了一个元素的透明度,元素后面的背景被覆盖的程度

会让当前元素以及当前元素里面的子元素都设置成这个opacity,并且每一个层级的opacity叠加计算(乘法)

opacity数值(0-1)

0 完全透明
1完全不透明
介于0-1之间半透明

IE滤镜(IE8以下) filter:alpha(opacity=0-100)

0是完全透明
100是完全不透明

为了支持一些老版本的浏览器需要加上前缀

-moz-opacity: 0.5;
/* 小数前面的0可以删掉,变成.5 */

渐变

渐变是描述图片的,有规律的渐渐变化,在前端中通常指颜色的变化的实现方式,通常使用在所有接受图像的属性上,代替图片,意义是创建一张图片,也就是background-image的属性值。

线性渐变linear-gradient

第一个参数:渐变方向,从哪到哪发生渐变(to left,to right bottom,30deg顺时针)之类的,可以省略,默认是从上往下
第二个参数:颜色:位置百分比(px),规定哪种颜色从哪个位置开始发生渐变效果
第三个参数:颜色,位置百分比(px),规定哪种颜色到哪里变化结束
第一个参数可以省略,默认是从上往下(to bottom),后续每个参数描述某个关键点的位置的颜色,两个关键点之间渐变
方便理解参数所代表的含义:从某个部分开始到某个部分结束,第一个参数之后的每个参数描述某个关键点的位置的颜色,两个关键点之间渐变

还是通过例子来说,单单说有点无聊

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>小demo-德国国旗</title><style>body{margin: 0;}.box{width: 700px;height: 460px;/* 黑色从33.3%开始变化,红色色从66.6%开始变化 *//*background-image: linear-gradient(#000 33.3%,rgb(221, 0, 0) 66.6%,rgb(255, 206, 0) 100%) ;*//* 完美出现德国国旗的效果,所需要的代码 */background-image: linear-gradient(#000 33.3%,rgb(221, 0, 0) 33.3%,rgb(221, 0, 0) 66.6%,rgb(255, 206, 0) 66.6%) ;}</style>
</head>
<body><div class="box"></div>
</body>
</html>

先来说一下自己一开始的想法吧:background-image: linear-gradient(#000 33.3%,rgb(221, 0, 0) 66.6%,rgb(255, 206, 0) 100%) ;我一开始以为这样写可以出现德国国旗,但是现实却给我大大一巴掌。

出现如下的效果图:

然后我开始理解上面我写的代码的意思,从33.3%的位置开始渐变(渐变颜色为黑色),33,3%之前的位置都是纯颜色的,从66.6%的位置开始渐变(渐变颜色为红色)

如果要得到德国国旗,就不需要有渐变的范围,所以说就是刚开始有渐变,就马上扼杀它,简单粗暴的理解。

background-image: linear-gradient(#000 33.3%,rgb(221, 0, 0) 33.3%,rgb(221, 0, 0) 66.6%,rgb(255, 206, 0) 66.6%) ;

通过上面这个一条代码和上面完整的代码,可以实现完美的德国国旗。

使用angles
参数释义如下，‘0deg’指向上面，同时正角度顺时针旋转，因此‘90deg’指向右边。

使用deg的规则

当角度为45deg的时候,箭头所指的方向是最后一个参数颜色所在的地方,仅仅是方便个人理解而已。

度数为0的意思是从下到上,度数为180的意思是从上往下,由我们的顺时针指向度数

径向渐变radial-gradient

第一个参数: 形状,circle(圆)/ellipse(椭圆,默认),通过百分比/关键位置词可以调整圆心的位置
第二个参数到第n个参数: 从中心到外部的颜色渐变范围,跟线性渐变类似,支持百分比/px
百分比是相对于父元素盒子的大小,数值(px)就是具体的长度at后面是中心点的位置background-image:radial-gradient(ellipse 100% 40% at 0% 100%,red,blue)

例子:background-image: radial-gradient(circle,red,blue)

没有数字范围的时候颜色均分,从圆心(这个位置可以更改的)开始到矩形最远的点均分颜色

例子说明:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>小demo - 径向渐变</title><style>body{margin: 0;}.box{width: 400px;height: 300px;background-image:radial-gradient(circle,red 30%,blue 30%);}.box1{width: 400px;height: 300px;background-image:radial-gradient(ellipse,red 30%,blue 30%);}/* 当盒子的宽度和高度都一样的时候,circle和ellipse表现都是一样的 */</style>
</head>
<body><div class="box"></div><div class="box1"></div>
</body>
</html>

小Tips

设置图片的时候,以逗号作为分隔,可以叠加关系
径向渐变的百分比根据盒子宽高来计算的

参考/练习资料:

深入理解CSS3 gradient斜向线性渐变
10个demo示例学会CSS3 radial-gradient径向渐变

11 - css3渐变相关推荐

CSS3渐变——线性渐变
渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...
微信小程序（4）——CSS3渐变
CSS3 渐变(gradients)可以在两个或多个指定的颜色之间显示平稳的过渡.CSS3 定义了两种类型的渐变(gradients): 1.线性渐变(Linear Gradients)- 向下/向上 ...
html垂直线性渐变,再说CSS3渐变——线性渐变
渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...
CSS3渐变（Gradients）
一.简述 CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡. CSS3 定义了两种类型的渐变(gradients): 线性渐变(Linear Gradients)- ...
css3漂亮的渐变图案,css3渐变(Gradients)
http://www.runoob.com/css3/css3-gradients.html CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图 ...
css3 渐变背景圆形,CSS 教程（5）-Css3-1,边框,背景,渐变,
1.CSS3 边框用 CSS3,你可以创建圆角边框,添加阴影框,并作为边界的形象而不使用设计程序,如 Photoshop 在 CSS3 中 border-radius 属性被用于创建圆角 div { ...
再说CSS3渐变——线性渐变
渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...
CSS3 渐变(Gradients)
CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡. CSS3 定义了两种类型的渐变(gradients): ·线性渐变(Linear Gradients)- 向下/ ...
css中的渐变的属性,CSS3 渐变属性（Gradients）-线性渐变(linearGradient)
通过使用 CSS3 渐变(gradients),你可以减少下载的事件和宽带的使用.此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gradient)是由浏览器生成的. 丛本质上来说,既然 bac ...

11 - css3渐变

css3渐变

渐变

线性渐变linear-gradient

径向渐变radial-gradient

11 - css3渐变相关推荐

最新文章

热门文章