巧用css圓角實現(xiàn)有點意思的加載動畫
作為一名前端工程師, 需要對css技巧有充分的研究和了解, 接下來筆者將會帶大家一起掌握如何用css的圓角屬性來實現(xiàn)有點意思的加載動畫.
css實用技巧, 可以參考筆者以下的文章:
手擼一個在線css三角形生成器?
輕松使用純css3打造有點意思的故障藝術(shù)?
使用css3實現(xiàn)一個類在線直播的隊列動畫css的border屬性和border-radius屬性
border來實現(xiàn)不同的形狀, 比如三角形, 如下為原理圖:
border-radius?設(shè)置為圓形(比如50%), 我們是不是就能實現(xiàn)一個餅圖了呢? 我們來看看效果:
border-color的樣子和設(shè)置四個邊的border-color的樣子, 所以說實現(xiàn)餅圖用css就夠用了. 代碼如下:.rotate-animate?{
????border:100px?solid?#f3f3f3;
????border-radius:50%;
????border-top:100px?solid?#2842d8;
}
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;
}
<style>
????.rotate-animate?{
????????border:16px?solid?#f3f3f3;
????????border-radius:50%;
????????border-top:16px?solid?#2842d8;
????????width:100px;
????????height:100px;
????????animation:rotate?2s?linear?infinite;
????}
????.rotate-animate.fill-color?{
????????margin-left:?20px;
????????border-color:?#2842d8?#d1b516?#cf4928?#27c965;
????}
????@keyframes?rotate{
????????0%{
????????????transform:?rotate(0deg);
????????}
????????100%{
????????????transform:rotate(360deg);
????????}
????}
style>
<div?class="rotate-animate">div>
<div?class="rotate-animate?fill-color">div>
css文章:
開源項目更新日志
H5-Dooring可視化搭建平臺還在持續(xù)更新, 主要更新如下:添加地圖組件, 可自定義地理位置信息和標(biāo)注 修復(fù)圖片庫不顯示問題 添加日歷組件 優(yōu)化拖拽下載代碼功能
覺得有用 ？喜歡就在看，順便點個贊吧，你的支持是我最大的鼓勵！
關(guān)注數(shù)：10億+?文章數(shù)：10億+
粉絲量：10億+?點擊量：10億+
?
懸賞博主專區(qū)請掃描這里
喜愛數(shù)：?1億+?發(fā)帖數(shù)：?1億+
回帖數(shù)：?1億+?結(jié)貼率：?99.9%
—————END—————
喜歡本文的朋友，歡迎關(guān)注公眾號?程序員哆啦A夢，收看更多精彩內(nèi)容
點個[在看]，是對小達最大的支持！
如果覺得這篇文章還不錯，來個【分享、點贊、在看】三連吧，讓更多的人也看到~
評論
圖片
表情