addThis Sharing Buttons for Wordpress，如何制作动画？

Question

我正在寻找一个 plugin/code 可以在 addThis 分享按钮上提供一些漂亮的鼠标悬停动画，但仍然想享受一键推文，喜欢等。 addThis 个默认按钮的功能。

我现在的是默认的，看起来像，

我想要的是与 arduino.cc 博客中使用的类似的东西，默认的一键式按钮在默认情况下是隐藏的，只有在鼠标悬停时才可见。例如：-

我怎样才能做到这一点？

Answer 1

您可以通过将自定义图像与实际共享按钮放在一起来执行此操作。默认情况下保持所有共享按钮的宽度为 0，并通过增加宽度使它们在悬停时可见。还添加 CSS 过渡以平滑展开按钮。

考虑这个例子。

.sharing-buttons {
  float: left;
  margin: 5px;
}
.share-button {
  float: right;
  margin-left: 5px;
  overflow: hidden;
  transition: all 0.6s ease 0s;
  white-space: nowrap;
  width: 0;
}
.sharing-buttons:hover .share-button {
  width: 100px;
}

<div id="wrapper">
  <div class="sharing-buttons fb">
    <a href="#">Custom Image</a>
    <div class="share-button">Button iframe</div>
  </div>
  <div class="sharing-buttons tw">
    <a href="#">Custom Image</a>
    <div class="share-button">Button iframe</div>
  </div>
</div>

编辑：最后添加此代码 & CSS

.addthis_toolbox a.at300b, .addthis_toolbox a.at300m {
 padding: 5px;
 width: auto;
}

.social-container {
  float: left;
  margin: 5px;
  width:auto;
}

.social-content {
 float: right;
 margin-left: 5px;
 overflow: hidden;
 -moz-transition: max-width .3s ease-out;
 -webkit-transition: max-width .3s ease-out;
 -o-transition: max-width .3s ease-out;
 transition: max-width .3s ease-out;
 white-space: nowrap;
 max-width: 0;
}

.social-container:hover .social-content {
 -moz-transition: max-width .2s ease-in;
 -webkit-transition: max-width .2s ease-in;
 -o-transition: max-width .2s ease-in;
 transition: max-width .2s ease-in;
 max-width: 95px;
}

<div class="addthis_toolbox addthis_default_style ">
    <!-- FACEBOOK -->
    <div class="social-container">
      <img src="<?php bloginfo('template_directory'); ?>/images/facebook.png" alt="" />
      <div class="social-content">
          <a class="addthis_button_facebook_like at300b" fb:like:layout="button_count"></a>
      </div>
    </div>
    <!-- G+ -->
    <div class="social-container">
      <img src="<?php bloginfo('template_directory'); ?>/images/gplus.png" alt="" />
      <div class="social-content">
        <a class="addthis_button_google_plusone" g:plusone:size="large"></a> 
      </div>
    </div>
    <!-- TWITTER -->
    <div class="social-container">
      <img src="<?php bloginfo('template_directory'); ?>/images/twitter.png" alt="" />
      <div class="social-content">
        <a class="addthis_button_tweet at300b"></a>
      </div>
    </div>
 </div>

addThis Sharing Buttons for Wordpress，如何制作动画？

addThis Sharing Buttons for Wordpress, how to animate?

css

wordpress

addthis