原文地址：https://segmentfault.com/a/1190000014983030

感想： 绝对定位+动画

HTML代码：

<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>

CSS代码：

html, body { margin: 0; padding: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: radial-gradient(circle at center 60%,white,saddlebrown)}.signboard{ position: relative; width: 400px; height: 300px; /* border: 1px solid blue; */}.sign{ position: absolute; bottom: 0; width: 100%; height: 200px; border-radius: 15px; background: burlywood; line-height: 200px; text-align: center; font-family: sans-serif; font-weight: bold; color: saddlebrown; text-shadow: 0 2px 0 rgba(225, 225, 225, 0.3), 0 -2px 0 rgba(0, 0, 0, 0.7);}/* 画出细绳 */.strings{ position: absolute; width: 150px; height: 150px; border: 5px solid brown; border-right: none; border-bottom: none; transform: rotate(45deg); top: 38px; left: 122px;}/* 画出细绳顶部的图钉 */.pin{ position: absolute; width: 25px; height: 25px; border-radius: 50%;}.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晃动起来 */.signboard{ animation: swing 1.5s ease-in-out infinite alternate; /* 用于指定元素变形的中心点 */ transform-origin: 200px 13px;}@keyframes swing{ from{ transform: rotate(10deg); } to{ transform: rotate(-10deg); }}