原文地址：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:;
padding:;
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:;
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);
}
}