javascript - CSS3 悬停在图标元素上

Question

html代码..

       <div>
          <ul class="social-icon">
            <li><a href="#" class="social-facebook"><i class="fa fa-facebook"></i></a</li>
            <li><a href="#"><i class="fa fa-twitter"></i></a></li>
            <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
            <li><a href="#"><i class="fa fa-dribbble"></i></a></li>
            <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
            <li><a href="#"><i class="fa fa-rss"></i></a></li>
          </ul>
        </div>

CSS 代码..

.social-icon {
          text-align: center;
          text-decoration: none;
          position: fixed;
        }
        .social-icon li {
          list-style: none;
          display: inline-block;
          float: left;
        }
        .social-icon a {
          display: inline-block;
          font-size: 18px;
          line-height: 38px;
          width: 35px;
          border: 1px solid #f7f7f7;
          border-left: 0;
          text-decoration: none;
        }
        .social-icon a.social-facebook {
          opacity: 0;
          -webkit-transform: scale(2);
          -moz-transform: scale(2);
          -o-transform: scale(2);
          -ms-transform: scale(2);
          transform: scale(2);
          -webkit-transition: all 0.3s ease-in-out 0.2s;
          -moz-transition: all 0.3s ease-in-out 0.2s;
          -o-transition: all 0.3s ease-in-out 0.2s;
          -ms-transition: all 0.3s ease-in-out 0.2s;
          transition: all 0.3s ease-in-out 0.2s;
        }
        .social-icon a.social-facebook:hover {
          background-color: #0e39d8;
          opacity: 1;
          -webkit-transform: scale(1);
          -moz-transform: scale(1);
          -o-transform: scale(1);
          -ms-transform: scale(1);
          transform: scale(1);
          -webkit-transition-delay: 0.2s;
          -moz-transition-delay: 0.2s;
          -o-transition-delay: 0.2s;
          -ms-transition-delay: 0.2s;
          transition-delay: 0.2s;
        }
        .social-icon a:first-child {
          border-left: 1px solid #f7f7f7;
        }
        .social-icon a i {
          color: #d2d2db;
        }

问题是..我需要一个静态图标和一个悬停图标...我的静态图标不透明度是-0..但我想在同一位置显示静态图标，当悬停时图标会上下移动.......请帮助我..... 悬停显示时未显示 fb 图标。 Here is the jsfiddle link 抱歉我的英语不好。

Answer 1

你试试this

我已经使用 CSS3 关键帧完成了

CSS

.social-icon a:hover {
  -webkit-animation: 0.3s popIn;
  -moz-animation: 0.3s popIn;
   animation: 0.3s popIn;
   background-color: #0e39d8;
   }     
@-webkit-keyframes popIn
{
  0%   {-webkit-transform: scale(1)}  
  50%   {-webkit-transform: scale(2)}
  100% {-webkit-transform: scale(1); background-color: #0e39d8;
          opacity: 1;}
}
@-moz-keyframes popIn
{
  0%   {-moz-transform: scale(1)}
  50%   {-moz-transform: scale(2)}
  100% {-moz-transform: scale(1); background-color: #0e39d8;
          opacity: 1;}
}
@keyframes popIn
{
  0%   {transform: scale(1)}
  50%   {transform: scale(2)}
  100% {transform: scale(1); background-color: #0e39d8;
          opacity: 1;}
}