关于gradient:css-radialgradient绘制渐变背景

radial-gradient是一个很酷的css属性。咱们能够用它给元素绘制出很有感觉的突变背景。如果你不常常用它，会发现它的语法不太容易记忆，相比拟于linear-gradient() 要略微简单一些。本文通过2个例子，带你领略一下它的魅力。

突变背景色

<div class="hire_wrapper"></div>

.hire_wrapper {  background: radial-gradient(circle at 22% 5%, rgb(85, 55, 101), rgb(30, 38, 74) 76%);  height: 100vh;}

能够在浏览器渲染出，上面的背景突变：

在线演示地址

高光文字

<h1>Syncopate</h1>

@import url(https://fonts.googleapis.com/css?family=Syncopate);body {  height: 100vh;  background: radial-gradient(    circle closest-corner at center 125px,    #222,    black 40%  ) no-repeat;  text-align: center;}h1 {  display: inline-block;  padding-top: 100px;  font-family: 'Syncopate', sans-serif;  text-transform: uppercase;  background: radial-gradient(    circle farthest-corner at center center,    #ccc,    #333  ) no-repeat;  -webkit-background-clip: text;  -webkit-text-fill-color: transparent;}

渲染出上面的后果：

在线演示地址

背景追随鼠标突变动画

如果再退出一些鼠标移入事件，能够做出更加屌炸天的成果，比方这个：

日出

参考链接