日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
前端程序員：巧用CSS圓角實(shí)現(xiàn)有點(diǎn)意思的加載動(dòng)畫

css的border屬性和border-radius屬性

筆者在前面的文章中也分享過了如何利用border來實(shí)現(xiàn)不同的形狀, 比如三角形, 如下為原理圖:

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、小程序開發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了樂亭免費(fèi)建站歡迎大家使用！

利用這個(gè)原理我們只要把元素的border-radius 設(shè)置為圓形(比如50%), 我們是不是就能實(shí)現(xiàn)一個(gè)餅圖了呢? 我們來看看效果:

以上是設(shè)置一個(gè)邊的border-color的樣子和設(shè)置四個(gè)邊的border-color的樣子, 所以說實(shí)現(xiàn)餅圖用css就夠用了. 代碼如下:

 
 
 
    
  
  
  
  1. .rotate-animate {
    2. 
  
  
  
  2.     border:100px solid #f3f3f3;
    3. 
  
  
  
  3.     border-radius:50%;
    4. 
  
  
  
  4.     border-top:100px solid #2842d8;
    5. 
  
  
  
  5. }
    6.

如果你想實(shí)現(xiàn)不同比例的餅圖, 其實(shí)只要合理計(jì)算好border-width即可, 有了以上知識(shí), 我們結(jié)合animation動(dòng)畫是不是可以實(shí)現(xiàn)下面的加載動(dòng)畫了?

css代碼如下:

 
 
 
    
  
  
  
  1. .rotate-animate {
    2. 
  
  
  
  2.     border:100px solid #f3f3f3;
    3. 
  
  
  
  3.     border-radius:50%;
    4. 
  
  
  
  4.     border-top:100px solid #2842d8;
    5. 
  
  
  
  5.     animation:rotate 2s linear infinite;
    6. 
  
  
  
  6. }
    7. 
  
  
  
  7. @keyframes rotate{
    8. 
  
  
  
  8.     0%{
    9. 
  
  
  
  9.         transform: rotate(0deg);
    10. 
  
  
  
  10.     }
    11. 
  
  
  
  11.     100%{
    12. 
  
  
  
  12.         transform:rotate(360deg);
    13. 
  
  
  
  13.     }
    14. 
  
  
  
  14. }
    15.

我們?cè)谧鯿ss3動(dòng)畫時(shí)經(jīng)常會(huì)用到transform 和 animation, 所以建議大家把這兩個(gè)屬性掌握.

補(bǔ)充:如果要實(shí)現(xiàn)扇形, 是不是也很簡單了?

實(shí)現(xiàn)更優(yōu)雅的圓環(huán)加載動(dòng)畫

有了以上的css知識(shí), 我們?cè)賮硭伎家幌? 如何用最簡短的代碼實(shí)現(xiàn)一個(gè)圓環(huán)呢? 其實(shí)也很簡單, 我們?cè)谏厦嬗玫搅藞A角和border來做圓形和餅圖, 如果我們?cè)O(shè)置一個(gè)元素的寬度width和高度height, 并且背景透明(transparent), 會(huì)怎么樣呢, 我們來看看:

代碼如下:

 
 
 
    
  
  
  
  1. .rotate-animate {
    2. 
  
  
  
  2.     border:16px solid #f3f3f3;
    3. 
  
  
  
  3.     border-radius:50%;
    4. 
  
  
  
  4.     border-top:16px solid #2842d8;
    5. 
  
  
  
  5.     width:100px;
    6. 
  
  
  
  6.     height:100px;
    7. 
  
  
  
  7. }
    8.

那么我們做圓環(huán)加載動(dòng)畫, 就非常簡單了, 利用上面寫的旋轉(zhuǎn)動(dòng)畫, 我們來看看效果:

圓環(huán)加載動(dòng)畫的整代碼如下:

我們利用此特性還可以實(shí)現(xiàn)更多有意思的圖案和加載動(dòng)畫, 大家可以細(xì)細(xì)品嘗.

還有一些偏底層的css文章可以參考我之前的文章.

開源項(xiàng)目更新日志

目前H5-Dooring可視化搭建平臺(tái)還在持續(xù)更新, 主要更新如下: 添加地圖組件, 可自定義地理位置信息和標(biāo)注 修復(fù)圖片庫不顯示問題 添加日歷組件 優(yōu)化拖拽下載代碼功能


分享名稱：前端程序員：巧用CSS圓角實(shí)現(xiàn)有點(diǎn)意思的加載動(dòng)畫
標(biāo)題URL：http://m.5511xx.com/article/coesidd.html