Có thể bạn quan tâm
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>
Xem Thêm : Thêm nút xem thêm và thu gọn dành cho chi tiết sản phẩm
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é
Nguồn: https://vncode.info
Danh mục: Thủ Thuật Chia Sẻ Hay
