一、游標 新增加not-allowed游標，不允許訪問 隱藏游標，在觸模應用上很有用，css2.1需要一個透明的圖片來實現，而css3直接用cursor:none即可。 完整代碼： 二、擴大熱區 應用在小按鈕的情況下，不好被滑鼠點擊到 代碼如下： 三、自定義覆選框 系統自帶覆選框美化 利用css3提 ...
一、游標
- 新增加not-allowed游標，不允許訪問
- 隱藏游標，在觸模應用上很有用，css2.1需要一個透明的圖片來實現，而css3直接用
cursor:none即可。 - 完整代碼：
curosr: url(transparent.gif');
cursor: none;
二、擴大熱區
- 應用在小按鈕的情況下，不好被滑鼠點擊到
- 代碼如下：
.btn{ position: relative; cursor: pointer; } .btn:after{ position: absolute; content: ''; top:-10px; right: -10px; bottom: -10px; left: -10px; }
三、自定義覆選框
- 系統自帶覆選框美化
- 利用css3提供的:checked偽類選擇器實現
- 寬、高、對齊等設置單位最好用em，讓按鈕變得更為靈活
- 示例代碼：
<head> <meta charset="UTF-8"> <title>Document</title> <style> input[type="checkbox"]{ display: none; } input[type="checkbox"] + label::before{ content: '\a0'; /*不換行空格*/ display: inline-block; background: silver; border-radius: .2em; margin-right: .2em; width: .8em; height: .8em; line-height: .65em; text-indent: .15em; } input[type="checkbox"]:checked + label::before{ content: '\2713'; background: yellowgreen; } </style> </head> <body> <input type="checkbox" id="anesome"/> <label for="anesome">anesome</label> </body>
- 開關按鈕的實現
- 偽類選擇器 + 修飾label元素實現
- 示例代碼：
<head> <meta charset="UTF-8"> <title>Document</title> <style> input[type="checkbox"]{ display: none; } input[type="checkbox"] + label{ display: inline-block; padding: .3em .5em; background: #ccc; border: 1px solid rgba(0, 0, 0, .2); background-image: linear-gradient(#ddd,#bbb); text-align: center; border-radius: .3em; box-shadow: 0 1px white inset; text-shadow: 0 1px 1px white; } input[type="checkbox"]:checked + label{ box-shadow: .05em .1em .2em rgba(0, 0, 0, .6) inset; border-color: rgba(0, 0, 0, .3); background: #bbb; } </style> </head> <body> <input type="checkbox" id="anesome"/> <label for="anesome">anesome</label> </body>
四、通過陰影來弱化背景
- 傳統方式，增加一個背景元素和一個內容元素實現，背景遮罩擋住所有，內容元素展示一切，簡單不做示例。
- body上增加一個偽元素，與傳統方式一樣，只是減少背景元素而已
- 重點介紹box-shadow實現
- 實現方式讓內容元素產生一個巨大的陰影，不偏移也不模糊
- H5單位介紹（利用單位解決大屏遮罩層顯示不全的問題）
- em：相對父級的font-size，1em=16px;
- rem：相對根元素的font-size
- vh和vw：IE10 + 和現代瀏覽器 1vh = viewport的高的1%,vw相同;
- vmax和vmin
- ie10 + 和現代瀏覽器都支持vmin,ie全部都不支持vmax
- vmin表示vh和vw中比較小的值
- vmax表示vh和vw中比較大的值
- 1vmax表示1vh和1vm之間較大的值
- ch和ex
- ie9+和現代瀏覽器都支持，依據當前font-family的相對單位
- ch：字元0的寬度
- ex：小寫字元x的高度
- 當頁面有滾動條時，遮罩層的邊緣會露出來，除非用position:fixed定位，但又防止頁面本身就有滾動條
- box-shadow不能產生交互事件（獨立元素的遮罩層），只能在視覺上帶來引導
- box-shadow只限於沒有滾動條 + 只做引導層的場景。
- 示例代碼:
.wrap{ margin: 0 auto; width: 200px; height: 100px; box-shadow: 0 0 0 50vmax rgba(0, 0, 0, .8); }
五、通過模糊來弱化背景
- 主要利用blur來模糊背景
- 由於blur應用的元素，相對所有的子元素都會被模糊，所以除高亮元素之外其他元素都包含在一個main元素下麵。
- 示例代碼：
<head> <meta charset="UTF-8"> <title>Document</title> <style> main{ transition: .6s; } main.de-emphasized{ filter: blur(2px); } main.de-emphasized + dialog{ display: block; } </style> </head> <body> <main class="de-emphasized" >在圖6-16 中可以看到，這已經是一個巨大的進步了。不過，現在這個 模糊效果是突然出現的，看起來不是那麼自然，反而給人一種突兀的感覺。 由於CSS 濾鏡是可以設置動畫的，我們可以讓頁面背景的模糊過程以過渡 動畫的形式來呈現。</main> <dialog>dialog in html</dialog> </body>
六、滾動提示
- 利用radial-gradient做圓形徑向漸變
- radial-gradient(center,shape,size,start-color,...,stop-color);
- center：是一個坐標值，表示原點位置，預設為50% 50%
- shape：預設為ellipse（橢圓），可以設置為circle（正圓）
- size：四個值,closest-side（最近邊），farthest-side(最遠邊），closest-corner(最近角）,farthest-corner(最遠角）
- 角度都是離圓心最近與最遠的角，四個角度
- 示例代碼：
<head> <meta charset="UTF-8"> <title>Document</title> <style> .wrap{ overflow: auto; width: 10em; height: 8em; padding: .3em .5em; border: 1px solid silver; background: linear-gradient(white 30%, transparent), radial-gradient(at 50% 0, rgba(0, 0, 0, .2),transparent 70%); background-repeat: no-repeat; background-size: 100% 50px, 100% 15px; background-attachment: local, scroll; } .radi{ background: -webkit-radial-gradient(40% 37%, closest-corner, red, grey); width: 200px; height: 100px; } .radi02{ margin-top: 10px; background: -webkit-radial-gradient(40% 37%, farthest-corner, red, grey); width: 200px; height: 100px; } </style> </head> <body> <ul class="wrap" > <li>Ada Catlace</li> <li>Alan Purring</li> <li>Schrödingcat</li> <li>Tim Purrners-Lee</li> <li>WebKitty</li> <li>Json</li> <li>Void</li> <li>Neko</li> <li>NaN</li> <li>Cat5</li> <li>Vector</li> </ul> <div class="radi"></div> <div class="radi02"></div> </body>
七、圖片對比控制項
- 利用resize這個css3屬性，可以設置none（不可改變）、horizontal（水平）、vertical（垂直）、both（所有）三個值。
- both時，會在右下角有一個可改提示，其他沒有。
- 示例代碼：
<head> <meta charset="UTF-8"> <title>Document</title> <style> .wrap{ position: relative; display: inline-block; } .wrap > div{ position: absolute; top: 0; bottom: 0; left: 0; width: 50%; resize: horizontal; overflow: hidden; } .wrap > div::after{ position: absolute; content: ''; bottom: 0; right: 0; width: 12px; height: 12px; cursor: ew-resize; padding: 5px; background: linear-gradient(-45deg,white 50%, transparent 0); background-clip: content-box; } .wrap img{ display: block; user-select: none; } </style> </head> <body> <div class="wrap"> <div> <img src="../img/cat-alpha.png" alt=""> </div> <img src="../img/cat.png" alt=""> </div> </body>
- 利用h5的range標簽實現，需要Js的配合，使用其oninput事件監聽range組件改變的值。
- 示例代碼:
<head> <meta charset="UTF-8"> <title>Document</title> <style> .wrap{ position: relative; display: inline-block; } .wrap > div{ position: absolute; top: 0; bottom: 0; left: 0; width: 50%; overflow: hidden; } .wrap img{ display: block; user-select: none; } input[type="range"]{ position: absolute; bottom: 10px; width: 100%; user-select: none; } </style> </head> <body> <div class="wrap"> <div class ="img"> <img src="../img/cat-alpha.png" alt=""> </div> <img id="destImg" src="../img/cat.png" alt=""> </div> <script> window.onload = function(){ var rang = document.createElement('input'); rang.type='range'; rang.min="0"; rang.max="100"; var div = document.getElementsByClassName('img')[0]; var wrap = document.getElementsByClassName('wrap')[0]; rang.oninput = function(e){ div.style.width = this.value + '%'; } debugger; wrap.appendChild(rang); }; </script> </body>
