渐变
2019-12-31 本文已影响0人
fb941c99409d
现成的渐变色的代码https://webgradients.com/
线性渐变 渐变本质是图片
/* 从上到下 不写方向默认从上到下*/
background:-webkit-linear-gradient(top, yellow,red);
background: -moz-linear-gradient(bottom, yellow,red);
background: -o-linear-gradient(bottom, yellow,red);
background: linear-gradient(to bottom,yellow,red);
/* 从左到右 */
background: -webkit-linear-gradient(left,red,blue);
background: -moz-linear-gradient(right,red,blue);
background: -o-linear-gradient(right,red,blue);
background: linear-gradient(to right,red,blue);
/* 对角 left right top bottom */
background: -webkit-linear-gradient(left top,red,blue);/* 左上角到右下角 */
background: -moz-linear-gradient(right bottom,red,blue);
background: -o-linear-gradient(right bottom,red,blue);
background: linear-gradient(to right bottom,red,blue);
角度说明：
角度是指水平线和渐变线之间的角度
0deg将创建一个从下到上的渐变，90deg将创建一个从左到右的渐变。
1.0deg就是从下到上渐变；
2.90deg从左到右；
3.180deg从上到下；
4.-90deg从右到左；
5.45deg对角从左下角到右上角；
注意: -webkit 内核跟正常的是相反的方向 如 0deg是从上往下,书写时-webkit最好写在最上面
------------------------------------------------------------
-颜色结点
用百分比控制颜色的结点
1.最后一个不写，默认100%；
2.第一个不写，默认0%；
发廊灯案例
<style type="text/css">
#wrap{
width: 40px;
height: 300px;
border: 1px solid;
margin: 100px auto;
overflow: hidden;
}
.inner{
width: 40px;
height: 600px;
background: repeating-linear-gradient(45deg,black 0px,black 10px , white 10px ,white 20px);
/*这里有3个渐变 0-10px 是black到black的渐变 (为了显示出纯黑色)
10px-10px是black到white的渐变[这里看不出 因为写white为了占位 防止出现黑色到白色的渐变,白到白就可以显示纯白色]
10-20px是 white到white的渐变 */
}
</style>
<body>
<div id="wrap">
<div class="inner"></div>
</div>
</body>
<script type="text/javascript">
var inner = document.querySelector('.inner');
var flag= 0;
setInterval(function(){
flag++;
if(flag==300)
flag=0;
inner.style.marginTop = -flag+"px";
},1000/60);
</script>
径向渐变 (径:半径)
从中心点向外扩散的一种渐变 类似圆形
感觉没什么用的地方, 需要再去学一遍
IE的渐变
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='startColor'，endColorstr='endColor'，GradientType=0)
startcolor和endcolor必须是十六进制
gradienttype：渐变的类型，可以是0(从上往下) 1(从左往右) 2(看不懂)三种渐变
