建站
咨詢
售后
建站咨詢
新聞中心
如果想學(xué)習(xí)更多css實用技巧, 可以參考筆者以下的文章:
創(chuàng)新互聯(lián)是專業(yè)的三水網(wǎng)站建設(shè)公司，三水接單;提供網(wǎng)站建設(shè)、成都網(wǎng)站制作,網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進行三水網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!
手?jǐn)]一個在線css三角形生成器
輕松使用純css3打造有點意思的故障藝術(shù) 使用css3實現(xiàn)一個類在線直播的隊列動畫css的border屬性和border-radius屬性
筆者在前面的文章中也分享過了如何利用border來實現(xiàn)不同的形狀, 比如三角形, 如下為原理圖:
利用這個原理我們只要把元素的border-radius 設(shè)置為圓形(比如50%), 我們是不是就能實現(xiàn)一個餅圖了呢? 我們來看看效果:
以上是設(shè)置一個邊的border-color的樣子和設(shè)置四個邊的border-color的樣子, 所以說實現(xiàn)餅圖用css就夠用了. 代碼如下:
.rotate-animate {
border:100px solid #f3f3f3;
border-radius:50%;
border-top:100px solid #2842d8;
}如果你想實現(xiàn)不同比例的餅圖, 其實只要合理計算好border-width即可, 有了以上知識, 我們結(jié)合animation動畫是不是可以實現(xiàn)下面的加載動畫了?
css代碼如下:
.rotate-animate {
border:100px solid #f3f3f3;
border-radius:50%;
border-top:100px solid #2842d8;
animation:rotate 2s linear infinite;
}
@keyframes rotate{
0%{
transform: rotate(0deg);
}
100%{
transform:rotate(360deg);
}
}我們在做css3動畫時經(jīng)常會用到transform 和 animation, 所以建議大家把這兩個屬性掌握.
補充:如果要實現(xiàn)扇形, 是不是也很簡單了?
實現(xiàn)更優(yōu)雅的圓環(huán)加載動畫
有了以上的css知識, 我們再來思考一下, 如何用最簡短的代碼實現(xiàn)一個圓環(huán)呢? 其實也很簡單, 我們在上面用到了圓角和border來做圓形和餅圖, 如果我們設(shè)置一個元素的寬度width和高度height, 并且背景透明(transparent), 會怎么樣呢, 我們來看看:
代碼如下:
.rotate-animate {
border:16px solid #f3f3f3;
border-radius:50%;
border-top:16px solid #2842d8;
width:100px;
height:100px;
}那么我們做圓環(huán)加載動畫, 就非常簡單了, 利用上面寫的旋轉(zhuǎn)動畫, 我們來看看效果:
圓環(huán)加載動畫的整代碼如下:
我們利用此特性還可以實現(xiàn)更多有意思的圖案和加載動畫, 大家可以細細品嘗. 筆者這里推薦2篇比較使用的css文章:
還有一些偏底層的css文章可以參考我之前的文章.
當(dāng)前文章：巧用Css圓角實現(xiàn)有點意思的加載動畫
標(biāo)題路徑：http://fisionsoft.com.cn/article/coccjph.html
