这次给大家带来前端页面内实现左右摇摆广告，前端页面内实现左右摇摆广告的注意事项有哪些，下面就是实战案例，一起来看一下。
代码解读
定义 dom，容器中包含公告牌、挂公告牌的细绳和固定绳子的 3 个图钉：
THANKS
登录后复制
居中显示：
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); }}
登录后复制
大功告成！
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
JS中使用接口步骤详解
react实现选中li高亮步骤详解
以上就是前端页面内实现左右摇摆广告的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2758112.html
