文字加載...動畫

html

創(chuàng)新互聯(lián)是一家專注于成都網(wǎng)站設(shè)計、成都網(wǎng)站制作與策劃設(shè)計,白云網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十多年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:白云等地區(qū)。白云做網(wǎng)站價格咨詢:13518219792

 
 
 
 

  
  
  
  
正在加載中...
 
 
 
 

css

 
 
 
 

  
  
  
  
dot{ 
  
  
  
  
 display: inline-block; 
  
  
  
  
 height: 1em; 
  
  
  
  
 line-height: 1; 
  
  
  
  
 text-align: left; 
  
  
  
  
 vertical-align: -.25em; 
  
  
  
  
 overflow: hidden; 
  
  
  
  
} 
  
  
  
  
dot::before{ 
  
  
  
  
 display: block; 
  
  
  
  
 content: '...\A..\A.'; 
  
  
  
  
 white-space: pre-wrap; 
  
  
  
  
 animation: dot 2s infinite step-start both; 
  
  
  
  
} 
  
  
  
  
@keyframes dot{ 
  
  
  
  
 33% { 
  
  
  
  
 transform: translateY(-2em); 
  
  
  
  
 } 
  
  
  
  
 66% { 
  
  
  
  
 transform: translateY(-1em); 
  
  
  
  
 } 
  
  
  
  
}
 
 
 
 

如果你看上圖代碼沒有看懂，請看下圖，我注釋掉一行代碼，你就明白了。原來是dot元素，沿著Y軸在循環(huán)位移，隱藏掉就讓你看到了加載的動畫效果。

border 實現(xiàn)邊框

當(dāng)你需要這樣一個上傳文件，按鈕時，你考慮的是找設(shè)計弄個圖片，還是自己寫一個？？？

其實CSS寫，也很簡單的。

 
 
 
 

  
  
  
  
添加圖片
  
  
  
  
.upload{ 
  
  
  
  
 position: relative; 
  
  
  
  
 display: inline-block; 
  
  
  
  
 width: 76px; 
  
  
  
  
 height: 76px; 
  
  
  
  
 color: #ccc; 
  
  
  
  
 border: 2px dashed; /*邊框虛線*/ 
  
  
  
  
 text-indent: -12em; /*使其文字看不到*/ 
  
  
  
  
 transition: color .25s; /*hover事件：顏色漸變動畫*/ 
  
  
  
  
 overflow: hidden; 
  
  
  
  
 margin: 50px 100px; 
  
  
  
  
} 
  
  
  
  
/*用before/after偽類做 + 號樣式*/ 
  
  
  
  
.upload:before, .upload:after{ 
  
  
  
  
 content: ''; 
  
  
  
  
 position: absolute; 
  
  
  
  
 top: 50%; 
  
  
  
  
 left: 50%; 
  
  
  
  
} 
  
  
  
  
.upload:hover{ 
  
  
  
  
 color: #34538b; 
  
  
  
  
} 
  
  
  
  
.upload::before{ 
  
  
  
  
 width: 20px; 
  
  
  
  
 border-top: 4px solid; 
  
  
  
  
 margin: -2px 0 0 -10px; 
  
  
  
  
} 
  
  
  
  
.upload::after{ 
  
  
  
  
 height: 20px; 
  
  
  
  
 border-left: 4px solid; 
  
  
  
  
 margin: -10px 0 0 -2px; 
  
  
  
  
}
 
 
 
 

不規(guī)則的投影 filter

當(dāng)我們想給一個矩形或其他能用 border-radius 生成的形狀加投影時，用 box-shadow 都可以解決，如下圖：

但是，當(dāng)元素添加了一些偽元素或半透明的裝飾之后，box-shadow就有些 力不從心了，因為 border-radius 會無恥地忽視透明部分。這類情況包括下列幾種情況:

1、半透明圖像、背景圖像、或者 border-image(比如老式的金質(zhì)像框);

2、元素設(shè)置了點狀、虛線或半透明的邊框，但沒有背景(或者當(dāng) background-clip 不是 border-box 時);

3、對話氣泡，它的小尾巴通常是用偽元素生成的;

4、幾乎所有的折角效果

5、通過 clip-path 生成的形狀。

下面來看看這個示例： html代碼

 
 
 
 

  
  
  
  
不規(guī)則的投影