如何用純 CSS 創作一個晃動的公告板
阿新 • • 發佈:2018-11-21
效果預覽
按下右側的“點選預覽”按鈕可以在當前頁面預覽,點選連結可以全屏預覽。
https://codepen.io/comehope/pen/wjZoGV
可互動視訊教程
此視訊是可以互動的,你可以隨時暫停視訊,編輯視訊中的程式碼。
請用 chrome, safari, edge 開啟觀看。
原始碼下載
本地下載
每日前端實戰系列的全部原始碼請從 github 下載:
https://github.com/comehope/front-end-daily-challenges
程式碼解讀
定義 dom,容器中包含公告牌、掛公告牌的細繩和固定繩子的 3 個圖釘:
<div class="signboard"> <div class="sign">THANKS</div> <div class="strings"></div> <div class="pin top"></div> <div class="pin left"></div> <div class="pin right"></div> </div>
居中顯示:
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);
}
}
大功告成!
原文地址:https://segmentfault.com/a/1190000014983030