摘要:效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。可交互視頻教程此視頻是可以交互的,你可以隨時暫停視頻,編輯視頻中的代碼。
效果預覽
按下右側的“點擊預覽”按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。
https://codepen.io/comehope/pen/wjZoGV
可交互視頻教程此視頻是可以交互的,你可以隨時暫停視頻,編輯視頻中的代碼。
請用 chrome, safari, edge 打開觀看。
https://scrimba.com/c/cD8yKHb
源代碼下載每日前端實戰系列的全部源代碼請從 github 下載:
https://github.com/comehope/front-end-daily-challenges
代碼解讀定義 dom,容器中包含公告牌、掛公告牌的細繩和固定繩子的 3 個圖釘:
THANKS
居中顯示:
html, body { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at center 60%, white, sandybrown); }
定義公告牌的整體尺寸:
.signboard { width: 400px; height: 300px; }
設置木板的樣式:
.signboard { position: relative; } .sign { width: 100%; height: 200px; background: burlywood; border-radius: 15px; position: absolute; bottom: 0; }
設置有雕刻效果的文字樣式:
.sign { color: saddlebrown; font-family: sans-serif; font-weight: bold; text-align: center; line-height: 200px; text-shadow: 0 2px 0 rgba(255, 255, 255, 0.3), 0 -2px 0 rgba(0, 0, 0, 0.7); }
畫出細繩:
.strings { width: 150px; height: 150px; border: 5px solid brown; position: absolute; border-right: none; border-bottom: none; transform: rotate(45deg); top: 38px; left: 122px; }
畫出細繩頂部的圖釘:
.pin { width: 25px; height: 25px; border-radius: 50%; position: absolute; } .pin.top { background: gray; left: 187px; }
畫出木板上左右兩側的圖釘:
.pin.left, .pin.right { background: brown; top: 110px; box-shadow: 0 2px 0 rgba(255, 255, 255, 0.3); } .pin.left { left: 80px; } .pin.right { right: 80px; }
最后,讓告示牌晃動起來:
(此處已按 小蕾蕾 的建議修改為以頂部圖釘作為旋轉軸,比最初的效果要好)
.signboard { animation: swing 1.5s ease-in-out infinite alternate; transform-origin: 200px 13px; } @keyframes swing { from { transform: rotate(10deg); } to { transform: rotate(-10deg); } }
大功告成!
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/52388.html
摘要:效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。可交互視頻教程此視頻是可以交互的,你可以隨時暫停視頻,編輯視頻中的代碼。 showImg(https://segmentfault.com/img/bVbbys8?w=500&h=500); 效果預覽 按下右側的點擊預覽按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。 https://codepen.io/comeh...
摘要:過往項目年月份項目匯總共個項目年月份發布的項目前端每日實戰專欄每天分解一個前端項目,用視頻記錄編碼過程,再配合詳細的代碼解讀,是學習前端開發的活的參考書頻演示如何用純創作一種按鈕被瞄準的交互特效視頻演示如何用純創作一個同心圓弧旋轉特效視頻演 過往項目 2018 年 4 月份項目匯總(共 8 個項目) 2018 年 5 月份發布的項目 《前端每日實戰》專欄每天分解一個前端項目,用視頻記錄...
摘要:過往項目年月份項目匯總共個項目年月份發布的項目前端每日實戰專欄每天分解一個前端項目,用視頻記錄編碼過程,再配合詳細的代碼解讀,是學習前端開發的活的參考書頻演示如何用純創作一種按鈕被瞄準的交互特效視頻演示如何用純創作一個同心圓弧旋轉特效視頻演 過往項目 2018 年 4 月份項目匯總(共 8 個項目) 2018 年 5 月份發布的項目 《前端每日實戰》專欄每天分解一個前端項目,用視頻記錄...
閱讀 3486·2021-10-18 13:30
閱讀 2941·2021-10-09 09:44
閱讀 1964·2019-08-30 11:26
閱讀 2287·2019-08-29 13:17
閱讀 757·2019-08-29 12:17
閱讀 2246·2019-08-26 18:42
閱讀 471·2019-08-26 13:24
閱讀 2951·2019-08-26 11:39