Html WordrPress：手机CSS动画中的问题
在我的Html WordrPress：手机CSS动画中的问题,html,css,wordpress,css-animations,elementor,Html,Css,Wordpress,Css Animations,Elementor,在我的Elementor Propowered网站中，我添加了自定义CSS，用于设置形状分割器的动画。我有“刷波”样式作为形状分割器。下面是代码 .elementor-shape-bottom .elementor-shape-top .elementor-shape body { overflow-x:hidden; } @keyframes wave { 0% { margin-left: 0; } 50% { marg
Elementor Pro形状分割器的动画。我有“刷波”样式作为形状分割器。下面是代码
.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) {
}
这在台式机上运行良好，但在平板电脑和移动设备上则不然。动画正在工作，但与其他部分重叠。顶部动画与其顶部部分重叠，而底部动画与其底部部分重叠
查看下面的示例。如何解决此问题
您需要为移动设备添加单独的媒体查询
@仅媒体屏幕和（最小宽度：240px）和（最大宽度：480px）{您的代码在这里..}
另外，请使用“em”表示宽度，而不是“%”，因为您使用了->宽度：210%
谢谢，也许它对你们有帮助我认为问题在于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>
使用响应媒体查询为动画设置不同的尺寸，并尝试使用百分比边距，这对您有很大帮助。@Awais：有任何示例吗？您能为我们提供完整代码的代码笔或小提琴吗？请提供html和css两种代码。欢迎使用！请按照指南编辑您的答案并调整排版。您的意思是最大宽度480和最小宽度240？？
.wrapper{
overflow-x: hidden;
width: 100%;
height: 100%;
}