我正在编写一个当前使用 :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);}
}