1.用CSS動畫實現省略號動畫

.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.背景漸變動畫
目前，你不能為漸變添加動畫,它通過改變背景位置，讓它看起來有動畫效果。

button {background-image: linear-gradient(#5187c4, #1c2f45);background-size: auto 200%;background-position: 0 100%;transition: background-position 0.5s; } button:hover {background-position: 0 0; } <button>ddd</button>

4.基于文件格式使用不同的樣式
為了更容易知道鏈接的目標，有時你想讓一些鏈接看起來和其它的不同。下面的片段在文本鏈接前添加一個圖標，對不同的資源使用不同的圖標或圖片：

a[href^="http://"]{padding-right: 20px;background: url(external.gif) no-repeat center right; } /* emails */ a[href^="mailto:"]{padding-right: 20px;background: url(email.png) no-repeat center right; }/* pdfs */ a[href$=".pdf"]{padding-right: 20px;background: url(pdf.png) no-repeat center right; }

5.個性圓角

#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.自定義文本選擇

::selection { background: #e2eae2; } ::-moz-selection { background: #e2eae2; } ::-webkit-selection { background: #e2eae2; } <p>ddddddddd</p>

總結

以上是生活随笔為你收集整理的css3骚操作记录的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。