這次帶給大家前端頁面內實現左右搖擺廣告,前端頁面內實現左右搖擺廣告的注意事項有哪些,以下就是實戰案例,一起來看一下。
定義dom,容器包含公告牌、掛告示牌的細繩和固定繩子的3 個圖釘:
<p class="signboard"> <p class="sign">THANKS</p> <p class="strings"></p> <p class="pin top"></p> <p class="pin left"></p> <p class="pin right"></p> </p>
居中顯示:
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); } }
大功告成!
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
以上是前端頁面內實現左右搖擺廣告的詳細內容。更多資訊請關注PHP中文網其他相關文章!