摘要:效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。可交互視頻此視頻是可以交互的,你可以隨時暫停視頻,編輯視頻中的代碼。
效果預覽
按下右側的“點擊預覽”按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。
https://codepen.io/comehope/pen/ejZWKL
可交互視頻此視頻是可以交互的,你可以隨時暫停視頻,編輯視頻中的代碼。
請用 chrome, safari, edge 打開觀看。
https://scrimba.com/p/pEgDAM/cawq6cB
源代碼下載每日前端實戰系列的全部源代碼請從 github 下載:
https://github.com/comehope/front-end-daily-challenges
代碼解讀定義 dom,容器中包含 9 個元素:
居中顯示:
body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: black; }
定義容器尺寸:
.container { width: 30em; height: 30em; font-size: 12px; }
設置容器中線條的樣式:
.container { color: lime; } .container span { position: absolute; width: 5em; height: 5em; border-style: solid; border-width: 1em 1em 0 0; border-color: currentColor transparent; border-radius: 50%; }
讓線條在容器中居中顯示:
.container { display: flex; align-items: center; justify-content: center; }
定義變量,使線條從中心向外側逐漸延伸:
.container span { --diameter: calc(5em + (var(--n) - 1) * 3em); width: var(--diameter); height: var(--diameter); } .container span:nth-child(1) { --n: 1; } .container span:nth-child(2) { --n: 2; } .container span:nth-child(3) { --n: 3; } .container span:nth-child(4) { --n: 4; } .container span:nth-child(5) { --n: 5; } .container span:nth-child(6) { --n: 6; } .container span:nth-child(7) { --n: 7; } .container span:nth-child(8) { --n: 8; } .container span:nth-child(9) { --n: 9; }
設置讓線條旋轉的動畫效果:
.container span { animation: rotating linear infinite; animation-duration: calc(5s / (9 - var(--n) + 1)); } @keyframes rotating { to { transform: rotate(1turn); } }
定義改變顏色的動畫效果,以色相環一周 360 度為 100%,--percent 變量是指位于這個 100% 的哪個位置:
@keyframes change-color { 0%, 100% { --percent: 0; } 10% { --percent: 10; } 20% { --percent: 20; } 30% { --percent: 30; } 40% { --percent: 40; } 50% { --percent: 50; } 60% { --percent: 60; } 70% { --percent: 70; } 80% { --percent: 80; } 90% { --percent: 90; } }
最后,把改變顏色的動畫效果應用到容器上:
.container { --deg: calc(var(--percent) / 100 * 360deg); color: hsl(var(--deg), 100%, 50%); animation: change-color 5s linear infinite; }
大功告成!
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/52660.html
摘要:效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。可交互視頻此視頻是可以交互的,你可以隨時暫停視頻,編輯視頻中的代碼。 showImg(https://segmentfault.com/img/bVbdQPp?w=400&h=302); 效果預覽 按下右側的點擊預覽按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。 https://codepen.io/comehop...
摘要:過往項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份發布的項目前端每日實戰專欄每天分解一個前端項目,用視頻記錄編碼過程,再配合詳細的代碼解讀,是學習前端開發的活的參考書視頻演示如何用純創作一臺咖啡機視頻演示如何用 過往項目 2018 年 6 月份項目匯總(共 27 個項目) 2018 年 5 月份項目匯總(共 30 個項目) 2018 年 4 月份項目匯總(...
摘要:過往項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份發布的項目前端每日實戰專欄每天分解一個前端項目,用視頻記錄編碼過程,再配合詳細的代碼解讀,是學習前端開發的活的參考書視頻演示如何用純創作一臺咖啡機視頻演示如何用 過往項目 2018 年 6 月份項目匯總(共 27 個項目) 2018 年 5 月份項目匯總(共 30 個項目) 2018 年 4 月份項目匯總(...
閱讀 2345·2021-11-11 16:54
閱讀 2596·2021-09-26 09:47
閱讀 3978·2021-09-08 09:36
閱讀 2727·2021-07-25 21:37
閱讀 927·2019-08-30 15:54
閱讀 2540·2019-08-30 14:22
閱讀 3245·2019-08-30 13:57
閱讀 2558·2019-08-29 17:17