首页 \ 问答 \ 知道如何将这种下沉的悬停效果添加到图像/链接吗?(Any idea how to add this sinking hover effect to an image/link?)

知道如何将这种下沉的悬停效果添加到图像/链接吗?(Any idea how to add this sinking hover effect to an image/link?)

箭头(自定义图标)我试图动画

我创建了一个箭头的图标图像,也是一个链接。 它位于背景图像之上。 当鼠标悬停在箭头上方时,我想创建一个类似于2d过渡部分中的“下沉”效果。 如何才能做到这一点?

到目前为止我的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>


Arrow(custom icon) I am trying to animate

I've created an icon image of an arrow that is also a link. It is on top of a background image. When the mouse hovers over the arrow I'd like to create a "sink" effect similar to the one found in the 2d transitions section here. How can this be done?

My CSS/HTML thus far:

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>


原文:https://stackoverflow.com/questions/37624422
更新时间:2020-03-20 22:16

最满意答案

作为此lib的一部分的悬停代码仍应使用图像,这是一个带有随机头像图标的工作示例:

/* 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>


The hover code that's part of this lib should still work with an image, heres a working example with a random avatar icon:

/* 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>

2016-06-03

相关文章

更多

最新问答

更多
  • 如何避免MDIParent表单调整大小(How do I avoid MDIParent form from resizing)
  • Angular自定义指令调用另一个自定义指令(Angular custom directive calling another custom directive)
  • 如何通过参数将文本解析并附加到SQL Server 2005中的存储过程(How to Parse and Append text to a stored procedure in SQL Server 2005 via a parameter)
  • OpenCV中心Homography(OpenCV Center Homography)
  • 如何在linux shell脚本中计算日期-N?(How to calculate date -N in linux shell scripting?)
  • 如何使用Devise创建用户配置文件?(How Do I Create a User Profile With Devise?)
  • 清理模式以管理树上的多步异步过程(Clean pattern to manage multi-step async processes on a tree)
  • 场景的角色(Role of the Scene)
  • 组件中的Angular 2组件[重复](Angular 2 Component In Component [duplicate])
  • jsPlumb draggable element javascript函数(jsPlumb draggable element javascript function)
  • MVC4:ViewModel(带有radiobuttonlist)在HttpPost之后为空(MVC4: ViewModel (with radiobuttonlist) is empty after HttpPost)
  • 如何在同一帐户上设置“Dev repo”(在prod和团队之间)(How to set up a “Dev repo” (between the prod and the team) on the same account)
  • 如何在tcl中将eth0配置为发送方udp端口(how to configure eth0 as a sender udp port in tcl)
  • 如何使用预定义文本替换来自数据库的部分结果(How do I replace part of result coming from Database with predefined text)
  • Selenium Java注入了新的Javascript函数(Selenium Java inject new Javascript function)
  • 使用.on的多个下拉菜单选择文本仅适用于第一个下拉列表(Multiple Dropdowns Menu Selection text using .on works only on first dropdown)
  • 快速将黄土曲线添加到大型数据集图中的方法(Quick way to add loess curve to large data set graph)
  • FilteringSelect in mvc(FilteringSelect in mvc)
  • 在Delphi XE2中开发Mac或iOS应用程序需要哪些硬件/软件?(What hardware/software is necessary to develop Mac or iOS apps in Delphi XE2?)
  • 在原型的构造函数中初始化属性时获取“未定义”(Getting 'undefined' when a property is initialized in the constructor of a prototype)
  • 通过越狱加载的应用程序的Documents文件夹位置(Location of Documents folder for an app loaded via jailbreak)
  • 在OpenGL中使用可编程和固定管道功能(Using both programmable and fixed pipeline functionality in OpenGL)
  • 将任何用户输入重定向到单独的底层程序(redirect any user input to a separate underlying program)
  • 编辑文本不能正常工作android(Edit texts not working properly android)
  • “user_denied”Facebook应用页面上的Facebook用户区域设置(Facebook user locale on “user_denied” facebook app page)
  • 在大图像中找到小的部分透明图像的坐标(find coordinates of small partially-transparent image within a large image)
  • 我如何在cakephp 3.1中获得完整的相对路径?(How i can get full relative path of image in cakephp 3.1?)
  • 如何保存拖动标记的新本地化?(How to save new localization of dragged marker?)
  • MySQL UPDATE vs INSERT和DELETE(MySQL UPDATE vs INSERT and DELETE)
  • 在执行查询之前,在SQLAlchemy模型中将datetime转换为unix时间戳?(Convert datetime to unix timestamp in SQLAlchemy model before executing query?)