摘要:源代碼下載每日前端實戰(zhàn)系列的全部源代碼請從下載代碼解讀定義,一個容器中包含個居中顯示定義容器尺寸畫出包含條邊的容器為條邊所屬的容器上色用遮罩切出每一條邊,組成彭羅斯三角形定義旋轉(zhuǎn)動畫效果最后,增加旋轉(zhuǎn)時變色的效果大功告成
效果預覽
按下右側(cè)的“點擊預覽”按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。
https://codepen.io/comehope/pen/RyvgMZ
可交互視頻教程此視頻是可以交互的,你可以隨時暫停視頻,編輯視頻中的代碼。
請用 chrome, safari, edge 打開觀看。
https://scrimba.com/c/czPkasr
源代碼下載每日前端實戰(zhàn)系列的全部源代碼請從 github 下載:
https://github.com/comehope/front-end-daily-challenges
代碼解讀定義 dom,一個容器中包含 3 個 :
居中顯示:
html, body { height: 100%; display: flex; align-items: center; justify-content: center; background-color: black; }
定義容器尺寸:
.penrose { width: 20em; height: 20em; }
畫出包含 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)動畫效果:
.penrose { animation: rotating 30s linear infinite; transform-origin: 66% 66%; } @keyframes rotating { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
最后,增加旋轉(zhuǎn)時變色的效果:
@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)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/52376.html
摘要:源代碼下載每日前端實戰(zhàn)系列的全部源代碼請從下載代碼解讀定義,一個容器中包含個居中顯示定義容器尺寸畫出包含條邊的容器為條邊所屬的容器上色用遮罩切出每一條邊,組成彭羅斯三角形定義旋轉(zhuǎn)動畫效果最后,增加旋轉(zhuǎn)時變色的效果大功告成 showImg(https://segmentfault.com/img/bVbbytm?w=500&h=500); 效果預覽 按下右側(cè)的點擊預覽按鈕可以在當前頁面預...
摘要:過往項目年月份項目匯總共個項目年月份發(fā)布的項目前端每日實戰(zhàn)專欄每天分解一個前端項目,用視頻記錄編碼過程,再配合詳細的代碼解讀,是學習前端開發(fā)的活的參考書頻演示如何用純創(chuàng)作一種按鈕被瞄準的交互特效視頻演示如何用純創(chuàng)作一個同心圓弧旋轉(zhuǎn)特效視頻演 過往項目 2018 年 4 月份項目匯總(共 8 個項目) 2018 年 5 月份發(fā)布的項目 《前端每日實戰(zhàn)》專欄每天分解一個前端項目,用視頻記錄...
摘要:過往項目年月份項目匯總共個項目年月份發(fā)布的項目前端每日實戰(zhàn)專欄每天分解一個前端項目,用視頻記錄編碼過程,再配合詳細的代碼解讀,是學習前端開發(fā)的活的參考書頻演示如何用純創(chuàng)作一種按鈕被瞄準的交互特效視頻演示如何用純創(chuàng)作一個同心圓弧旋轉(zhuǎn)特效視頻演 過往項目 2018 年 4 月份項目匯總(共 8 個項目) 2018 年 5 月份發(fā)布的項目 《前端每日實戰(zhàn)》專欄每天分解一個前端項目,用視頻記錄...
閱讀 3557·2021-08-02 13:41
閱讀 2391·2019-08-30 15:56
閱讀 1520·2019-08-30 11:17
閱讀 1174·2019-08-29 15:18
閱讀 580·2019-08-29 11:10
閱讀 2671·2019-08-26 13:52
閱讀 508·2019-08-26 13:22
閱讀 2949·2019-08-23 15:41