css3骚操作记录
1.用CSS動(dòng)畫實(shí)現(xiàn)省略號(hào)動(dòng)畫
.loading:after {overflow: hidden;display: inline-block;vertical-align: bottom;animation: ellipsis 2s infinite;content: "\2026"; /* ascii code for the ellipsis character */}@keyframes ellipsis { from {width: 2px;}to {width: 15px;}} <p class="loading">正在加載中</p>2.制造模糊文本
.blurry-text {color: transparent;text-shadow: 0 0 5px rgba(0,0,0,0.5); } `` ```html <p class="blurry-text">正在加載中</p>3.背景漸變動(dòng)畫
目前,你不能為漸變添加動(dòng)畫,它通過(guò)改變背景位置,讓它看起來(lái)有動(dòng)畫效果。
4.基于文件格式使用不同的樣式
為了更容易知道鏈接的目標(biāo),有時(shí)你想讓一些鏈接看起來(lái)和其它的不同。下面的片段在文本鏈接前添加一個(gè)圖標(biāo),對(duì)不同的資源使用不同的圖標(biāo)或圖片:
5.個(gè)性圓角
#container {width: 50px;height: 50px;background-color: red;/* -webkit-border-radius: 4px 3px 6px 10px;-moz-border-radius: 4px 3px 6px 10px;-o-border-radius: 4px 3px 6px 10px; */border-radius: 4px 3px 6px 19px;}
6.自定義文本選擇
總結(jié)
- 上一篇: 为减少对 ARM 的依赖,消息称三星加快
- 下一篇: js中的事件循环和宏任务和微任务的理解