Tất cả bài viết | CSS3

Hướng dẫn cách tạo border với hiệu ứng bằng CSS3 & JQUERY

Bước 1: Chuẩn bị nội dung HTML

<div class="container"> 
 <div class="row"> 
  <div class="col-md-12"> 
   <div class="panel panel-info text-center"> 
    <div class="panel-heading">Hướng dẫn cách tạo border với hiệu ứng bằng CSS3 & JQUERY</div> 
    <div class="panel-body"> <a href="http://hocwebgiare.com/"> <img class="ShakeAndBorder" alt="Dog 1" src="http://hocwebgiare.com/thiet_ke_web_chuan_demo/ShakeBorder/img/sample1.png"> </a> <a href="http://hocwebgiare.com/"> <img class="ShakeAndBorder" alt="Dog 2" src="http://hocwebgiare.com/thiet_ke_web_chuan_demo/ShakeBorder/img/sample2.png"> </a> <a href="http://hocwebgiare.com/"> <img class="ShakeAndBorder" alt="Dog 3" src="http://hocwebgiare.com/thiet_ke_web_chuan_demo/ShakeBorder/img/sample3.png"> </a> <a href="http://hocwebgiare.com/"> <img class="Noshake" alt="Dog 4" src="http://hocwebgiare.com/thiet_ke_web_chuan_demo/ShakeBorder/img/sample4.png"> </a> <a href="http://hocwebgiare.com/"> <img class="Noshake" alt="Dog 5" src="http://hocwebgiare.com/thiet_ke_web_chuan_demo/ShakeBorder/img/sample5.png"></a> <a href="http://hocwebgiare.com/"> <img class="Noshake" alt="Dog 6" src="http://hocwebgiare.com/thiet_ke_web_chuan_demo/ShakeBorder/img/sample6.png"> </a>
    </div> 
   </div> 
  </div> 
 </div>
</div>

Bước 2: Dùng Jquery gọi class của hình cần tạo border

<script>     
$('.ShakeAndBorder').ShakeBorder();      
$('.NoBorder').ShakeBorder({border:false});      
$('.Noshake').ShakeBorder({shake:false});
</script>

Bước 3: Gọi thư viện ShakeBorder,Jquery và Bootstrap

<link rel="stylesheet" href="http://hocwebgiare.com/bootstrap/css/bootstrap.min.css"> <script src="http://hocwebgiare.com/bootstrap/js/jquery.min.js"></script> <script src="http://hocwebgiare.com/bootstrap/js/bootstrap.min.js"></script> <script src="http://hocwebgiare.com/thiet_ke_web_chuan_demo/ShakeBorder/ShakeBorder.js"></script>

<link href="http://hocwebgiare.com/thiet_ke_web_chuan_demo/ShakeBorder/ShakeBorder.css" rel="stylesheet">

Xem demo Tải Code Đăng ký tham gia làm hội viên của kênh để được xem các bài học mới nhất

Hãy click Like để ủng hộ website (Click Like to support the website!)