Question

我有这个图像并知道我需要使用css过渡来滚动时乙烯基向下移动？你会怎么做呢？

Answer 1

将position:relative应用于“vinyl”元素，然后在其悬停状态下，设置top:#px。

例如：

#vinyl {
 position: relative;
 /* transition properties here */
}

#vinyl:hover {
 top: 5px;
}

Answer 2

嗯，最简单的方法只涉及一个有两个背景的元素。封面是顶部的，另一个是乙烯基本身。

在hover上，您只需更改第二项的background-position。

DEMO

HTML只是：

<div class='vinyl'></div>

，CSS是：

.vinyl {
    width: 109px;
    height: 162px;
    margin: 135px auto;
    background: url(http://img842.imageshack.us/img842/7524/albumm.jpg) 
            no-repeat 0 100%,
        radial-gradient(circle, transparent 3%, navy 4%, navy 5%, #4774a2 5%, 
                #4774a2 8%, navy 8%, navy 9%, #4774a2 10%, #4774A2 20%, 
                black 21%, #1c1c1c, black 69%, transparent 70%) 
            no-repeat 50% 0%;
    background-size: 109px 109px;
    transition: .65s;
}
.vinyl:hover {
    background-position: 0 100%, 50% 95%;
}

如果您希望仅在悬停在黑胶唱片上时进行转换（封面上的transition上没有hover），那么您需要使用两个元素。

DEMO - 我让.vinyl成为.cover的孩子，给了它定位并将其z-index设置为-1（这样就可以了在封面下。）

现在是HTML：

<div class='cover'>
    <div class='vinyl'></div>
</div>

，CSS是：

.cover {
    width: 111px;
    height: 111px;
    margin: 135px auto;
    background: url(http://img842.imageshack.us/img842/7524/albumm.jpg);
}
.vinyl {
    position: relative;
    z-index: -1;
    top: -49%; left: 1.5%;
    width: 109px;
    height: 109px;
    border-radius: 50%;
    background: radial-gradient(transparent 3%, navy 4%, navy 5%, #4774a2 5%, 
                #4774a2 8%, navy 8%, navy 9%, #4774a2 10%, #4774A2 20%, 
                black 21%, #1c1c1c, black 69%, transparent 70%) no-repeat 50% 0%;
    background-size: 109px 109px;
    transition: .65s;
}
.vinyl:hover { top: -3%; }

CSS转换使图像在悬停时上下移动

2 个答案: