我正在构建一个行星系统,可以将其悬停在轨道上并且动画速度会发生变化.
我尝试使用onMouSEOver和.hover jquery,但我无法弄清楚它为什么不起作用.
我尝试使用onMouSEOver和.hover jquery,但我无法弄清楚它为什么不起作用.
#universum-planet1 { position: absolute; height: 250px; width: 250px; top: 40%; left: 50%; margin-left: -125px; margin-top: -65px; z-index: 1; border: 1px solid #989898; -webkit-border-radius: 225px; -moz-border-radius: 225px; border-radius: 225px; -webkit-animation: spin 15s linear infinite; -moz-animation: spin 15s linear infinite; animation: spin 15s linear infinite; -moz-transform-origin: center center; -webkit-transform-origin: center center; transform-origin: center center; } #planet1 { position: absolute; top: 5%; left: 5%; height: 50px; width: 50px; z-index: 2; -webkit-animation: spin 30s linear infinite; -moz-animation: spin 30s linear infinite; animation: spin 30s linear infinite; -moz-transform-origin: center center; -webkit-transform-origin: center center; transform-origin: center center; } @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } } @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
<div id="universum-planet1"> <div id="planet1"> <a href="universe.html" id="enterLink"> <img class="enter" src="http://webmaths.files.wordpress.com/2009/03/soccerball1.png" style="height:100%;" alt="" onMouSEOver="this.src='http://www.rsg-shop.com/images/Ball-PASTORELLI-Giallo-Fluo-00014-0.jpg';" onMouSEOut="this.src='http://webmaths.files.wordpress.com/2009/03/soccerball1.png'" /> </a> </div> </div>
解决方法
此解决方案使用具有相同关键帧动画(反向)的轨道包装器暂停/运行以在悬停时更改动画速度:
.wrapper{ position:absolute; top:40%; left:50%; margin-left:-125px; margin-top:-65px; width: 250px; height:250px; -webkit-animation:spin 20s linear infinite; -moz-animation:spin 20s linear infinite; animation:spin 20s linear infinite; -webkit-animation-direction: reverse; -moz-animation-direction: reverse; animation-direction: reverse; -webkit-animation-play-state: paused; -moz-animation-play-state: paused; animation-play-state: paused; } #universum-planet1 { height:250px; width: 250px; z-index:1; border: 1px solid #989898; border-radius: 225px; -webkit-animation:spin 15s linear infinite; -moz-animation:spin 15s linear infinite; animation:spin 15s linear infinite; -moz-transform-origin:center center; -webkit-transform-origin:center center; transform-origin:center center; } #planet1 { position:absolute; top:5%; left:5%; height: 50px; width: 50px; z-index:2; -webkit-animation:spin 30s linear infinite; -moz-animation:spin 30s linear infinite; animation:spin 30s linear infinite; -moz-transform-origin:center center; -webkit-transform-origin:center center; transform-origin:center center; } .wrapper:hover{ -webkit-animation-play-state: running; -moz-animation-play-state: running; animation-play-state: running; } @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } } @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
<div class="wrapper"> <div id="universum-planet1"> <div id="planet1"> <a href="universe.html" id="enterLink"> <img class="enter" src="http://webmaths.files.wordpress.com/2009/03/soccerball1.png" style="height:100%;" alt="" onMouSEOver= "this.src='http://www.rsg-shop.com/images/Ball-PASTORELLI-Giallo-Fluo-00014-0.jpg';" onMouSEOut="this.src='http://webmaths.files.wordpress.com/2009/03/soccerball1.png'" /></a> </div> </div> </div>
这是在0700年0700之前提出的