Question

到目前为止，我有一个非常简单的问题（但是我整天都在寻找教程）我想制作像这样的网站： http://www.koogco.no/ 查看右侧的社交按钮，当按钮旋转时鼠标滚动。

我尝试过很多关键字：旋转按钮jquery，动画按钮等。但是我找不到名字甚至是教程。

有人可以帮我指出这个吗？

Answer 1

这是一个CSS解决方案。

body {
  background: lightblue;
}
.container {
  width: 30px;
  height: 30px;
  overflow: hidden;
  border: 1px solid black;
}
.img-container {
  margin-top: -25px;
  margin-left: 5px;
  transition: all 0.3s cubic-bezier(.21,1.22,1,1.31);
  cursor: pointer;
}
.img-top {
  background: url(http://dummyimage.com/20x20/000/fff&text=2);
  width: 20px;
  height: 20px;
  margin-bottom: 10px;
}
.img-bottom {
  background: url(http://dummyimage.com/20x20/000/fff&text=1);
  height: 20px;
  width: 20px;
}
.img-container:hover {
  margin-top: 5px;
}

<div class="container">
  <div class="img-container">
    <div class="img-top"></div>
    <div class="img-bottom"></div>
  </div>
</div>

编辑：按照您的要求复制this site上的那个。

a {
  text-decoration: none;
  color: brown;
}
.home {
  display: inline-block;
  vertical-align: top;
  color: brown;
  width: 70px;
  height: 25px;
  text-align: center;
  background: #0D0605;
  opacity: 0.9;
  line-height: 25px;
  cursor: pointer;
}
.container {
  display: inline-block;
  overflow: hidden;
  width: 70px;
  height: 25px;
  background-color: #0D0605;
  opacity: 0.9
}
.img-container {
  transition: all 0.3s cubic-bezier(0.21, 1.22, 1, 1.31);
  cursor: pointer;
  margin-top: -15px;
}
.img-top {
  width: 70px;
  height: 20px;
  color: brown;
  text-align: center;
}
.img-bottom {
  height: 20px;
  width: 70p;
  color: white;
  text-align: center;
}
.img-container:hover {
  margin-top: 5px;
}

<div class="home">HOME</div>
<div class="container">
  <div class="img-container">
    <div class="img-top"><a href="">ABOUT</a>
    </div>
    <div class="img-bottom">ABOUT</div>
  </div>
</div>
<div class="container">
  <div class="img-container">
    <div class="img-top"><a href="">SERVICE</a>
    </div>
    <div class="img-bottom">SERVICE</div>
  </div>
</div>
<div class="container">
  <div class="img-container">
    <div class="img-top"><a href="">CONTACT</a>
    </div>
    <div class="img-bottom">CONTACT</div>
  </div>
</div>

Answer 2

您可以使用CSS3过渡。请参阅http://www.w3.org/TR/css3-transitions/，例如http://css3.bradshawenterprises.com/transitions/。具体地，

对按钮图像使用绝对定位，例如相对于它的容器。
以您希望的方式定位非活动状态图像和活动状态图像，例如在它之上。
对于活动状态，将活动状态图像移动到非活动状态图像的位置，后者移动到前者之下。
当它看起来像你想要的那样时，添加一个过渡属性。它应该看起来像transition: top 1s ease-in-out;。

Answer 3

创建一个包含两个图像的背景，一个在另一个上面。设置

background-position: 0px 20px;

然后使用

为背景位置设置动画

transition : all .2s;

将：悬停样式设置为

background-position: 0px 0px;

Answer 4

以下是您可以从中下载许多使用“悬停效果”的动画社交媒体图标的网站：

如何制作旋转文本按钮

4 个答案: