摘要:效果預(yù)覽按下右側(cè)的點擊預(yù)覽按鈕可以在當前頁面預(yù)覽,點擊鏈接可以全屏預(yù)覽。可交互視頻此視頻是可以交互的,你可以隨時暫停視頻,編輯視頻中的代碼。
效果預(yù)覽
按下右側(cè)的“點擊預(yù)覽”按鈕可以在當前頁面預(yù)覽,點擊鏈接可以全屏預(yù)覽。
https://codepen.io/comehope/pen/KBxYZg/
可交互視頻此視頻是可以交互的,你可以隨時暫停視頻,編輯視頻中的代碼。
請用 chrome, safari, edge 打開觀看。
https://scrimba.com/p/pEgDAM/cagbkSL
源代碼下載每日前端實戰(zhàn)系列的全部源代碼請從 github 下載:
https://github.com/comehope/front-end-daily-challenges
代碼解讀定義 dom,容器中包含 3 個元素,代表 3 個圓點:
居中顯示:
body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(to right, silver, teal); }
定義摩天輪的直徑,其他長度均以此值為基本尺度:
.loader { --diameter: 10em; }
定義容器尺寸,寬是高的2倍:
.loader { --width: calc(var(--diameter) * 2); width: var(--width); height: var(--diameter); }
定義偽元素的共享屬性:
.loader { position: relative; } .loader::before, .loader::after { content: ""; position: absolute; bottom: 0; }
畫出底部的軌道,同時定義了一個表示線粗細的變量:
.loader { --stroke-width: calc(var(--diameter) / 40); color: white; } .loader::before { width: inherit; height: var(--stroke-width); background-color: currentColor; }
畫出中部的圓形軌道:
.loader::after { box-sizing: border-box; width: var(--diameter); height: var(--diameter); border: var(--stroke-width) solid; border-radius: 50%; left: 25%; }
畫出一個圓點,同時定義了一個表示圓點直徑的變量:
.loader { --dot-diameter: calc(var(--diameter) / 10); } .loader span { position: absolute; width: var(--dot-diameter); height: var(--dot-diameter); background-color: currentColor; border-radius: 50%; bottom: var(--stroke-width); left: calc((var(--width) - var(--dot-diameter)) / 2); }
為圓點增加沿圓形軌道旋轉(zhuǎn)的動畫效果:
.loader span { animation: rotating 2s linear infinite; --vertical-center: calc((var(--diameter) / 2 - var(--stroke-width) - var(--dot-diameter)) * -1); transform-origin: 50% var(--vertical-center); } @keyframes rotating { 0%, 10% { transform: rotate(0deg); } 60%, 100% { transform: rotate(-1turn); } }
為圓點增加移動的動畫效果:
.loader span { animation: run 2s linear infinite, rotating 2s linear infinite; } @keyframes run { 0% { left: calc(var(--dot-diameter) * -1); } 10%, 60% { left: calc((var(--width) - var(--dot-diameter)) / 2); } 70%, 100% { left: calc(var(--width)); } }
為另外 2 個圓點設(shè)置動畫延時,使 3 個圓點看起來像是緊挨著的 3 個車廂:
.loader span:nth-child(1) { animation-delay: 0.075s; } .loader span:nth-child(2) { animation-delay: 0.15s; }
最后,隱藏容器外的內(nèi)容:
.loader { overflow: hidden; }
大功告成!
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/52814.html
摘要:效果預(yù)覽按下右側(cè)的點擊預(yù)覽按鈕可以在當前頁面預(yù)覽,點擊鏈接可以全屏預(yù)覽。可交互視頻此視頻是可以交互的,你可以隨時暫停視頻,編輯視頻中的代碼。 showImg(https://segmentfault.com/img/bVbeYYy?w=400&h=300); 效果預(yù)覽 按下右側(cè)的點擊預(yù)覽按鈕可以在當前頁面預(yù)覽,點擊鏈接可以全屏預(yù)覽。 https://codepen.io/comehop...
摘要:過往項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份發(fā)布的項目前端每日實戰(zhàn)專欄每天分解一個前端項目,用視頻記錄編碼過程,再配合詳細的代碼解讀,是學習前端開發(fā)的活的參考書視頻演示如何用純創(chuàng)作一臺咖啡機視頻演示如何用 過往項目 2018 年 6 月份項目匯總(共 27 個項目) 2018 年 5 月份項目匯總(共 30 個項目) 2018 年 4 月份項目匯總(...
摘要:過往項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份發(fā)布的項目前端每日實戰(zhàn)專欄每天分解一個前端項目,用視頻記錄編碼過程,再配合詳細的代碼解讀,是學習前端開發(fā)的活的參考書視頻演示如何用純創(chuàng)作一臺咖啡機視頻演示如何用 過往項目 2018 年 6 月份項目匯總(共 27 個項目) 2018 年 5 月份項目匯總(共 30 個項目) 2018 年 4 月份項目匯總(...
閱讀 791·2021-09-22 16:01
閱讀 2083·2021-08-20 09:37
閱讀 1693·2019-08-30 15:54
閱讀 1689·2019-08-30 15:44
閱讀 826·2019-08-28 18:23
閱讀 3005·2019-08-26 12:17
閱讀 1005·2019-08-26 11:56
閱讀 1539·2019-08-23 16:20