关于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;}渲染出上面的后果： 在线演示地址 背景追随鼠标突变动画如果再退出一些鼠标移入事件，能够做出更加屌炸天的成果，比方这个： 日出 参考链接