Wordpress：移动设备中的 CSS 动画问题答案

【问题标题】：Wordrpess: Issues in CSS animations in MobileWordpress：移动设备中的 CSS 动画问题
【发布时间】：2019-09-02 20:40:37
【问题描述】：

在我的 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) {

}

这在桌面设备上运行良好，但在平板电脑和移动设备上却不行。动画正在运行，但它与其他部分重叠。顶部动画与其顶部重叠，而底部动画与其底部重叠。

查看下面的示例。我该如何解决这个问题？

【问题讨论】：

使用响应式媒体查询为您的动画设置不同的尺寸，并尝试使用百分比边距，这对您有很大帮助。
@Awais：有什么例子吗？
你能给我们提供你的完整代码的代码笔或小提琴吗？
请提供html和css代码。

标签： html css wordpress css-animations elementor

【解决方案1】：

我认为问题是 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%;
}

【讨论】：

【解决方案2】：

您需要为移动设备添加单独的媒体查询 @media only screen and (min-width: 240px) and (max-width: 480px) {..Your code here..}

另外请使用 'em' 作为宽度，而不是使用 '%' -> width: 210%;

谢谢，可能对你有帮助

【讨论】：

欢迎来到 SO！请按照stackoverflow.com/help/how-to-answer 的指南编辑您的答案并调整排版。
你的意思是最大宽度480和最小宽度240？？