php页面如何加入滚动广告,前端页面内实现左右摇摆广告

这次给大家带来前端页面内实现左右摇摆广告，前端页面内实现左右摇摆广告的注意事项有哪些，下面就是实战案例，一起来看一下。

代码解读

定义 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);

}

}

大功告成！

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：