移動端背景漸變,非常的年輕,符合90后年輕一代的審美,css3的這個漸變目前主要是應用在手機前端領域。
產品設計中使用漸變色的好處:
1:觀眾不至于眼睛過于疲勞(如果是淺色背景,3個小時下來極容易造成觀眾閉上眼睛還有殘影,眼睛會極度疲勞)。
2:優雅而低調的深淺色調:
3:純色單調 漸變色一是色彩不單調 二是在有限空間內盡可能制造空間感
4:稍微加點漸變可以讓純色層顯得更細膩,不那么單調。畫面顯得更豐富。
代碼如下,非常簡單
新的梯度漸變語法,新的語法包含四個漸變函數:
linear-gradient(): 線性梯度漸變
radial-gradient(): 徑向梯度漸變
repeating-linear-gradient():重復梯度漸變
repeating-radial-gradient():色站
### 一:線性漸變 linear-gradient(): 線性梯度漸變
~~~
<!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徑向漸變
代碼
~~~
<!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():重復梯度漸變
~~~
<!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():色站
~~~
<!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;
~~~
- 前端框架
- 進階攻略:前端最全的框架總結
- 進階攻略:前端完整的學習路線
- 進階攻略:最全的前端開源JS框架和庫
- 常用的六個富文本編輯器
- 移動端手勢的七個事件庫
- Bootstrap相關優質項目學習清單
- 三個Bootstrap免費字體和圖標庫
- jQuery實現多種切換效果的圖片切換的五款插件
- 移動端常用的四個框架
- 七個幫助你處理Web頁面層布局的jQuery插件
- 前端工具
- 八款前端開發人員更輕松的實用在線工具
- 推薦幾款好用的云筆記軟件
- 幾款在線的腦圖制作工具
- 細數那些年我用過的前端開發工具
- 九款優秀的企業項目協作工具推薦
- 細數那些帶打賞功能的平臺
- 干貨|幾個有用的問答平臺
- 前端資源
- web開發快速提高工作效率的一些資源
- 前端工程師們,這些干貨讓你開發效率加倍
- 那些我不得不收藏的技術網站
- 前端學習的幾個網站
- 老司機程序員用到的各種網站整理
- 前端幾個常用簡單的開發手冊拿走不謝
- 2017年度最流行的十大中國開源軟件
- 程序員常用的六大技術博客類
- 提高工作效率的幾個小技巧
- Bootstrap相關優質項目必備網址
- 前端技術棧
- h5調用底層接口的一些知識
- JS數組去重的6種算法實現
- Git安裝及密鑰的生成并上傳本地文件到GitHub上
- JS數組排序技巧匯總(冒泡、sort、快速、希爾等排序)
- 就如何快速免費提高網站排名小結
- 淺談移動端頁面無刷新跳轉問題的解決方案
- 移動端iPhone系列適配問題的一些坑
- HTML5在客戶端存儲數據的新方法——localStorage
- 移動開發之css3實現背景幾種漸變效果
- 前端雜談
- 程序員如何利用空余時間掙零花錢?
- 一個前端妹子的悲歡編程之路
- 【程序員交友】祈澈姑娘:假裝文藝與代碼齊飛的前端妹子
- 初中級前端開發工程師如何提升個人能力?
- 如何打造個人技術影響力
- 程序媛,堅持這幾個好習慣讓你越來越美
- 工作中如何快速成長和學習?
- 我是如何快速積累工作經驗
- 谷歌AI中國中心成立,人工智能勢不可擋?
- 前端面試
- 一份來自前端開發工程師的規范簡歷
- 2017前端精品面試文章總結
- 面試經歷:為即將找工作的你保駕護航
- 我的北漂之路 北漂如飲水,冷暖自知
- 如何在面試中脫穎而出?
- 2017年10大主流編程語言最新排行榜出爐
- 前端面試之前要準備的那些事