css3骚操作记录

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>