動畫帶有彈跳效果的圖標

-3

如何使用jquery或css爲具有彈跳效果的社交媒體圖標製作動畫效果。請注意，我使用的字體真棒。 `動畫帶有彈跳效果的圖標

<!DOCTYPE html> 
<html lang="ar" dir="rtl"> 
    <head> 
     <meta charset="utf-8"> 
     <link href="../css/bootstrap.min.css" type="text/css" rel="stylesheet"> 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
     <link href="../css/bootstrap-arab.css" rel="stylesheet"> 
     <script src="../js/jquery.js"></script> 
     <script src="../js/bootstrap.min.js"></script> 

     <style type="text/css"> 
      @import url('https://fonts.googleapis.com/css?family=Aref+Ruqaa'); 
      body{ 
       background-color: #eee; 
      } 
      .box-1{ 
       margin: 5px auto; 
       background-color: white; 
       box-shadow: 4px 4px 3px #888888; 
       border: 1px solid #ddd; 
       padding: 10px; 
      } 
      .title{ 
       font-size: 34px; 
       font-family: 'Aref Ruqaa', serif; 
      } 
      .detail{ 
       border-left: 6px solid #E22626; 
       text-align: left; 
      } 
      .sep{ 
       border: 1px solid #eee; 
       margin: 10px 0px; 
      } 
      blockquote{ 
       margin-bottom: 5px; 
      } 
      .comment-text{ 
       border: 2px solid #999; 
       border-radius: 5px; 
       margin: 5px; 
       padding: 10px 5px 
      } 
      .cmnt{ 
       background: #ddd; 
       padding: 5px; 
       border-radius: 5px; 
       margin: 4px 0px; 
      } 
      .fa { 
       padding: 20px; 
       font-size: 28px; 
       width: 70px; 
       text-align: center; 
       text-decoration: none; 
       margin: 5px 2px; 
       border-radius: 50%; 
      } 
      a:hover.fa-facebook:hover { 
       opacity: 0.7; 
       text-decoration: none; 
       color: #3B5998; 
       background: white; 
      } 
      .fa-facebook { 
       background: #3B5998; 
       color: white; 
      } 
      a:hover.fa-twitter:hover { 
       opacity: 0.7; 
       text-decoration: none; 
       color: #55ACEE; 
       background: white; 
      } 
      .fa-twitter { 
       background: #55ACEE; 
       color: white; 
      } 
      a:hover.fa-google:hover { 
       opacity: 0.7; 
       text-decoration: none; 
       color: #dd4b39; 
       background: white; 
      } 
      .fa-google { 
       background: #dd4b39; 
       color: white; 
      } 
      a:hover.fa-instagram:hover { 
       opacity: 0.7; 
       text-decoration: none; 
       color: #125688; 
       background: white; 
      } 
      .fa-instagram { 
       background: #125688; 
       color: white; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-md-12 col-sm-12 col-xs-12"> 
        <div class="video-section"> 
         <center> 
          <div class="embed-responsive embed-responsive-16by9"> 
           <iframe src="https://www.youtube.com/embed/cQ5on1IfkLs" width="700px" height="400px" frameborder="0" allowfullscreen></iframe> 
          </div> 
         </center> 
        </div>  
       </div> 
      </div> 
      <div class="row"> 
       <div class="col-md-12 col-sm-12 col-xs-12"> 
        <div class="box-1"> 
         <div class="title"> 
          <p>بوش (2009) | الحرب التكتيكية | 1080P</p> 
         </div> 
         <div class="sep"></div> 
         <blockquote class="detail"> 
          تم النشر بتاريخ 22 4 2017  |  المحرر: محمود سعيفان  |  أكشن 
         </blockquote> 
        </div> 
       </div> 
      </div> 
      <div class="row"> 
       <div class="col-md-12 col-sm-12 col-xs-12"> 
        <div class="box-1 text-justify"> 
         <dt>الموضوع:</dt> 
         <dd> 
          يجب على اثنين من الشباب الأمريكيين ذوي القدرات الخاصة السباق للعثور على فتاة في هونغ كونغ قبل منظمة حكومية غامضة تسمى شعبة يفعل.إخلاء المسؤولية بموجب حقوق الطبع والنشر بموجب المادة 107 من قانون حق المؤلف لعام 1976، يخصص بدل "الاستخدام العادل" لأغراض مثل النقد والتعليق والإبلاغ عن الأخبار والتدريس والمنح الدراسية والبحث. الاستخدام العادل هو الاستخدام المسموح به بموجب قانون حقوق الطبع والنشر الذي قد يكون بخلاف ذلك منتهكا. غير هادفة للربح، والتعليمية أو الاستخدام الشخصي نصائح التوازن لصالح الاستخدام العادل. لا يقصد التعدي على حق المؤلف. 
         </dd> 
         <br /><br /><br /> 
         <p><b>مدير التنفيذ: </b><a href="http://www.imdb.com/title/tt0465580/">بول ماكجيجان</a></p> 
         <p><b>الكاتب: </b><a href="http://www.imdb.com/name/nm0100027?ref_=tt_ov_wr">ديفيد بورلا</a></p> 
         <p><b>الممثلون الرئيسيون: </b><a href="">كاميلا بيلل</a>، <a href="">داكوتا فاننينغ</a>، <a href="">كريس إيفانز</a></p> 
         <br /><br /> 
         <dt>لمزيد من المعلومات حول المقطع: <a href="http://www.imdb.com/title/tt0465580/">imdb</a></dt> 
         <br /> 
         <div class="form-group"> 
          <label for="comment">علق بإيجابية :</label> 
          <input type="text" placeholder="name*" class="form-control" required> 
          <p></p> 
          <textarea noresize class="form-control" rows="5" id="comment"></textarea> 
          <button type="submit" class="btn btn-primary" style="margin-top: 7px;">Submit</button> 
         </div> 
         <div class="row"> 
          <center> 
           <div class="social-media-section"> 
            <div class="col-md-3 col-xs-6 col-sm-3"> 
             <a href="#" class="fa fa-facebook"></a> 
            </div> 
            <div class="col-md-3 col-xs-6 col-sm-3"> 
             <a href="#" class="fa fa-twitter"></a> 
            </div> 
            <div class="col-md-3 col-xs-6 col-sm-3"> 
             <a href="#" class="fa fa-google"></a> 
            </div> 
            <div class="col-md-3 col-xs-6 col-sm-3"> 
             <a href="#" class="fa fa-instagram"></a> 
            </div> 
           </div> 
          </center> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class="row"> 
       <div class="col-md-12 col-sm-12 col-xs-12"> 
        <div class="box-1"> 
         <div class="comment-section"> 
          <dt>التعليقات :</dt> 
           <div class="sep"></div> 
          <div class="cmnt"> 
           <dt style="color: #E22626;">محمد علي&nbsp;&nbsp;<small class="text-muted">بتاريخ 25-5-2017</small></dt> 
           <p class="comment-text">أود أن أعرف الذين يعتقدون أن هذا لن تبدو غبية عندما يجري الفيلم.</p> 
          </div> 
          <div class="cmnt"> 
           <dt style="color: #E22626;">علي يونس&nbsp;&nbsp;<small class="text-muted">بتاريخ 29-7-2017</small></dt> 
           <p class="comment-text">فيلم رائع جدا !!</p> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

來源

2017-08-23 MahSou

'動畫'是一個非常通用的術語。你究竟期待它做什麼，你做了什麼努力才能做到這一點？ –

只是因爲你使用的是Facebook圖標，不會讓這個問題值得'facebook'標籤... – CBroe

@RoryMcCrossan，任何事情，像上下旋轉動畫，都有太多的動畫風格... – MahSou

您可以使用關鍵幀與CSS如圖here

@keyframes bounce { 
    0%, 20%, 60%, 100% { 
     -webkit-transform: translateY(0); 
     transform: translateY(0); 
    } 

    40% { 
     -webkit-transform: translateY(-20px); 
     transform: translateY(-20px); 
    } 

    80% { 
     -webkit-transform: translateY(-10px); 
     transform: translateY(-10px); 
    } 
}

，並使用這個所有你想在懸停「跳」的元素：

a:hover.fa-twitter:hover { 
    animation: bounce 1s; 
}

爲了更平滑地反彈，您必須根據自己的喜好更改關鍵幀部分。

來源

2017-08-23 14:40:48

非常感謝:) – MahSou

動畫帶有彈跳效果的圖標

回答

相關問題