时间戳

首页 > 解决方案 > Wordpress 动画形状分隔线

php - Wordpress 动画形状分隔线

问题描述

我一直在使用带有一些自定义 css 的动画形状分隔器，它正在从左到右制作波浪动画，但是当我切换到平板电脑或移动设备时，它奇怪地出现在主网站之外。

我一直在寻找一种代码解决方案来关闭它，但没有成功。我正在寻找一个代码，当有人要在平板电脑或手机上访问我的网站时，它会删除/阻止动画波。

我目前使用的 CSS

body {
     overflow-x:hidden;
} 
.elementor-shape-bottom {
     bottom: -1px;
     animation: wave 22s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
     width: 210%;
 } 
@keyframes wave {
   0% {
     margin-left: 0;
   }
     50% {
     margin-left: -1600px;
   }
   100% {
     margin-left: 0px;
   }
 }


body {
     overflow-x:hidden;
} 
.elementor-shape-top {
     bottom: -1px;
     animation: wave 22s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
     width: 210%;
 } 
@keyframes wave {
   0% {
     margin-left: 0;
   }
     50% {
     margin-left: -1600px;
   }
   100% {
     margin-left: 0px;
   }
 }


body {
     overflow-x:hidden;
} 
.elementor-shape {
     bottom: -1px;
     animation: wave 22s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
     width: 210%;
 } 
@keyframes wave {
   0% {
     margin-left: 0;
   }
     50% {
     margin-left: -1600px;
   }
   100% {
     margin-left: 0px;
   }
 }

标签： phphtmlcsswordpresselementor

解决方案

Elementordata-elementor-device-mode在 body 标签上添加此属性以识别设备。这就是为什么需要两条不同的线路。第一行 CSS 将在您使用平板设备时应用，第二行将在您使用移动设备时应用。

在您的代码中添加此 CSS。

//This will stop animation on tablet device
body.elementor-default[data-elementor-device-mode="tablet"] .elementor-shape {
  animation: unset;
}

//This will stop animation on mobile device
body.elementor-default[data-elementor-device-mode="mobile"] .elementor-shape {
  animation: unset;
}

推荐阅读