效果预览按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。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 个图钉：<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); }}大功告成！
