摘要:效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。可交互視頻此視頻是可以交互的,你可以隨時暫停視頻,編輯視頻中的代碼。
效果預覽
按下右側的“點擊預覽”按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。
https://codepen.io/comehope/pen/qJEdKb
可交互視頻此視頻是可以交互的,你可以隨時暫停視頻,編輯視頻中的代碼。
請用 chrome, safari, edge 打開觀看。
https://scrimba.com/p/pEgDAM/cEJRKud
源代碼下載每日前端實戰系列的全部源代碼請從 github 下載:
https://github.com/comehope/front-end-daily-challenges
代碼解讀定義 dom,容器是一個無序列表,包含 4 個元素,代表 4 個按鈕:
居中顯示:
body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background: cornsilk; }
去掉列表項前面的符號:
ul { padding: 0; list-style-type: none; }
設置按鈕的邊框和背景的樣式,背景采用漸變色,但漸變的方向依次交替:
ul li { box-sizing: border-box; width: 15em; height: 3em; font-size: 20px; border-radius: 0.5em; margin: 0.5em; box-shadow: 0 0 1em rgba(0,0,0,0.2); } ul li:nth-child(odd) { background: linear-gradient(to right, orange, tomato); } ul li:nth-child(even) { background: linear-gradient(to left, orange, tomato); }
設置按鈕上文字的樣式,依次交替居左或居右:
ul li { color: white; font-family: sans-serif; text-transform: capitalize; line-height: 3em; } ul li:nth-child(odd) { text-align: left; padding-left: 10%; } ul li:nth-child(even) { text-align: right; padding-right: 10%; }
設置按鈕的透視效果,依次交替向左旋轉和向右旋轉,此時透視的距離是 500px,注意 perspective() 函數和 rotateY() 函數的順序不能寫反:
ul li:nth-child(odd) { transform: perspective(500px) rotateY(45deg); } ul li:nth-child(even) { transform: perspective(500px) rotateY(-45deg); }
為按鈕增加懸停效果,使懸停時的透視距離變短為 200px,透視距離越短,旋轉的幅度看起來就越大:
ul li:nth-child(odd):hover { transform: perspective(200px) rotateY(45deg); padding-left: 5%; } ul li:nth-child(even):hover { transform: perspective(200px) rotateY(-45deg); padding-right: 5%; }
最后,設置一個緩動時間,使效果轉換變得平滑:
ul li { transition: 0.3s; cursor: pointer; }
大功告成!
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/116991.html
摘要:效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。可交互視頻此視頻是可以交互的,你可以隨時暫停視頻,編輯視頻中的代碼。 showImg(https://segmentfault.com/img/bVbhDnp?w=400&h=302); 效果預覽 按下右側的點擊預覽按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。 https://codepen.io/comehop...
摘要:過往項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份發布的項目前端每日實戰專欄每天分解一個前端項目,用視頻記錄編碼過程,再配合詳細的代碼解讀,是學習前端開發的活的參考書 過往項目 2018 年 8 月份項目匯總(共 29 個項目) 2018 年 7 月份項目匯總(共 29 個項目) 2018 年 6 月份項目匯總(...
摘要:過往項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份發布的項目前端每日實戰專欄每天分解一個前端項目,用視頻記錄編碼過程,再配合詳細的代碼解讀,是學習前端開發的活的參考書 過往項目 2018 年 8 月份項目匯總(共 29 個項目) 2018 年 7 月份項目匯總(共 29 個項目) 2018 年 6 月份項目匯總(...
閱讀 2655·2021-11-23 09:51
閱讀 1644·2021-11-22 13:54
閱讀 2781·2021-11-18 10:02
閱讀 936·2021-08-16 10:57
閱讀 3554·2021-08-03 14:03
閱讀 1873·2019-08-30 15:54
閱讀 3527·2019-08-23 14:39
閱讀 598·2019-08-23 14:26