1.基於CSS3的文字斑馬行效果
body{
font-size:1em;
line-height:2em;
}
div.content{
background: linear-gradient(#ccf2fa 50%, #ffffff 50%);
background-size: 100% 4em;
}
<html>
<body>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Et hercule mihi vir optimus nostrique amantissimus, Aulus Torquatus, versatur ante oculos, cuius quantum studium et quam insigne fuerit erga me temporibus illis, quae nota sunt omnibus, scire necesse est utrumque vestrum. Is enim percontando atque interrogando elicere solebat eorum opiniones, quibuscum disserebat, ut ad ea, quae ii respondissent, si quid videretur, diceret. Itaque Epicurus semper hoc utitur, ut probet voluptatem natura expeti, quod ea voluptas, quae in motu sit, et parvos ad se alliciat et bestias, non illa stabilis, in qua tantum inest nihil dolere. At vero Epicurus una in domo, et ea quidem angusta, quam magnos quantaque amoris conspiratione consentientis tenuit amicorum greges! quod fit etiam nunc ab Epicureis.</p>
<p>Eiuro, inquit adridens, iniquum, hac quidem de re; Quoniam, inquiunt, omne peccatum inbecillitatis et inconstantiae est, haec autem vitia in omnibus stultis aeque magna sunt, necesse est paria esse peccata. . </p>
</div>
</body>
</html>
效果圖
2.不同顏色版本的按鈕
只要把半透明的黑色或白色疊加在主色調上，即可產生主色調的亮色和暗色變體，這樣就能簡單地實現不同顏色版本的按鈕了。
.btn{margin: 50px; text-align: center;font-size: 16px;} .btn a{ padding: .3em .8em; border: 1px solid rgba(0,0,0,.1); background: #58a linear-gradient(hsla(0,0%,100%,.2),transparent); border-radius: .2em; box-shadow: 0 .05em .25em rgba(0,0,0,.5); color: white; text-shadow: 0 -.05em .05em rgba(0,0,0,.5); font-size: 125%;line-height: 1.5; } .btn a.cancel{background-color: #c00;} .btn a.ok{background-color: #6b0;margin-right: 20px;}
<p class="btn"> <a href="#" class="ok">OK</a> <a href="#" class="cancel">cancel</a> </p>
3.隔行換色的另一種方法
<ul class="linear"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul>
.linear{background: linear-gradient(#fb3 50%,#58a 0);background-size: 100% 80px;}
.linear li{height: 40px;line-height: 40px; color: #FFFFFF;text-align: center;}
利用css背景圖來實現隔行換色，百分比代表所占區域的大小，如果把第二個色標的位置值設為0，那它的位置就總是會被瀏覽器調整為前一個色標的位置值。
效果圖
如果要創建超過兩種顏色的條紋，也是很容易的。舉例來說，下面的代碼可以生成三種顏色的水平條紋。
.linear{background: linear-gradient(#fb3 33.3%,#58a 0,#58a 66.6%,yellowgreen 0);background-size: 100% 80px;}
.linear li{height: 40px;line-height: 40px; color: #FFFFFF;text-align: center;}
效果圖：
垂直條紋
垂直條紋的代碼跟水平代碼幾乎是一樣的，差別主要在於:我們需要在開頭加上一個額外的參數來指定漸變的方向。在水平條紋的代碼中我們其實也可以加上這個參數，只不過它的默認值to bottom本來就跟我們的意圖一致，於是就省略了。最后，我們還需要把background-size的值顛倒一下。
.linear{background: linear-gradient(to right/*或90deg*/,#fb3 33.3%,#58a 0,#58a 66.6%,yellowgreen 0);background-size: 80px 100%;}
效果圖：
斜向條紋
在完成水平和垂直條紋之后，我們可能會順着往下想：如果我們再次改變background-size的值和漸變的方向，是不是就可以得到斜向（比如45deg）的條紋圖案呢？比如這樣
.linear{background: linear-gradient(45deg,#fb3 33.3%,#58a 0,#58a 66.6%,yellowgreen 0);background-size: 80px 80px;}
可以發現，這個辦法行不通。原因在於我們只是把每個“貼片”內部漸變旋轉了45度，而不是把整個重復的背景都旋轉了。解決方案，在增加一些色標
4.文字顏色漸變
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> .text{ font-size: 30px; color:#f35626; animation: hue 10s infinite linear; } @keyframes hue{ from{-webkit-filter: hue-rotate(0deg);} to{-webkit-filter: hue-rotate(360deg);} } </style> </head> <body> <h3 class="text">顏色漸變動畫</h3> </body> </html>
hue-rotate翻譯就是色相旋轉 色相旋轉？？懂了好像又沒懂？作為前端工程師，基本的色彩原理還是要知道的：
這就是色相環，這里是24種代表顏色，實際在屏幕上可以顯示的RGB顏色有16萬種。就是說，上面的顏色變化，在一分鍾內有16萬種變化……
上面可以很明顯的知道這是一個圓環，hue-rotate()就定義了當前顏色在這個圓環上的偏轉角度。
最終的效果圖
CSS3 pointer-events:none應用舉例及擴展 （轉載至張鑫旭 更多介紹及案例請查看原文鏈接原文鏈接）
CSS新屬性pointer-events：字面理解是點擊鼠標事件，其支持的值牛毛般多，不過大多都與SVG相關，我們可以不用理會。
pointer-events:none“幻影”特性的實際應用
下圖所示的這種效果目前很多地方都有見到，水平或是垂直列表的兩端（可能會有平滑滾動效果）有個白色的半透明漸變覆蓋：
您可以狠狠地點擊這里：pointer-events:none“幻影”應用demo
在IE瀏覽器下，filter濾鏡實現的半透明漸變背景元素本身就是鏤空的穿透的，即我們可以使用鼠標選擇或點擊半透明背景后面的元素，如下截圖：
但是對於FireFox或是Chrome等現代瀏覽器，則半透明覆蓋下面的元素會被遮住，無法選擇或點擊：
此時，我們可以利用pointer-events:none的“幻影”特性，對半透明覆蓋元素應用pointer-events:none聲明使其可以鼠標穿透，於是，半透明覆蓋后面的文字可以選擇了，鏈接也可以點擊了：
聚光燈效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
svg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
body {
background: #555;
}
circle {
transform: translateX(100px);
animation: 3s move alternate infinite;
}
@keyframes move {
from {
transform: translateX(0);
}
to {
transform: translateX(500px);
}
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="100" viewBox="0 0 600 100">
<defs>
<mask id="experiment">
<circle fill="#fff" cx="66.836" cy="50.356" r="34" />
</mask>
</defs>
<path mask="url(#experiment)" class="experiment" fill="yellow" d="M150.142 73.467v-46.61h34.56v7.884h-25.15v10.335h23.402v7.854h-23.4v12.685h26.04v7.854H150.14v-.003zM188.835 73.467l15.93-24.323-14.436-22.288h11l9.348 14.976 9.157-14.976h10.905l-14.498 22.638 15.93 23.974H220.82l-10.333-16.12-10.365 16.12h-11.287zM237.004 73.467v-46.61h15.103c5.723 0 9.453.233 11.19.698 2.672.7 4.908 2.22 6.71 4.562 1.8 2.343 2.702 5.37 2.702 9.078 0 2.86-.52 5.268-1.56 7.217-1.038 1.95-2.357 3.482-3.957 4.595-1.6 1.112-3.227 1.85-4.88 2.21-2.247.445-5.5.667-9.76.667h-6.137v17.583h-9.412zm9.41-38.727v13.227h5.152c3.71 0 6.19-.243 7.44-.73 1.25-.488 2.23-1.25 2.94-2.29.71-1.038 1.066-2.246 1.066-3.624 0-1.695-.498-3.095-1.494-4.197-.997-1.102-2.257-1.79-3.784-2.066-1.124-.21-3.38-.318-6.772-.318h-4.547v-.002zM280.435 73.467v-46.61h34.56v7.884h-25.148v10.335h23.4v7.854h-23.4v12.685h26.04v7.854h-35.452v-.003zM323.898 73.467v-46.61h19.81c4.98 0 8.6.418 10.856 1.255 2.258.838 4.063 2.326 5.42 4.467 1.356 2.14 2.035 4.59 2.035 7.345 0 3.496-1.028 6.385-3.085 8.664-2.058 2.276-5.13 3.715-9.222 4.307 2.035 1.188 3.716 2.492 5.04 3.912 1.325 1.42 3.11 3.94 5.357 7.564l5.69 9.094h-11.255l-6.805-10.143c-2.416-3.625-4.07-5.908-4.96-6.853-.89-.943-1.833-1.59-2.83-1.938-.996-.35-2.575-.525-4.737-.525h-1.906v19.458h-9.41zm9.413-26.9h6.964c4.515 0 7.332-.19 8.457-.57 1.124-.383 2.003-1.04 2.64-1.972.636-.934.954-2.1.954-3.498 0-1.568-.42-2.834-1.257-3.8s-2.018-1.573-3.545-1.827c-.764-.106-3.053-.16-6.867-.16h-7.344v11.828zM370.604 73.467v-46.61h9.412v46.61h-9.412zM388.855 73.467v-46.61h14.084l8.456 31.793 8.362-31.794h14.115v46.61h-8.742v-36.69l-9.25 36.69h-9.063l-9.22-36.69v36.69h-8.742zM443.223 73.467v-46.61h34.562v7.884h-25.148v10.335h23.4v7.854h-23.4v12.685h26.04v7.854h-35.453v-.003zM486.75 73.467v-46.61h9.156l19.076 31.125V26.856h8.743v46.61h-9.442l-18.79-30.395v30.397h-8.743zM544.17 73.467V34.74h-13.83v-7.885h37.04v7.885h-13.8v38.727h-9.41z"
/>
<path mask="url(#experiment)" class="tube" fill="yellow" d="M136.07 27.246h-22.185v5.547h2.31V67.92c0 3.05 2.497 5.547 5.547 5.547h6.47c3.052 0 5.547-2.496 5.547-5.547V32.793h2.31v-5.547zm-4.62 33.74h-11.094v-1.848h11.093v1.848zm0-6.93h-6.472v-1.85h6.47v1.85zm0-6.935h-11.094v-1.848h11.093v1.85zm0-6.932h-6.472V38.34h6.47v1.848z"
/>
</svg>
</body>
</html>
根據兄弟元素的數量范圍來匹配元素
:nth-child()選擇符用來命中一個范圍，它的參數不僅可以是簡單的數字，也可以是像 an+b 這樣的表達式（比如 :nth-child(2n+1)）。這里的 n 表示一個變量，理論上的范圍是 0 到 + ∞。如果使用 n+b 這種形式的表達式（此時相當於 a 的取值為 1），那么不論 n 如何取值，這個表達式都無法產生一個小於 b 的值。因此，n+b 這種形式的表達式可以選中從第 b 個開始的所有子元素。舉例來說，:nth-child(n+4) 將會選中除了第一、二、三個子元素之外的所有子元素。如下圖：
利用這個技巧，我們可以在列表項的總數是 4 或更多時選中所有列表項。在這種情況下，我們可以把表達式 n+4 傳給 :nth-last-child()：
li:first-child:nth-last-child(n+4), li:first-child:nth-last-child(n+4) ~ li { /* 當列表至少包含四項時，命中所有列表項 */ }
同理，-n+b 這種形式的表達式可以選中開頭的 b 個元素。因此，僅當列表中有 4 個或更少的列表項時，要選中所有列表項可以這樣寫：
li:first-child:nth-last-child(-n+4), li:first-child:nth-last-child(-n+4) ~ li { /* 當列表最多包含四項時，命中所有列表項 */ }
當然，我們還可以把這兩種技巧組合起來使用，不過代碼也會變得更加復雜。假設我們希望在列表包含 2 ～ 6 個列表項時命中所有的列表項，可以這樣寫：
li:first-child:nth-last-child(n+2):nth-last-child(-n+6), li:first-child:nth-last-child(n+2):nth-last-child(-n+6) ~ li { /* 當列表包含2～6項時，命中所有列表項 */ }