Open akira-cn opened 4 years ago
在现代浏览器中,渐变(gradients)是一系列比较有用的CSS属性值。
渐变又分为3种:
渐变不是CSS属性,而是属性值,在浏览器渲染的时候,被解析为图形,所以它可以应用在background-image、border-image、list-style-image、mask等能够使用图片的CSS属性上。
最常用的当然是background-image。
<div class="block"></div>
.block { width: 100px; height: 100px; background-image: linear-gradient(to right, red, yellow); }
上面的代码创建了一个带有渐变色背景的div元素:
如果我们要让边框渐变,我们可以设置border-image:
.block { width: 100px; height: 100px; background-image: linear-gradient(to right, red, yellow); border: solid 10px; border-image: linear-gradient(to right, blue, green) 1; }
一个比较少见的用法是,渐变还可以设置list-style-image:
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul>
li:nth-child(2n) { list-style-image: linear-gradient(to right, blue, green); } li:nth-child(2n+1) { list-style-image: linear-gradient(to right, red, yellow); }
由于渐变视为图片,background-size、background-position、background-repeat对它都有效,我们就可以用它来绘制一些有趣的图案。
background-size
background-position
background-repeat
.block { width: 300px; height: 300px; background-image: linear-gradient(45deg, black 50%, transparent 0); background-size: 10% 10%; }
.block { width: 300px; height: 300px; background-image: linear-gradient(to bottom, grey 50%, black 0), linear-gradient(to bottom, black 50%, grey 0), linear-gradient(to bottom, grey 50%, black 0), linear-gradient(to bottom, black 50%, grey 0); background-size: 25% 25%; background-position: 0 0, 75px 0, 150px 0, 225px 0; background-repeat: repeat-y; }
我们还可以用渐变来绘制饼图:
<div class="pie"></div>
.pie { display: inline-block; width: 150px; height: 150px; border-radius: 50%; background-image: linear-gradient(30deg, red 38%, yellow 0), linear-gradient(-45deg, cyan 50%, blue 0), linear-gradient(-135deg, gray 50%, green 0), linear-gradient(135deg, black 50%, orange 0); background-position: 0 0, 0 100%, 100% 100%, 100% 0; background-size: 50% 50%; background-repeat: no-repeat; }
上面的代码是用线性渐变绘制的饼图。
当然如果用圆锥渐变就更简单了:
.pie { display: inline-block; width: 150px; height: 150px; border-radius: 50%; background-image: conic-gradient(red 90deg, orange 90deg, orange 180deg, yellow 180deg, yellow 210deg, green 210deg, green 270deg, blue 270deg); }
如果用渐变配合mask(遮罩)属性,可以用来做一些特殊的效果:
<img src="https://p1.ssl.qhimg.com/t0182f688227da11a79.jpg">
img { -webkit-mask: radial-gradient(#000, transparent 50%); }
如果再配合动画就更有趣了:
function animate({target, prop, duration, start, end, easing, interpolate} = {}) { const startTime = Date.now(); return new Promise((resolve) => { function update() { const t = Date.now() - startTime; const p = Math.min(t / duration, 1); target.style[prop] = interpolate(start, end, easing ? easing(p) : p); if(p < 1) { requestAnimationFrame(update); } else { resolve(p); } } update(); }); } const img = document.querySelector('img'); animate({ target: img, prop: 'webkitMask', duration: 1000, start: 0, end: 100, interpolate(start, end, p) { const v = start * (1 - p) + end * p; return `linear-gradient(to right, #000 ${v}%, transparent 0) 0/20px` } });
在现代浏览器中,渐变(gradients)是一系列比较有用的CSS属性值。
渐变又分为3种:
渐变不是CSS属性,而是属性值,在浏览器渲染的时候,被解析为图形,所以它可以应用在background-image、border-image、list-style-image、mask等能够使用图片的CSS属性上。
最常用的当然是background-image。
上面的代码创建了一个带有渐变色背景的div元素:
如果我们要让边框渐变,我们可以设置border-image:
一个比较少见的用法是,渐变还可以设置list-style-image:
由于渐变视为图片,
background-size
、background-position
、background-repeat
对它都有效,我们就可以用它来绘制一些有趣的图案。我们还可以用渐变来绘制饼图:
上面的代码是用线性渐变绘制的饼图。
当然如果用圆锥渐变就更简单了:
如果用渐变配合mask(遮罩)属性,可以用来做一些特殊的效果:
如果再配合动画就更有趣了: