Question

我正在寻找一种代码可以循环的方式。

让我解释一下，元素应该增加到最大值（例如skewX（500deg）），然后又返回到最小值（例如skewX（100deg）），您已经知道一种方法吗？这是我的html：

<div class="wpb_raw_code wpb_content_element wpb_raw_html customSpanToBorder">
<div class="wpb_wrapper" style="transform: skewX(0deg);"> 
<span class="customLineServizi"> </span>
</div>
</div>

这是我的jquery：

var sdegree = 0;

    jQuery(document).ready(function() {
        sdegree ++ ;
        sdegree = sdegree + 2 ;
        var srotate = "skewX(" + sdegree + "deg)";

        jQuery(".customSpanToBorder .wpb_wrapper").css({"-moz-transform" : srotate, "-webkit-transform" : srotate});
    });

Answer 1

如果您想无限期地重复此操作，那么使用CSS @keyframes是最合适的解决方案。定义动画后，可以将animation-iteration-count设置为infinite。试试这个：

.customSpanToBorder .wpb_wrapper {
  background-color: #C00;
  width: 100px;
  height: 100px;
  transform: skewX(0deg);
  animation-name: skew;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

@keyframes skew {
  50% {
    transform: skewX(500deg);
  }
  100% {
    transform: skewX(0deg);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wpb_raw_code wpb_content_element wpb_raw_html customSpanToBorder">
  <div class="wpb_wrapper" style="transform: skewX(0deg);">
    <span class="customLineServizi"> </span>
  </div>
</div>

循环SkewX以增加和减少

1 个答案: