摘要:效果預覽按下右側的點擊預覽按鈕在當前頁面預覽,點擊鏈接全屏預覽。可交互視頻教程此視頻是可以交互的,你可以隨時暫停視頻,編輯視頻中的代碼。
效果預覽
按下右側的“點擊預覽”按鈕在當前頁面預覽,點擊鏈接全屏預覽。
https://codepen.io/zhang-ou/pen/deVgRM
可交互視頻教程此視頻是可以交互的,你可以隨時暫停視頻,編輯視頻中的代碼。
請用 chrome, safari, edge 打開觀看。
https://scrimba.com/c/cb6pkUE
源代碼下載請從 github 下載。
https://github.com/comehope/front-end-daily-challenges/tree/master/014-three-languages-for-web-development
代碼解讀定義 dom,一個容器中包含一個 span,span 內有文字:
HTML
居中顯示:
html, body { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(to top left, white, dimgray); }
畫出書的正面:
.book { width: 12rem; height: 18rem; background: linear-gradient(navy, deeppink, tomato); transform: skewY(-10deg); }
畫出書的側面:
.book { position: relative; } .book::before { content: ""; position: absolute; width: 1.5rem; height: 100%; background: linear-gradient(navy, deeppink, tomato); top: 0; left: -1.5rem; transform: skewY(45deg); transform-origin: right; filter: brightness(0.6); }
畫出書的頂面:
.book::after { content: ""; position: absolute; width: 100%; height: 1.5rem; background: white; top: -1.5rem; left: 0; transform-origin: bottom; transform: skewX(45deg); filter: brightness(0.9); }
給圖書加陰影,讓它顯得更立體:
.book { box-shadow: -10px 5px 30px rgba(0, 0, 0, 0.5); }
設置文字樣式:
.book span { color: whitesmoke; font-size: 2.2rem; font-family: sans-serif; display: block; background: silver; text-align: center; height: 8rem; margin-top: 5rem; padding-top: 2rem; box-sizing: border-box; text-shadow: -2px 2px 10px rgba(0, 0, 0, 0.3); position: absolute; width: 100%; }
畫出文字側面,與畫圖書側面的方法相似:
.book span { position: relative; } .book span::before { content: ""; position: absolute; width: 1.5rem; height: 100%; background: silver; top: 0; left: -1.5rem; transform-origin: right; transform: skewY(45deg); filter: brightness(0.6); }
文字下增加一行小字號文字:
.book span::after { content: "development"; display: block; font-size: 1rem; }
dom 改為 3 本書,包含在一個容器之中,并且分別命名樣式類:
HTMLCSSJavaScript
3 本書布局:
.books { display: flex; width: calc(12rem * 3 + 3rem * 2); justify-content: space-between; margin-top: 6rem; } .book:nth-child(2) { top: -3rem; } .book:nth-child(3) { top: -6rem; }
3 本書配色:
.book.html span, .book.html span::before { background: orange; } .book.css span, .book.css span::before { background: yellowgreen; } .book.js span, .book.js span::before { background: royalblue; }
設置 3 本書的小字號文字:
.book.html span:after { content: ""; } .book.css span::after { content: ".devolopment::"; } .book.js span::after { content: "{ devolopment }"; }
最后,為圖書增加鼠標劃過效果:
.book { transition: 0.3s; } .book:hover { margin-top: -1.5rem; }
大功告成!
知識點justify-content https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
skewY() https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skewY
skewX() https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skewX
transform-origin https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin
brightness() https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/brightness
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/113221.html
摘要:效果預覽按下右側的點擊預覽按鈕在當前頁面預覽,點擊鏈接全屏預覽。可交互視頻教程此視頻是可以交互的,你可以隨時暫停視頻,編輯視頻中的代碼。 showImg(https://segmentfault.com/img/bVbbyuY?w=500&h=500); 效果預覽 按下右側的點擊預覽按鈕在當前頁面預覽,點擊鏈接全屏預覽。 https://codepen.io/zhang-ou/pen/...
摘要:過往項目年月份項目匯總共個項目年月份發布的項目前端每日實戰專欄每天分解一個前端項目,用視頻記錄編碼過程,再配合詳細的代碼解讀,是學習前端開發的活的參考書頻演示如何用純創作一種按鈕被瞄準的交互特效視頻演示如何用純創作一個同心圓弧旋轉特效視頻演 過往項目 2018 年 4 月份項目匯總(共 8 個項目) 2018 年 5 月份發布的項目 《前端每日實戰》專欄每天分解一個前端項目,用視頻記錄...
摘要:過往項目年月份項目匯總共個項目年月份發布的項目前端每日實戰專欄每天分解一個前端項目,用視頻記錄編碼過程,再配合詳細的代碼解讀,是學習前端開發的活的參考書頻演示如何用純創作一種按鈕被瞄準的交互特效視頻演示如何用純創作一個同心圓弧旋轉特效視頻演 過往項目 2018 年 4 月份項目匯總(共 8 個項目) 2018 年 5 月份發布的項目 《前端每日實戰》專欄每天分解一個前端項目,用視頻記錄...
閱讀 916·2021-10-27 14:14
閱讀 1740·2021-10-11 10:59
閱讀 1315·2019-08-30 13:13
閱讀 3152·2019-08-29 15:17
閱讀 2749·2019-08-29 13:48
閱讀 488·2019-08-26 13:36
閱讀 2081·2019-08-26 13:25
閱讀 857·2019-08-26 12:24