Code hiệu ứng icon twitter hoạt động khi hover

Chủ nhật - 15/08/2021 05:56
VNCode xin chia sẽ đến các bạn một đoạn code ngẫu hứng về hiệu ứng hover animation icon Twitter, mong được chia sẽ và đóng góp nhiều hơn từ phía cộng đồng coder tại việt nam
Hướng dẫn code hiệu ứng hover animation icon Twitter

Đầu tiên hãy tạo file có đuôi .html



Mở file bằng phần mềm hỗ trợ code: vscode, notepad++,..
Tạo thẻ <div> có class là tbl, cell mục đích để làm css: 
  <div class="tbl">
    <div class="cell">
      <a href="" target="_blank" class="tweet">
        <i></i>
        <span>Tweet</span>
      </a>
    </div>
  </div>
Thêm một chút css nằm ngay trong body hoặc thẻ <head> tùy thích mỗi người
<style type="text/css">

    html,body{

      height: 100%;

    }

    *{

      box-sizing: border-box;

    }

    .tweet{

      position: relative;

      display: inline-block;

      height: 20px;

      padding: 0 6px;

      color: #fff;

      cursor: pointer;

      background-color: #1b95e0;

      border-radius: 3px;

      box-sizing: border-box;

      text-decoration: none;

      transition: background-color 0.2s ease;

    }

    .tweet i {

      position: relative;

      top: 4px;

      display: inline-block;

      vertical-align: top;

      width: 18px;

      height: 11px;

      background-image: url("http://andreasstorm.com/lib/tweet.svg");

      background-repeat: no-repeat;

      background-position: 0 0;

      background-size: 144px 11px;

    }

    .tweet span{

      position: relative;

      top: 4px;

      left: -2px;

      vertical-align: top;

      font-family: 'Helvetica Neue', Arial, sans-serif;

      font-weight: 500;

      font-size: 11px;

    }

    .tweet:hover {

      background-color: #0c7abf;

    }

    .tweet:hover i{

      animation: tweet 0.6s steps(7) infinite;

    }

    .tbl{

      display: table;

      width: 100%;

      height: 100%;

    }

    .cell{

      display: table-cell;

      vertical-align: middle;

      text-align: center;

    }

    @-moz-keyframes tweet{

      100%{

        background-position: -126px 0;

      }

    }

    @-webkit-keyframes tweet{

      100%{

        background-position: -126px 0;

      }

    }

    @-o-keyframes tweet{

      100%{

        background-position: -126px 0;

      }

    }

    @keyframes tweet{

      100%{

        background-position: -126px 0;

      }

    }

  </style>

Code hoàn thiện 
<!DOCTYPE html>

<html>

<head>

  <title></title>

</head>

<body>

  <style type="text/css">

    html,body{

      height: 100%;

    }

    *{

      box-sizing: border-box;

    }

    .tweet{

      position: relative;

      display: inline-block;

      height: 20px;

      padding: 0 6px;

      color: #fff;

      cursor: pointer;

      background-color: #1b95e0;

      border-radius: 3px;

      box-sizing: border-box;

      text-decoration: none;

      transition: background-color 0.2s ease;

    }

    .tweet i {

      position: relative;

      top: 4px;

      display: inline-block;

      vertical-align: top;

      width: 18px;

      height: 11px;

      background-image: url("http://andreasstorm.com/lib/tweet.svg");

      background-repeat: no-repeat;

      background-position: 0 0;

      background-size: 144px 11px;

    }

    .tweet span{

      position: relative;

      top: 4px;

      left: -2px;

      vertical-align: top;

      font-family: 'Helvetica Neue', Arial, sans-serif;

      font-weight: 500;

      font-size: 11px;

    }

    .tweet:hover {

      background-color: #0c7abf;

    }

    .tweet:hover i{

      animation: tweet 0.6s steps(7) infinite;

    }

    .tbl{

      display: table;

      width: 100%;

      height: 100%;

    }

    .cell{

      display: table-cell;

      vertical-align: middle;

      text-align: center;

    }

    @-moz-keyframes tweet{

      100%{

        background-position: -126px 0;

      }

    }

    @-webkit-keyframes tweet{

      100%{

        background-position: -126px 0;

      }

    }

    @-o-keyframes tweet{

      100%{

        background-position: -126px 0;

      }

    }

    @keyframes tweet{

      100%{

        background-position: -126px 0;

      }

    }

  </style>

  <div class="tbl">

    <div class="cell">

      <a href="" target="_blank" class="tweet">

        <i></i>

        <span>Tweet</span>

      </a>

    </div>

  </div>

</body>

</html>

Chúc các bạn trải nghiệm vui vẻ và học thêm được nhiều điều mới từ code css animation tại VNCODE share và like để ủng hộ VNCODE phát triển mạnh mẽ hơn. Và bây giờ hãy trải nghiệm luôn hiệu ứng mới mẻ này nhé

Tác giả: admin, HHV Technology

Tổng số điểm của bài viết là: 0 trong 0 đánh giá

Click để đánh giá bài viết

  Ý kiến bạn đọc

Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây