Question

在Android中，我想实现以下动画。

我试图将背景可绘制对象设置为this链接中提到的自定义对象。它有效，但是从左到右。我尝试将画布旋转到45，但是不起作用。

任何帮助将不胜感激。请运行以下代码段，然后单击按钮。您将看到动画效果。

$(document).ready(function() {
  var sampleButton = $(".button");
  var getBody = $(document).find("body");
  $(function() {
    $(sampleButton).on("vmousedown", function() {
      if (!$("body").hasClass("active")) {
        $(getBody).addClass("has-stripe");
      }
    });
    $(sampleButton).on("vmouseup", function() {
      if (!$("body").hasClass("active")) {
        $(getBody).removeClass('has-stripe');
      }
    });
  });
});

:root {
  --white: #fff;
  --black: #333;
  --pink: #EB5EC5;
  --red: #7F5373;
}
.button {
  width: 270px;
  height: 270px;
  border: 4px solid var(--pink);
  box-shadow: inset 0 0 0 6px var(--black);
  background-color: var(--pink);
  background-size: 50%;
  font-size: 30px;
  color: white;
  text-indent: -9999px;
}
body.has-stripe button.button{
  border: 3px solid var(--red);
  box-shadow: inset 0 0 0 6px var(--black);
  background-color: var(--pink);
  background: repeating-linear-gradient(
  45deg,
    var(--black) 5px,
    var(--black) 12px,
    var(--pink) 12px,
    var(--pink) 22px
    
  );
  animation: unicorn 3s linear infinite;
}
@keyframes unicorn {
  from { background-position: 0 0; }
  to   { background-position: 0 -100px; }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"></script>
<body>
  <article>
    <button class="button icon-animate-out"></button>
  </article>
</body>

如何创建从左下到右上的全屏条纹

0 个答案: