【前端動手玩創意】等待的轉圈圈效果 (1)

網頁前端前端前端工程師網頁網頁程式

Oo_花之舞__oO 2023-03-19 18:09:03 ‧ 2389 瀏覽

分享至

等待的轉圈圈效果

寫法解說

這個是使用到了CSS的效果，只要懂下面五個語法就可以完成囉！

筆記觀念

border-radius: 50%;

可以弄出一個圓形

border-top

boder是邊框，邊框可以指定上下左右

keyframes

自行設定關鍵字的動畫通常會配合幾% 例如 0% 就是最開始 100%就是動畫最結束的樣子

transform: rotate(360deg);

animation: infinite;

讓動畫無限重複

程式碼寫法

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
</head>
<body>

<h2>How To Create A Loader</h2>

<div class="loader"></div>

</body>
</html>

心得

這個等待效果看起來滿難的(? 畢竟是個非常常見實用的功能
沒想到三言兩語就完成了(*´∀)~♥`
真的是有點太輕鬆了呢(?

沒關係其實練習的重點不是這東西的難度重點是你跨出去嘗試哦!!
願意去寫他就是進步就是勝利
讓我們未來繼續動手玩創意吧~~

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 則留言

期望能夠成為頂尖打工人

iT邦新手 4 級 ‧ 2023-03-23 19:05:37

業界工作一段時間後，原生js、css的用處真的不太大，基本都是高度模組化的元件在開發

回應 1
檢舉

Oo_花之舞__oO iT邦新手 1 級 ‧ 2023-03-23 21:06:42 檢舉

框架也都是原生JS在寫的你敢跟我說原生JS不重要？
那代表你可能也只是個不重要的小螺絲
如果JS原生都不熟怎麼可能做好前端的工作

其實我也沒在用原生JS跟CSS了這系列是新手向教學
所以從基本開始給新手慢慢學
您這種大師等級的應該要看國外更新第一手資訊啦XDDD
這些給新手很有幫助٩(◦`꒳´◦)۶

登入發表回應

我要留言

立即登入留言

參賽組數

1123 組

團體組數

52 組

累計文章數

23096 篇

完賽人數

656 人

15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css react 程式設計 vue.js

IT邦幫忙