摘要:引入庫用創建六邊形的元素用為六邊形的和變量賦值刪除掉文件中的六邊形元素,和文件中聲明的變量。最后,把六邊形的數量改為個大功告成
效果預覽
按下右側的“點擊預覽”按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。
https://codepen.io/comehope/pen/NBvrWL
可交互視頻此視頻是可以交互的,你可以隨時暫停視頻,編輯視頻中的代碼。
請用 chrome, safari, edge 打開觀看。
https://scrimba.com/p/pEgDAM/czD3PhM
源代碼下載每日前端實戰系列的全部源代碼請從 github 下載:
https://github.com/comehope/front-end-daily-challenges
代碼解讀定義 dom,容器中包含 1 個內含 5 個 的 居中顯示: 定義圓形的外層容器的尺寸: 在六邊形容器中畫出 1 個矩形: 用偽元素再創建 2 個相同大小的矩形,一起組成一個六邊形: 讓六邊形的顏色交錯呈現: 設置變量,讓六邊形逐漸縮小,小六邊形重疊在大六邊形的上面: 再設置變量,讓六邊形依次傾斜不同的角度: 定義動畫效果: 隱藏容器外的內容: 接下來用 d3 來批量創建六邊形。 用 d3 創建六邊形的 dom 元素: 用 d3 為六邊形的 --n 和 --scale 變量賦值: 刪除掉 html 文件中的六邊形 dom 元素,和 css 文件中聲明的變量。 最后,把六邊形的數量改為 100 個: 大功告成! 文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。 轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/96279.htmlbody {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(circle at center, gold, black);
}
.container {
width: 20em;
height: 20em;
font-size: 20px;
border-radius: 50%;
}
.hexagons {
width: inherit;
height: inherit;
display: flex;
align-items: center;
justify-content: center;
}
.hexagons span {
position: absolute;
width: calc(20em / 1.732);
height: inherit;
background-color: currentColor;
}
.hexagons span:before,
.hexagons span:after {
content: "";
position: absolute;
width: inherit;
height: inherit;
background-color: currentColor;
}
.hexagons span:before {
transform: rotate(60deg);
}
.hexagons span:after {
transform: rotate(-60deg);
}
.hexagons span:nth-child(odd) {
color: gold;
}
.hexagons span:nth-child(even) {
color: #222;
}
.hexagons span {
transform: scale(var(--scale)) ;
}
.hexagons span:nth-child(1) {
--scale: 1;
}
.hexagons span:nth-child(2) {
--scale: calc(1 * 0.9);
}
.hexagons span:nth-child(3) {
--scale: calc(1 * 0.9 * 0.9);
}
.hexagons span:nth-child(4) {
--scale: calc(1 * 0.9 * 0.9 * 0.9);
}
.hexagons span:nth-child(5) {
--scale: calc(1 * 0.9 * 0.9 * 0.9 * 0.9);
}
.hexagons span {
transform: scale(var(--scale)) rotate(calc(var(--n) * 6deg));
}
.hexagons span:nth-child(1) {
--n: 1;
}
.hexagons span:nth-child(2) {
--n: 2;
}
.hexagons span:nth-child(3) {
--n: 3;
}
.hexagons span:nth-child(4) {
--n: 4;
}
.hexagons span:nth-child(5) {
--n: 5;
}
.hexagons {
animation: twist 0.5s linear infinite;
}
@keyframes twist {
from {
transform: rotate(0deg) scale(1);
}
to {
transform: rotate(calc(6deg * -2)) scale(1.25);
}
}
.container {
overflow: hidden;
}
引入 d3 庫:const COUNT = 5;
d3.select(".hexagons")
.selectAll("span")
.data(d3.range(COUNT))
.enter()
.append("span");
d3.select(".hexagons")
.selectAll("span")
.data(d3.range(COUNT))
.enter()
.append("span")
.style("--scale", (d) => Math.pow(0.9, d))
.style("--n", (d) => d + 1);
const COUNT = 100;
摘要:引入庫用創建六邊形的元素用為六邊形的和變量賦值刪除掉文件中的六邊形元素,和文件中聲明的變量。最后,把六邊形的數量改為個大功告成 showImg(https://segmentfault.com/img/bVbekEK?w=400&h=302); 效果預覽 按下右側的點擊預覽按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。 https://codepen.io/comehope/pen/N...
摘要:過往項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份發布的項目前端每日實戰專欄每天分解一個前端項目,用視頻記錄編碼過程,再配合詳細的代碼解讀,是學習前端開發的活的參考書視頻演示如何用純創作一臺咖啡機視頻演示如何用 過往項目 2018 年 6 月份項目匯總(共 27 個項目) 2018 年 5 月份項目匯總(共 30 個項目) 2018 年 4 月份項目匯總(...
摘要:過往項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份發布的項目前端每日實戰專欄每天分解一個前端項目,用視頻記錄編碼過程,再配合詳細的代碼解讀,是學習前端開發的活的參考書視頻演示如何用純創作一臺咖啡機視頻演示如何用 過往項目 2018 年 6 月份項目匯總(共 27 個項目) 2018 年 5 月份項目匯總(共 30 個項目) 2018 年 4 月份項目匯總(...
閱讀 2655·2021-11-24 10:44
閱讀 1896·2021-11-22 13:53
閱讀 1907·2021-09-30 09:47
閱讀 3704·2021-09-22 16:00
閱讀 2431·2021-09-08 09:36
閱讀 2312·2019-08-30 15:53
閱讀 2790·2019-08-30 15:48
閱讀 976·2019-08-30 15:44