純css3基于gradient屬性制作15種色板,漸變顏色。帶顏色參數(shù),可自定義選擇漸變配色代碼。
使用方法:
1、head引入css文件
<link rel="stylesheet" href="css/style.css">
2、body引入HTML代碼
<ul>
<li class="gradient--0">
<div class="gradient"></div>
<div class="start-color"></div>
<div class="end-color"></div>
</li>
<li class="gradient--1">
<div class="gradient"></div>
<div class="start-color"></div>
<div class="end-color"></div>
</li>
<li class="gradient--2">
<div class="gradient"></div>
<div class="start-color"></div>
<div class="end-color"></div>
</li>
<li class="gradient--3">
<div class="gradient"></div>
<div class="start-color"></div>
<div class="end-color"></div>
</li>
<li class="gradient--4">
<div class="gradient"></div>
<div class="start-color"></div>
<div class="end-color"></div>
</li>
<li class="gradient--5">
<div class="gradient"></div>
<div class="start-color"></div>
<div class="end-color"></div>
</li>
<li class="gradient--6">
<div class="gradient"></div>
<div class="start-color"></div>
<div class="end-color"></div>
</li>
<li class="gradient--7">
<div class="gradient"></div>
<div class="start-color"></div>
<div class="end-color"></div>
</li>
<li class="gradient--8">
<div class="gradient"></div>
<div class="start-color"></div>
<div class="end-color"></div>
</li>
<li class="gradient--9">
<div class="gradient"></div>
<div class="start-color"></div>
<div class="end-color"></div>
</li>
<li class="gradient--10">
<div class="gradient"></div>
<div class="start-color"></div>
<div class="end-color"></div>
</li>
<li class="gradient--11">
<div class="gradient"></div>
<div class="start-color"></div>
<div class="end-color"></div>
</li>
<li class="gradient--12">
<div class="gradient"></div>
<div class="start-color"></div>
<div class="end-color"></div>
</li>
<li class="gradient--13">
<div class="gradient"></div>
<div class="start-color"></div>
<div class="end-color"></div>
</li>
<li class="gradient--14">
<div class="gradient"></div>
<div class="start-color"></div>
<div class="end-color"></div>
</li>
</ul>