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;
}
渲染出下面的結果:
背景跟隨滑鼠漸變動畫
如果再加入一些滑鼠移入事件,可以做出更加屌炸天的效果,比如這個: