摘要:效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。可交互視頻此視頻是可以交互的,你可以隨時暫停視頻,編輯視頻中的代碼。
效果預覽
按下右側的“點擊預覽”按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。
https://codepen.io/comehope/pen/OBgBJJ
可交互視頻此視頻是可以交互的,你可以隨時暫停視頻,編輯視頻中的代碼。
請用 chrome, safari, edge 打開觀看。
https://scrimba.com/p/pEgDAM/c83BKt3
源代碼下載每日前端實戰系列的全部源代碼請從 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; }
設置容器中子元素的布局方式,形成一個 3 * 3 的網格,其中 --columns 是網格每一邊上的子元素數量:
.container { display: grid; --columns: 3; grid-template-columns: repeat(var(--columns), 1fr); }
定義子元素樣式:
.container span { width: 25px; height: 25px; color: lime; background-color: currentColor; }
增加子元素的動畫效果,總動畫時長是 5 秒,其中第 1 秒(0% ~ 20%)有動畫,其余 4 秒(20% ~ 100%)靜止:
.container span { transform: scale(0); animation: spin 5s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg) scale(1); } 5%, 15% { transform: rotate(90deg) scale(0); background: white; } 17.5% { transform: rotate(180deg) scale(1); background-color: currentColor; } 20%, 100% { transform: rotate(90deg) scale(0); } }
設置動畫延時,使各子元素的動畫隨機延時 4 秒之內的任意時間:
.container span { animation-delay: calc(var(--delay) * 1s); } .container span:nth-child(1) { --delay: 0.8 } .container span:nth-child(2) { --delay: 0.2 } .container span:nth-child(3) { --delay: 1.9 } .container span:nth-child(4) { --delay: 3.9 } .container span:nth-child(5) { --delay: 2.8 } .container span:nth-child(6) { --delay: 3.5 } .container span:nth-child(7) { --delay: 1.5 } .container span:nth-child(8) { --delay: 2.3 } .container span:nth-child(9) { --delay: 1.7 }
至此,靜態效果完成,接下來批量處理 dom 元素。
引入 d3 庫:
刪除掉 css 文件中的 --columns 變量聲明,用 d3 為變量賦值:
const COLUMNS = 3; d3.select(".container") .style("--columns", COLUMNS);
刪除掉 html 文件中的 子元素,用 d3 動態生成:
d3.select(".container") .style("--columns", COLUMNS) .selectAll("span") .data(d3.range(COLUMNS * COLUMNS)) .enter() .append("span");
刪除掉 css 文件中的 --delay 變量聲明,用 d3 為變量生成隨機數:
d3.select(".container") .style("--columns", COLUMNS) .selectAll("span") .data(d3.range(COLUMNS * COLUMNS)) .enter() .append("span") .style("--delay", () => Math.random() * 4);
最后,把邊長改為 15,生成更多的子元素,加強視覺效果:
const COLUMNS = 15;
大功告成!
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/98294.html
摘要:效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。可交互視頻此視頻是可以交互的,你可以隨時暫停視頻,編輯視頻中的代碼。 showImg(https://segmentfault.com/img/bVbh3xW?w=400&h=304); 效果預覽 按下右側的點擊預覽按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。 https://codepen.io/comehop...
摘要:過往項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月至年月發布的項目前端每日實戰專欄每天分解一個前端項目,用視頻記錄編碼過程,再配合詳細的代碼解讀, 過往項目 2018 年 9 月份項目匯總(共 26 個項目) 2018 年 8 月份項目匯總(共 29 個項目) 2018 年 7 月份項目匯總(...
摘要:過往項目年月份項目匯總共個項目年月份發布的項目前端每日實戰專欄每天分解一個前端項目,用視頻記錄編碼過程,再配合詳細的代碼解讀,是學習前端開發的活的參考書頻演示如何用純創作一種按鈕被瞄準的交互特效視頻演示如何用純創作一個同心圓弧旋轉特效視頻演 過往項目 2018 年 4 月份項目匯總(共 8 個項目) 2018 年 5 月份發布的項目 《前端每日實戰》專欄每天分解一個前端項目,用視頻記錄...
閱讀 623·2023-04-26 01:53
閱讀 2749·2021-11-17 17:00
閱讀 2880·2021-09-04 16:40
閱讀 1983·2021-09-02 15:41
閱讀 830·2019-08-26 11:34
閱讀 1222·2019-08-26 10:16
閱讀 1335·2019-08-23 17:51
閱讀 815·2019-08-23 16:50