摘要:效果預(yù)覽按下右側(cè)的點(diǎn)擊預(yù)覽按鈕可以在當(dāng)前頁面預(yù)覽,點(diǎn)擊鏈接可以全屏預(yù)覽。可交互視頻教程此視頻是可以交互的,你可以隨時(shí)暫停視頻,編輯視頻中的代碼。
效果預(yù)覽
按下右側(cè)的“點(diǎn)擊預(yù)覽”按鈕可以在當(dāng)前頁面預(yù)覽,點(diǎn)擊鏈接可以全屏預(yù)覽。
https://codepen.io/comehope/pen/YLRLaM
可交互視頻教程此視頻是可以交互的,你可以隨時(shí)暫停視頻,編輯視頻中的代碼。
請(qǐng)用 chrome, safari, edge 打開觀看。
https://scrimba.com/p/pEgDAM/cGynQUa
源代碼下載每日前端實(shí)戰(zhàn)系列的全部源代碼請(qǐng)從 github 下載:
https://github.com/comehope/front-end-daily-challenges
代碼解讀定義dom,設(shè)置3層容器:
</>復(fù)制代碼
居中顯示:
</>復(fù)制代碼
html,
body,
.loader {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: black;
}
定義容器尺寸:
</>復(fù)制代碼
.loader {
width: 200px;
height: 200px;
position: relative;
}
.loader .face {
position: absolute;
width:100%;
height: 100%;
border: 2px solid white;
border-radius: 50%;
}
畫出半圓弧:
</>復(fù)制代碼
.loader .face {
--color: gold;
border-top-color: var(--color);
border-left-color: var(--color);
}
畫出弧線的端點(diǎn):
</>復(fù)制代碼
.loader .face .circle {
position: absolute;
top: 50%;
left: 50%;
width: 50%;
height: 1px;
background-color: white;
transform-origin: left;
transform: rotate(-45deg);
}
.loader .face .circle::before {
position: absolute;
top: -5px;
right: -5px;
content: "";
background-color: var(--color);
width: 10px;
height: 10px;
border-radius: 50%;
}
給端點(diǎn)增加光暈效果:
</>復(fù)制代碼
.loader .face .circle::before {
box-shadow: 0 0 20px var(--color),
0 0 40px var(--color),
0 0 60px var(--color),
0 0 80px var(--color),
0 0 100px var(--color),
0 0 0 5px rgba(255,255,0,0.1);
}
隱藏掉輔助線:
</>復(fù)制代碼
.loader .face {
border: 2px solid transparent;
}
.loader .face .circle {
background-color: transparent;
}
在 dom 中再增加一條弧線:
</>復(fù)制代碼
調(diào)整2條弧線的直徑,變成同心弧:
</>復(fù)制代碼
.loader .face:nth-child(1) {
width:100%;
height: 100%;
}
.loader .face:nth-child(2) {
width:70%;
height: 70%;
}
調(diào)整2條弧線的顏色:
</>復(fù)制代碼
.loader .face:nth-child(1) {
--color: gold;
}
.loader .face:nth-child(2) {
--color: lime;
}
調(diào)整2條弧線的端點(diǎn)位置:
</>復(fù)制代碼
.loader .face:nth-child(1) {
--deg: 0deg;
}
.loader .face:nth-child(2) {
--deg: 180deg;
}
.loader .face .circle {
transform: rotate(calc(var(--deg) - 45deg));
}
定義動(dòng)畫效果:
</>復(fù)制代碼
.loader .face {
animation: animate 3s linear infinite;
}
@keyframes animate
{
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
最后,讓第 2 條弧線反向旋轉(zhuǎn):
</>復(fù)制代碼
.loader .face:nth-child(2) {
animation-direction: reverse;
}
大功告成!
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.specialneedsforspecialkids.com/yun/52385.html
摘要:效果預(yù)覽按下右側(cè)的點(diǎn)擊預(yù)覽按鈕可以在當(dāng)前頁面預(yù)覽,點(diǎn)擊鏈接可以全屏預(yù)覽。可交互視頻教程此視頻是可以交互的,你可以隨時(shí)暫停視頻,編輯視頻中的代碼。 showImg(https://segmentfault.com/img/bVbcWJZ?w=500&h=500); 效果預(yù)覽 按下右側(cè)的點(diǎn)擊預(yù)覽按鈕可以在當(dāng)前頁面預(yù)覽,點(diǎn)擊鏈接可以全屏預(yù)覽。 https://codepen.io/comeh...
摘要:過往項(xiàng)目年月份項(xiàng)目匯總共個(gè)項(xiàng)目年月份發(fā)布的項(xiàng)目前端每日實(shí)戰(zhàn)專欄每天分解一個(gè)前端項(xiàng)目,用視頻記錄編碼過程,再配合詳細(xì)的代碼解讀,是學(xué)習(xí)前端開發(fā)的活的參考書頻演示如何用純創(chuàng)作一種按鈕被瞄準(zhǔn)的交互特效視頻演示如何用純創(chuàng)作一個(gè)同心圓弧旋轉(zhuǎn)特效視頻演 過往項(xiàng)目 2018 年 4 月份項(xiàng)目匯總(共 8 個(gè)項(xiàng)目) 2018 年 5 月份發(fā)布的項(xiàng)目 《前端每日實(shí)戰(zhàn)》專欄每天分解一個(gè)前端項(xiàng)目,用視頻記錄...
摘要:過往項(xiàng)目年月份項(xiàng)目匯總共個(gè)項(xiàng)目年月份發(fā)布的項(xiàng)目前端每日實(shí)戰(zhàn)專欄每天分解一個(gè)前端項(xiàng)目,用視頻記錄編碼過程,再配合詳細(xì)的代碼解讀,是學(xué)習(xí)前端開發(fā)的活的參考書頻演示如何用純創(chuàng)作一種按鈕被瞄準(zhǔn)的交互特效視頻演示如何用純創(chuàng)作一個(gè)同心圓弧旋轉(zhuǎn)特效視頻演 過往項(xiàng)目 2018 年 4 月份項(xiàng)目匯總(共 8 個(gè)項(xiàng)目) 2018 年 5 月份發(fā)布的項(xiàng)目 《前端每日實(shí)戰(zhàn)》專欄每天分解一個(gè)前端項(xiàng)目,用視頻記錄...
閱讀 1324·2021-11-24 10:24
閱讀 4167·2021-11-22 15:29
閱讀 1101·2019-08-30 15:53
閱讀 2801·2019-08-30 10:54
閱讀 1988·2019-08-29 17:26
閱讀 1293·2019-08-29 17:08
閱讀 613·2019-08-28 17:55
閱讀 1591·2019-08-26 14:01