我正在尝试建立一个网站,我被困在这里。这是我到目前为止所做的
body,
html {
margin: 0;
}
/*Container*/
.container {
max-width: 1349px;
margin: auto
}
.hero-image {
background-image: url(https://www.w3schools.com/css/img_flwr.gif), url("https://www.w3schools.com/howto/photographer.jpg");
height: 350px;
background-position: right bottom, center;
background-repeat: no-repeat, no-repeat;
background-size: 160px, cover;
position: relative;
}
.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
.hero-text h1 {
font-size: 5vw;
}
.hero-text button {
border: none;
outline: 0;
display: inline-block;
padding: 10px 25px;
color: black;
background-color: #ddd;
text-align: center;
cursor: pointer;
}
.hero-text button:hover {
background-color: #555;
color: white;
}

<div class="container">
<div class="hero-image">
<div class="hero-text">
<h1>I am John Doe</h1>
<p>And I'm a Photographer</p>
<button>Hire me</button>
</div>
</div>
<p>Page Content..</p>
</div>
&#13;
我想让小花图像在鼠标悬停时移动,我希望它与鼠标相同,与此网站zooskopje.com.mk相同,它与滑块中弹出的图像一起使用。感谢。
答案 0 :(得分:0)
忘记JavaScript。用CSS做。
答案 1 :(得分:0)
您可以使用
.media-body:hover {
animation: move 10s .2s (ease or linear) 1;
}
@keyframes move {
from { top: 0; left: 0; }
to { top: -20px; left: -20px; }
}
这是一个小提琴:https://jsfiddle.net/9dLd1fav/
这只是一个例子,您需要调整它以满足您的需求。 见CSS Animations