移動端背景漸變,非常的年輕,符合90後年輕一代的審美,css3的這個漸變目前主要是應用在手機前端領域。
産品設計中使用漸變色的好處:
1:觀衆不至于眼睛過于疲勞(如果是淺色背景,3個小時下來極容易造成觀衆閉上眼睛還有殘影,眼睛會極度疲勞)。
2:優雅而低調的深淺色調:
3:純色單調 漸變色一是色彩不單調 二是在有限空間内盡可能制造空間感
4:稍微加點漸變可以讓純色層顯得更細膩,不那麼單調。畫面顯得更豐富。
代碼如下,非常簡單
新的梯度漸變文法,新的文法包含四個漸變函數:
linear-gradient(): 線性梯度漸變
radial-gradient(): 徑向梯度漸變
repeating-linear-gradient():重複梯度漸變
repeating-radial-gradient():色站
一:線性漸變 linear-gradient(): 線性梯度漸變
圖檔.png
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=0.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<title>移動開發之css3實作背景漸變效果</title>
<style type="text/css">
.linear{
/*仿支付寶背景藍色漸變*/
background-image: linear-gradient(to top, #66b7f9,#1c82d4);
height: 15rem;
}
</style>
</head>
<body>
<div class="linear"></div>
</body>
</html>
二:radial-gradient徑向漸變
圖檔.png
代碼
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=0.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<title>移動開發之css3實作背景漸變效果</title>
<style type="text/css">
.linear{
/*background-image: linear-gradient(to top, #66b7f9,#1c82d4);*/
background: radial-gradient(#ffffff,#1c82d4);
height: 15rem;
}
</style>
</head>
<body>
<div class="linear"></div>
</body>
</html>
三: repeating-linear-gradient():重複梯度漸變
圖檔.png
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=0.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<title>移動開發之css3實作背景漸變效果</title>
<style type="text/css">
.linear{
background: repeating-linear-gradient(#1c82d4, #fff 30%, #1c82d4 35%);
height: 15rem;
}
</style>
</head>
<body>
<div class="linear"></div>
</body>
</html>
四:repeating-radial-gradient():色站
圖檔.png
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=0.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<title>移動開發之css3實作背景漸變效果</title>
<style type="text/css">
.linear{
background: repeating-radial-gradient(#1c82d4, #fff 30%, #1c82d4 35%);
height: 15rem;
}
</style>
</head>
<body>
<div class="linear"></div>
</body>
</html>
/全相容的移動端漸變寫法/
/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #66b7f9,#1c82d4);
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear,top,from(#66b7f9),to(#1c82d4));
/* Safari 5.1+, Chrome 10+ */
background: -webkit-linear-gradient(top, #66b7f9, #1c82d4);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #66b7f9, #1c82d4);
/* default */
background: linear-gradient(top, #66b7f9, #1c82d4);
background-color: #1c82d4;
作者:祈澈姑娘
90後前端妹子,愛程式設計,愛營運,愛折騰。
堅持總結工作中遇到的技術問題,堅持記錄工作中所所思所見,歡迎大家一起探讨交流。