摘要:源代碼下載每日前端實(shí)戰(zhàn)系列的全部源代碼請(qǐng)從下載代碼解讀定義,一個(gè)容器中包含個(gè)居中顯示定義容器尺寸畫(huà)出包含條邊的容器為條邊所屬的容器上色用遮罩切出每一條邊,組成彭羅斯三角形定義旋轉(zhuǎn)動(dòng)畫(huà)效果最后,增加旋轉(zhuǎn)時(shí)變色的效果大功告成
效果預(yù)覽
按下右側(cè)的“點(diǎn)擊預(yù)覽”按鈕可以在當(dāng)前頁(yè)面預(yù)覽,點(diǎn)擊鏈接可以全屏預(yù)覽。
https://codepen.io/comehope/pen/RyvgMZ
可交互視頻教程此視頻是可以交互的,你可以隨時(shí)暫停視頻,編輯視頻中的代碼。
請(qǐng)用 chrome, safari, edge 打開(kāi)觀(guān)看。
https://scrimba.com/c/czPkasr
源代碼下載每日前端實(shí)戰(zhàn)系列的全部源代碼請(qǐng)從 github 下載:
https://github.com/comehope/front-end-daily-challenges
代碼解讀定義 dom,一個(gè)容器中包含 3 個(gè) :
居中顯示:
html, body { height: 100%; display: flex; align-items: center; justify-content: center; background-color: black; }
定義容器尺寸:
.penrose { width: 20em; height: 20em; }
畫(huà)出包含 3 條邊的容器:
.penrose { position: relative; } .penrose span { position: absolute; width: 100%; height: 100%; } .penrose span:nth-child(1) { transform: rotate(0deg); } .penrose span:nth-child(2) { transform: rotate(120deg); } .penrose span:nth-child(3) { transform: rotate(240deg); }
為 3 條邊所屬的容器上色:
.penrose { color: red; } .penrose span { background-color: currentColor; } .penrose span:nth-child(1) { filter: brightness(1); } .penrose span:nth-child(2) { filter: brightness(0.66); } .penrose span:nth-child(3) { filter: brightness(0.33); }
用遮罩切出每一條邊,組成彭羅斯三角形:
.penrose span { clip-path: polygon(57% 0, 75% 0, 26% 85%, 89.5% 85%, 98.4% 100%, 0 100%); } .penrose span:nth-child(2) { top: 18.3%; left: 43.3%; } .penrose span:nth-child(3) { top: 46.5%; left: 5.9%; }
定義旋轉(zhuǎn)動(dòng)畫(huà)效果:
.penrose { animation: rotating 30s linear infinite; transform-origin: 66% 66%; } @keyframes rotating { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
最后,增加旋轉(zhuǎn)時(shí)變色的效果:
@keyframes rotating { 0% { color: red; transform: rotate(0deg); } 20% { color: yellow; } 40% { color: lime; } 60% { color: blue; } 80% { color: fuchsia; } 100% { color: red; transform: rotate(720deg); } }
大功告成!
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/113337.html
摘要:源代碼下載每日前端實(shí)戰(zhàn)系列的全部源代碼請(qǐng)從下載代碼解讀定義,一個(gè)容器中包含個(gè)居中顯示定義容器尺寸畫(huà)出包含條邊的容器為條邊所屬的容器上色用遮罩切出每一條邊,組成彭羅斯三角形定義旋轉(zhuǎn)動(dòng)畫(huà)效果最后,增加旋轉(zhuǎn)時(shí)變色的效果大功告成 showImg(https://segmentfault.com/img/bVbbytm?w=500&h=500); 效果預(yù)覽 按下右側(cè)的點(diǎn)擊預(yù)覽按鈕可以在當(dāng)前頁(yè)面預(yù)...
摘要:過(guò)往項(xiàng)目年月份項(xiàng)目匯總共個(gè)項(xiàng)目年月份發(fā)布的項(xiàng)目前端每日實(shí)戰(zhàn)專(zhuān)欄每天分解一個(gè)前端項(xiàng)目,用視頻記錄編碼過(guò)程,再配合詳細(xì)的代碼解讀,是學(xué)習(xí)前端開(kāi)發(fā)的活的參考書(shū)頻演示如何用純創(chuàng)作一種按鈕被瞄準(zhǔn)的交互特效視頻演示如何用純創(chuàng)作一個(gè)同心圓弧旋轉(zhuǎn)特效視頻演 過(guò)往項(xiàng)目 2018 年 4 月份項(xiàng)目匯總(共 8 個(gè)項(xiàng)目) 2018 年 5 月份發(fā)布的項(xiàng)目 《前端每日實(shí)戰(zhàn)》專(zhuān)欄每天分解一個(gè)前端項(xiàng)目,用視頻記錄...
摘要:過(guò)往項(xiàng)目年月份項(xiàng)目匯總共個(gè)項(xiàng)目年月份發(fā)布的項(xiàng)目前端每日實(shí)戰(zhàn)專(zhuān)欄每天分解一個(gè)前端項(xiàng)目,用視頻記錄編碼過(guò)程,再配合詳細(xì)的代碼解讀,是學(xué)習(xí)前端開(kāi)發(fā)的活的參考書(shū)頻演示如何用純創(chuàng)作一種按鈕被瞄準(zhǔn)的交互特效視頻演示如何用純創(chuàng)作一個(gè)同心圓弧旋轉(zhuǎn)特效視頻演 過(guò)往項(xiàng)目 2018 年 4 月份項(xiàng)目匯總(共 8 個(gè)項(xiàng)目) 2018 年 5 月份發(fā)布的項(xiàng)目 《前端每日實(shí)戰(zhàn)》專(zhuān)欄每天分解一個(gè)前端項(xiàng)目,用視頻記錄...
閱讀 1561·2021-11-24 09:39
閱讀 1042·2021-11-22 15:11
閱讀 2167·2021-11-19 11:35
閱讀 1627·2021-09-13 10:37
閱讀 2453·2021-09-03 10:47
閱讀 2134·2021-08-30 09:47
閱讀 1626·2021-08-20 09:39
閱讀 2901·2019-08-30 14:13