1

我正在编写一个当前使用 :target 的教程，该教程在 url 中查找 #clock。我想从 url 中删除 #clock 并只使用 index.html 但我不确定如何更新 css 所以我的动画仍然有效。任何人都可以建议吗？我尝试结合转换代码 abd 转换代码，但这不起作用。

CSS

#clock img[src*='second'] {
-webkit-transition: -webkit-transform 600000s linear;
-moz-transition: -moz-transform 600000s linear;
-o-transition: -o-transform 600000s linear;
-ms-transition: -ms-transform 600000s linear;
transition: transform 600000s linear;
}

#clock:target img[src*='second'] {
-webkit-transform: rotate(3600000deg);
-moz-transform: rotate(3600000deg);
-o-transform: rotate(3600000deg);
-ms-transform: rotate(3600000deg);
-transform: rotate(3600000deg);
}

HTML

<div id="experiment">
  <p class="start"><a href="#clock" id="start">Start Clock</a></p>
  <div id="clock">
          <div id="hour"><img src="img/hourHand.png" /></div>
          <div id="minute"><img src="img/minuteHand.png" /></div>
          <div id="second"><img src="img/secondHand.png" /></div>
  </div>
</div>

更新

#clock #second img {-webkit-animation: loading 1000s infinite;}

@keyframes loading{
  0%   {-webkit-transform: rotate(0deg);}
  100% {-webkit-transform: rotate(3600000deg);}
}
4

0 回答 0