在现代浏览器中,渐变(gradients)是一系列比较有用的CSS属性值。
php
渐变又分为3种:前端
线性渐变 linear-gradientweb
径向渐变 radial-gradient浏览器
圆锥渐变 conic-gradientide
渐变不是CSS属性,而是属性值,在浏览器渲染的时候,被解析为图形,因此它能够应用在background-image、border-image、list-style-image、mask等可以使用图片的CSS属性上。动画
最经常使用的固然是background-image。spa
<div class="block"></div>
.block { width: 100px; height: 100px; background-image: linear-gradient(to right, red, yellow); }
上面的代码建立了一个带有渐变色背景的div元素。code
若是咱们要让边框渐变,咱们能够设置border-image:blog
.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对它都有效,咱们就能够用它来绘制一些有趣的图案。
.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` } });
《奇舞周刊》是360公司专业前端团队「奇舞团」运营的前端技术社区。关注公众号后,直接发送连接到后台便可给咱们投稿。