在我的 Elementor Pro 支持的网站中，我添加了自定义 CSS 来为 Shape Divider 设置动画。我有“刷波”风格作为形状分隔线。下面是代码
.elementor-shape-bottom
.elementor-shape-top
.elementor-shape
body {
overflow-x:hidden;
}
@keyframes wave {
0% {
margin-left: 0;
}
50% {
margin-left: -1600px;
}
100% {
margin-left: 0px;
}
}
.elementor-shape-top {
bottom: -1px;
animation: wave 22s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
width: 210%;
}
.elementor-shape-bottom {
bottom: -1px;
animation: wave 22s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
width: 210%;
}
@media only screen and (max-width: 768px) {
.elementor-shape-top {
bottom: -5px;
animation: wave 22s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
width: 210%;
}
.elementor-shape-bottom {
bottom: -5px;
animation: wave 22s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
width: 210%;
}
}
@media only screen and (max-width: 1920px) {
}
这在桌面上运行良好，但在平板电脑和移动设备上却不行。动画正在运行，但它与其他部分重叠。顶部动画与其顶部重叠，而底部动画与其底部重叠。
查看下面的示例。我该如何解决这个问题？
最佳答案
我认为问题是 body overflow-x 在手机和平板电脑上不起作用
尝试使用 div 包含您的内容
<body>
<div class="wrapper">
<div class="elementor-shape-bottom"></div>
<div class="elementor-shape-top"></div>
<div class="elementor-shape"></div>
</div>
</body>
CSS
.wrapper{
overflow-x: hidden;
width: 100%;
height: 100%;
}
关于html - WordPress : Issues in CSS animations in Mobile，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57704883/