效果预览
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
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);
}
}
大功告成!
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。