Arrow(custom icon) I am trying to animate
我创建了一个箭头图标图像，它也是一个链接。它位于背景图像之上。当鼠标悬停在箭头上时，我想创建一个类似于 2d 过渡部分 here 中的效果的 “下沉” 效果。如何做到这一点？
到目前为止我的 CSS/HTML:
body {
padding: 0;
margin: 0;
}
header {
height: 100vh;
}
.content {
height: 150vh;
}
img#bg {
z-index: -100;
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: 100%;
/* Set up positioning */
position: relative;
top: 0;
left: 0;
}
img#arrow {
position: absolute;
bottom: 50;
left: 45.5%;
}
h1#title {
font-size: 20px;
font-family: arial;
margin-top: 2.5em;
text-align: center;
color: yellow;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Tinker Time</title>
</head>
<body>
<header>
<img src="assets/building2.jpg" id="bg" alt="" />
<a href="#anchor">
<img src="assets/arrow.png" id="arrow" alt="" />
</a>
</header>
<div class="content">
<a name="anchor"></a>
<h1>Team Members, About us, Blog</h1>
</div>
</body>最佳答案
作为该库一部分的悬停代码应该仍然可以处理图像，这是一个带有随机头像图标的工作示例:
/* Sink */
.hvr-sink {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-sink:hover, .hvr-sink:focus, .hvr-sink:active {
-webkit-transform: translateY(8px);
transform: translateY(8px);<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img class="hvr-sink" src="https://www.gravatar.com/avatar/6fce102dc34236cd4e485c69d7293ee9?s=32&d=identicon&r=PG"></img>
<br>
</body>
</html>关于html - 知道如何将这种下沉悬停效果添加到图像/链接吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37624422/