30.纯 CSS 创作一个晃动的公告板
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了30.纯 CSS 创作一个晃动的公告板相关的知识,希望对你有一定的参考价值。
原文地址: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); } }
以上是关于30.纯 CSS 创作一个晃动的公告板的主要内容,如果未能解决你的问题,请参考以下文章