Question

我想将鼠标悬停在图像（音乐专辑）上，然后记录滚出来，所以我希望它向右移动并旋转一下。它已经可以向右移动，但我不能让它随之旋转。

＃cover1是专辑，＃coverrecord1是需要推出的记录，我希望尽可能简单，因为我不是专业编码。

非常感谢。

 $(document).ready(function (){
     $("#cover1").hover(
         function() {
             $("#coverrecord1").stop().animate({ left: '5%' });
         },
         function() {
             $("#coverrecord1").stop().animate({ left: '0' });
         }
     );
});

Answer 1

如果您愿意，也可以跳过js：）

.album {
  background-color: orange;
  height: 10em;
  margin: 3em auto;
  position: relative;
  width: 10em;
}
.album:after, .album:before {
  content: "";
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.album:after {
  background-color: orange;
  z-index: 1;
}
.album:before {
  background-image: linear-gradient(to left, gray, black);
  border-radius: 50%;
  transition: transform 500ms;
}
.album:hover:before {
  transform: translate3d(40%, 0%, 0) rotate(30deg);
}

<div class="album"></div>

将鼠标悬停在另一个div上时，旋转并向右移动图像

1 个答案: