【问题标题】:Animation on change image css jquery更改图像 css jquery 的动画
【发布时间】:2015-10-01 20:02:51
【问题描述】:

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

Fiddle

<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");
}

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

【问题讨论】:

  • @ArunKumar 我很乐意。但我只是需要简单的动画,不想加载整个 CSS 悬停脚本。不过谢谢

标签: jquery css animation css-transitions


【解决方案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

【讨论】:

  • 谢谢 :) 将选择此作为答案 :)
【解决方案2】:

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

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

.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

【讨论】:

    猜你喜欢
    • 2015-12-29
    • 2018-10-25
    • 1970-01-01
    • 2014-06-08
    • 2017-06-21
    • 2016-12-13
    • 2021-11-10
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多