我想将鼠标悬停在图像(音乐专辑)上,然后记录滚出来,所以我希望它向右移动并旋转一下。它已经可以向右移动,但我不能让它随之旋转。
#cover1是专辑,#coverrecord1是需要推出的记录,我希望尽可能简单,因为我不是专业编码。
非常感谢。
$(document).ready(function (){
$("#cover1").hover(
function() {
$("#coverrecord1").stop().animate({ left: '5%' });
},
function() {
$("#coverrecord1").stop().animate({ left: '0' });
}
);
});
答案 0 :(得分:0)
如果您愿意,也可以跳过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>