生活随笔
收集整理的這篇文章主要介紹了
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>
<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的相對單位
- 當頁面有滾動條時，遮罩層的邊緣會露出來，除非用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>
總結
以上是生活随笔為你收集整理的CSS3新特性应用之用户体验的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
