摘要:效果預(yù)覽按下右側(cè)的點(diǎn)擊預(yù)覽按鈕可以在當(dāng)前頁面預(yù)覽,點(diǎn)擊鏈接可以全屏預(yù)覽。可交互視頻此視頻是可以交互的,你可以隨時(shí)暫停視頻,編輯視頻中的代碼。
效果預(yù)覽
按下右側(cè)的“點(diǎn)擊預(yù)覽”按鈕可以在當(dāng)前頁面預(yù)覽,點(diǎn)擊鏈接可以全屏預(yù)覽。
https://codepen.io/comehope/pen/EpbaQX
可交互視頻此視頻是可以交互的,你可以隨時(shí)暫停視頻,編輯視頻中的代碼。
請(qǐng)用 chrome, safari, edge 打開觀看。
https://scrimba.com/p/pEgDAM/cBdyeTw
源代碼下載每日前端實(shí)戰(zhàn)系列的全部源代碼請(qǐng)從 github 下載:
https://github.com/comehope/front-end-daily-challenges
代碼解讀定義 dom,容器本身表示土星星球,其中的 ring 元素表示土星環(huán):
居中顯示:
body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: black; }
定義容器尺寸:
.saturn { width: 20em; height: 20em; font-size: 20px; }
畫出土星星球(此為草稿,后面還會(huì)細(xì)化):
.saturn { position: relative; } .saturn::before, .saturn::after { content: ""; position: absolute; width: 9em; height: 9em; background: linear-gradient( palegoldenrod 0%, tan 10%, burlywood 30%, palegoldenrod 60%, darkgray 100% ); border-radius: 50%; left: calc((20em - 9em) / 2); top: calc((20em - 9em) / 2); }
畫出土星環(huán)(此為草稿,后面還會(huì)細(xì)化):
.rings { position: absolute; width: inherit; height: inherit; background: radial-gradient( transparent 35%, dimgray 40%, slategray 50%, transparent 60%, dimgray 60%, slategray 70%, transparent 70% ); }
改變觀察土星環(huán)的視角:
.rings { transform: rotateX(75deg); }
為了使土星呈現(xiàn)被土星環(huán)環(huán)繞的效果,把土星分為上下兩半,使它們和土星環(huán)的圖層順序從底到頂依次為:星球的下半部、土星環(huán)、星球的上半部:
.saturn::before { clip-path: inset(50% 0 0 0); } .saturn::after { clip-path: inset(0 0 50% 0); }
至此,畫出了土星的整體結(jié)構(gòu),接下來完善細(xì)節(jié)。
為土星環(huán)涂上豐富的漸變色:
.rings { background: radial-gradient( rgba(24,19,25,0) 0%, rgba(53,52,51,0) 34%, rgba(55,54,52,1) 36%, rgba(56,55,53,1) 37%, rgba(68,67,66,1) 38%, rgba(56,55,53,1) 39%, rgba(68,67,66,1) 40%, rgba(56,55,53,1) 41%, rgba(87,77,76,1) 42%, rgba(87,77,76,1) 44%, rgba(113,110,103,1) 46%, rgba(113,110,103,1) 48%, rgba(113,98,93,1) 49%, rgba(113,98,93,1) 51%, rgba(122,115,105,1) 52%, rgba(113,98,93,1) 53%, rgba(113,98,93,1) 54%, rgba(122,115,105,1) 55%, rgba(106,99,89,1) 56%, rgba(106,99,89,1) 58%, rgba(79,76,76,0) 60%, rgba(65,64,70,1) 61%, rgba(65,64,70,1) 62%, rgba(90,85,89,1) 63%, rgba(78,74,73,1) 65%, rgba(78,73,74,1) 67%, rgba(78,73,74,0) 68%, rgba(78,73,75,1) 69%, rgba(78,73,75,1) 70%, rgba(78,73,76,0) 71%, rgba(77,72,76,0) 72%, rgba(24,19,25,0) 100% ); }
為星球涂上豐富的漸變色:
.saturn::before, .saturn::after { background: linear-gradient( rgba(212,203,174,1) 0%, rgba(212,203,174,1) 10%, rgba(221,203,157,1) 15%, rgba(221,203,157,1) 17%, rgba(213,181,143,1) 22%, rgba(213,181,143,1) 26%, rgba(208,180,158,1) 32%, rgba(208,180,158,1) 36%, rgba(218,188,162,1) 37%, rgba(218,188,162,1) 39%, rgba(211,184,157,1) 41%, rgba(211,184,157,1) 49%, rgba(205,186,156,1) 51%, rgba(205,186,156,1) 52%, rgba(202,176,153,1) 53%, rgba(202,176,153,1) 65%, rgba(190,177,145,1) 68%, rgba(190,177,145,1) 80%, rgba(150,144,130,1) 91%, rgba(150,144,130,1) 95%, rgba(131,129,117,1) 97%, rgba(131,129,117,1) 100% ); }
再為星球增加光照效果:
.saturn::before, .saturn::after { background: radial-gradient( circle at top, transparent 40%, black ), radial-gradient( transparent 62%, black ), linear-gradient( rgba(212,203,174,1) 0%, rgba(212,203,174,1) 10%, rgba(221,203,157,1) 15%, rgba(221,203,157,1) 17%, rgba(213,181,143,1) 22%, rgba(213,181,143,1) 26%, rgba(208,180,158,1) 32%, rgba(208,180,158,1) 36%, rgba(218,188,162,1) 37%, rgba(218,188,162,1) 39%, rgba(211,184,157,1) 41%, rgba(211,184,157,1) 49%, rgba(205,186,156,1) 51%, rgba(205,186,156,1) 52%, rgba(202,176,153,1) 53%, rgba(202,176,153,1) 65%, rgba(190,177,145,1) 68%, rgba(190,177,145,1) 80%, rgba(150,144,130,1) 91%, rgba(150,144,130,1) 95%, rgba(131,129,117,1) 97%, rgba(131,129,117,1) 100% ); }
最后,把畫面旋轉(zhuǎn)一點(diǎn)角度:
.saturn { transform: rotate(-15deg); }
大功告成!
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/52748.html
摘要:效果預(yù)覽按下右側(cè)的點(diǎn)擊預(yù)覽按鈕可以在當(dāng)前頁面預(yù)覽,點(diǎn)擊鏈接可以全屏預(yù)覽。可交互視頻此視頻是可以交互的,你可以隨時(shí)暫停視頻,編輯視頻中的代碼。 showImg(https://segmentfault.com/img/bVber3t?w=400&h=300); 效果預(yù)覽 按下右側(cè)的點(diǎn)擊預(yù)覽按鈕可以在當(dāng)前頁面預(yù)覽,點(diǎn)擊鏈接可以全屏預(yù)覽。 https://codepen.io/comehop...
摘要:過往項(xiàng)目年月份項(xiàng)目匯總共個(gè)項(xiàng)目年月份項(xiàng)目匯總共個(gè)項(xiàng)目年月份項(xiàng)目匯總共個(gè)項(xiàng)目年月份發(fā)布的項(xiàng)目前端每日實(shí)戰(zhàn)專欄每天分解一個(gè)前端項(xiàng)目,用視頻記錄編碼過程,再配合詳細(xì)的代碼解讀,是學(xué)習(xí)前端開發(fā)的活的參考書視頻演示如何用純創(chuàng)作一臺(tái)咖啡機(jī)視頻演示如何用 過往項(xiàng)目 2018 年 6 月份項(xiàng)目匯總(共 27 個(gè)項(xiàng)目) 2018 年 5 月份項(xiàng)目匯總(共 30 個(gè)項(xiàng)目) 2018 年 4 月份項(xiàng)目匯總(...
摘要:過往項(xiàng)目年月份項(xiàng)目匯總共個(gè)項(xiàng)目年月份項(xiàng)目匯總共個(gè)項(xiàng)目年月份項(xiàng)目匯總共個(gè)項(xiàng)目年月份發(fā)布的項(xiàng)目前端每日實(shí)戰(zhàn)專欄每天分解一個(gè)前端項(xiàng)目,用視頻記錄編碼過程,再配合詳細(xì)的代碼解讀,是學(xué)習(xí)前端開發(fā)的活的參考書視頻演示如何用純創(chuàng)作一臺(tái)咖啡機(jī)視頻演示如何用 過往項(xiàng)目 2018 年 6 月份項(xiàng)目匯總(共 27 個(gè)項(xiàng)目) 2018 年 5 月份項(xiàng)目匯總(共 30 個(gè)項(xiàng)目) 2018 年 4 月份項(xiàng)目匯總(...
閱讀 3048·2021-11-25 09:43
閱讀 1026·2021-11-24 10:22
閱讀 1352·2021-09-22 15:26
閱讀 681·2019-08-30 15:44
閱讀 2463·2019-08-29 16:33
閱讀 3683·2019-08-26 18:42
閱讀 908·2019-08-23 18:07
閱讀 1832·2019-08-23 17:55