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

Hướng dẫn tạo hiệu ứng cho icon bằng Bootstrap

Trong bài thực hành này các bạn sẽ được hướng dẫn cách tạo hiệu ứng cho icon bằng Bootstrap

Bước 1: Dùng HTML tạo các icon

 
 Hướng dẫn tạo hiệu ứng cho icon bằng Bootstrap
  
   
   Tạo icon xoay tròn: 
    
    
    
    
   Tạo icon xoay theo góc độ: 
    
    
    
    
   Tạo icon lật:

Bước 2: Định nghĩa CSS

.gly-spin {	
-webkit-animation: spin 2s infinite linear;	
-moz-animation: spin 2s infinite linear;	
-o-animation: spin 2s infinite linear;	
animation: spin 2s infinite linear;
}
@-moz-keyframes spin { 
0% { 
-moz-transform: rotate(0deg);
} 
100% { 
-moz-transform: rotate(359deg);
}
}
@-webkit-keyframes spin { 
0% { 
-webkit-transform: rotate(0deg);
} 
100% { 
-webkit-transform: rotate(359deg);
}
}
@-o-keyframes spin { 
0% { 
-o-transform: rotate(0deg);
} 
100% { -o-transform: rotate(359deg);
}
}
@keyframes spin { 
0% { 
-webkit-transform: rotate(0deg); 
transform: rotate(0deg);
} 
100% { -webkit-transform: rotate(359deg); 
transform: rotate(359deg);
}
}

.gly-rotate-90 { 
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);	
-webkit-transform: rotate(90deg);	
-moz-transform: rotate(90deg);	
-ms-transform: rotate(90deg);	
-o-transform: rotate(90deg);	
transform: rotate(90deg);
}
.gly-rotate-180 { 
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);	
-webkit-transform: rotate(180deg);	
-moz-transform: rotate(180deg);	
-ms-transform: rotate(180deg);	
-o-transform: rotate(180deg);	
transform: rotate(180deg);
}
.gly-rotate-270 { 
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);	
-webkit-transform: rotate(270deg);	
-moz-transform: rotate(270deg);	
-ms-transform: rotate(270deg);	
-o-transform: rotate(270deg);	
transform: rotate(270deg);
}
.gly-flip-horizontal { 
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);	
-webkit-transform: scale(-1, 1);	
-moz-transform: scale(-1, 1);	
-ms-transform: scale(-1, 1);	
-o-transform: scale(-1, 1);	
transform: scale(-1, 1);
}
.gly-flip-vertical { 
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);	
-webkit-transform: scale(1, -1);	
-moz-transform: scale(1, -1);	
-ms-transform: scale(1, -1);	
-o-transform: scale(1, -1);	
transform: scale(1, -1);
}

Bước 3: Gọi thư viện Bootstrap

Bước 4: Gọi thư viện JQUERY

Xem demo Đă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