小编use*_*991的帖子

我正在构建一个行星系统,可以将其悬停在轨道上并且动画速度会发生变化.
我尝试使用onMouseOver和.hoverjquery,但我无法弄清楚它为什么不起作用.

#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 …

我正在变得绝望..我尝试建立一个旋转背景图像的网站,自动调整到窗口的大小.我真的不是那么多html,css,javascript等,但我设法到目前为止,图片旋转并调整到窗口大小..但是当我缩小窗口真的很小,图片旋转出来的窗口..我希望你明白我的意思.

这是我的代码:

小提琴

HTML

<div id="bgcon">
    <div id="bgimg">
    </div>
</div>

CSS

html, body {
    padding:0;
    margin:0;
    width:100%;
    height:100%;
}
#bgcon {
    width:100%;
    height:100%;
    overflow:hidden;
}
#bgimg {
    content:"";
    position: fixed;
    width: 250%;
    height: 250%;
    top: -80%;
    left: -80%;
    z-index: -1;
    overflow:hidden;
    background-image: url("http://sidekickwallpapers.com/wp-content/uploads/2014/03/space-wallpapers-1920x1080-design-ideas-space-wallpapers-s3vgbbit.jpg");
    -webkit-animation:spin 150s linear infinite;
    -moz-animation:spin 150s linear infinite;
    animation:spin 150s linear infinite;
}
}
@-moz-keyframes spin {
    100% {
        -moz-transform: rotate(360deg);
    }
}
@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes spin {
    100% { …