30.纯 CSS 创作一个晃动的公告板

<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 { ???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); ???}}