Html CSS Transition 使图像在悬停时上下移动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12081121/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Transition making a image move up and down on hover
提问by Joshua Hornby
I have this image and know i need to use css transition to make the vinyl move down when scrolled over? How would you go about doing this?
我有这张图片并且知道我需要使用 css 过渡来使黑胶在滚动时向下移动？你会怎么做呢？
回答by Vin Burgh
Apply position:relativeto the "vinyl" element, then on its hover state, set top:#px.
应用于position:relative“vinyl”元素，然后在其悬停状态，设置top:#px.
For example:
例如：
#vinyl {
position: relative;
/* transition properties here */
}
#vinyl:hover {
top: 5px;
}
回答by Ana
Well, the simplest way only involves one element with two backgrounds. The cover is the one on top and the other one is the vinyl itself.
嗯，最简单的方法只涉及具有两个背景的一个元素。封面是顶部的一个，另一个是乙烯基本身。
On hover, you simply change the background-positionof the second item.
在 上hover，您只需更改background-position第二项的 。
HTML is just:
HTML只是：
<div class='vinyl'></div>
and the CSS is:
和 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%;
}
If you want the transition to happen only on hover on the vinyl itself (no transitionon hoveron the cover), then you'll need to use two elements.
如果你想过渡到只发生在对乙烯本身（无悬停transition在hover封面上），那么你就需要使用两个元素。
DEMO- I've made .vinyla child of .cover, gave it positioning and set its z-indexto -1(so that it would go under the cover).
演示- 我已经做.vinyl了一个孩子.cover，给它定位并将其设置z-index为-1（以便它可以隐藏在封面下）。
HTML is now:
HTML现在是：
<div class='cover'>
<div class='vinyl'></div>
</div>
and the CSS is:
和 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%; }
