Question

我有一个社交按钮，可以在悬停时更改图像。它工作正常

<a href="#">
  <img src="http://i.imgur.com/TLGeYXo.png" class="social-icons social-fb "/>
</a>

我的CSS：

.social-fb:hover {
   content:url("http://i.imgur.com/bU0lzac.png");
}

但是我怎样才能制作一些动画，就像我悬停时一样，随着图像的变化，就会有一个动画。任何动画都可以。谢谢！

Answer 1

您可以使用以下css来执行脉冲：

.social-fb:hover {
  content: url("http://i.imgur.com/bU0lzac.png");
  -webkit-animation-name: pulse;
  animation-name: pulse;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

<a href="#">
  <img src="http://i.imgur.com/TLGeYXo.png" class="social-icons social-fb " />
</a>

<a href="#">
  <img src="http://i.imgur.com/bU0lzac.png" />
</a>

JSFiddle

Answer 2

你可以做很多不同的动画，我创建了一个简单的旋转动画here

诀窍是在定义它的悬停状态之前在元素上包含transition属性：

.social-fb{
    transition: 750ms ease-in-out;
}

750ms是动画的持续时间，ease-in-out是一个缓动设置，使其看起来更流畅，更逼真。

然后设置您想要的变换/动画，这里我将图标旋转360度

.social-fb:hover {
    content:url("http://i.imgur.com/bU0lzac.png");
    transform: rotate(360deg);
}

同样值得一看的是开始使用Font Awesome图标而不是像facebook图标这样的图像，它们是免费的，比例完美，加载速度比图像快，你也可以让背景渐渐变为彩色到下一个，check out this pen to see an example

更改图像css jquery上的动画

2 个答案: