Question

我在CSS中实现了2个背景图像，以根据Photoshop布局获得混合模式样式。我也做对了。但是现在我只想动画那些图像。

$pdfGenerator = $this->get('knp_snappy.pdf');
$pdfGenerator->setOption('zoom', 1);

return new Response(
    $pdfGenerator->getOutputFromHtml($htmltemplate),
    200,
    array(
        'Content-Type'          => 'application/pdf',
        'Content-Disposition'   => 'attachment; filename="'.$pdfname.'.pdf"'
    )
);

你们有什么想法吗？

检查此https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort。我想为前景图像（蜘蛛网）旋转无限动画

Answer 1

只需在<div>

中定义另一个分配给新<section>的课程

试试这个。

<section class="home">
    <div class="rotating"></div>
</section>

定义此css

/* rotation animation */
@-webkit-keyframes rotate {
  from { -webkit-transform:rotate(0deg); }
  to { -webkit-transform:rotate(360deg); }
}

@-moz-keyframes rotate {
  from { -moz-transform:rotate(0deg); }
  to { -moz-transform:rotate(360deg); }
}

@-ms-keyframes rotate {
  from { -ms-transform:rotate(0deg); }
  to { -ms-transform:rotate(360deg); }
}

@-o-keyframes rotate {
  from { -o-transform:rotate(0deg); }
  to { -o-transform:rotate(360deg); }
}

.rotating {
  position:absolute;
  width:100%;
  height:100%;
  background-image: url(https://img.clipartfest.com/d840c9cfc1786dc7013443ac7638dde0_halloween-clip-art-free-spider-spider-web-clipart-png_500-463.png);
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-name: rotate;
  -webkit-animation-duration: 1.5s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-transform-origin: 50% 50%;
  -moz-animation-name: rotate;
  -moz-animation-duration: 1.5s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-transform-origin: 50% 50%;
  -ms-animation-name: rotate;
  -ms-animation-duration: 1.5s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  -o-transform-origin: 50% 50%;
  -o-animation-name: rotate;
  -o-animation-duration: 1.5s;
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: linear;
}

希望它有助于

从许多背景图像中为一个背景图像设置动画

1 个答案: