Cấp bậc tác giả:

HTML

Hướng dẫn làm thẻ neo mũi tên lên xuống

Được viết bởi webmaster ngày 31/10/2015 lúc 12:20 PM
Nhìn hình để thực hiện
  • 0
  • 8108
Tải tệp tin: Click ở đây

Hướng dẫn làm thẻ neo mũi tên lên xuống

the-neo-mui-ten-len-xuong.jpg

Đầu tiên tại trang chủ, thêm thẻ CSS này vào trong thẻ head
<link href="CSS/font-awesome.min.css" rel="stylesheet" type="text/css" />

Đặt tệp tin tùy ý theo nhu cầu sử dụng của bạn, bài viết dành cho những bạn đã quen thuộc trong việc đặt thẻ, thư mục CSS hay Script(tức đã quen với viết web html)

Chú ý: Có đính kèm Font trong link trên

Đặt thẻ này vào cuối dòng code, trước thẻ </body>

<div class="to-top animated2"><button><i class="fa fa-angle-up"></i></button></div>

Viết thêm các CSS sau: 
.animated2 {
    -webkit-animation-duration: .60s !important;
    animation-duration: .60s !important;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    transition: all 500ms cubic-bezier(1.000, 0.000, 0.000, 1.000);
    display: block;
}

.to-top {
    bottom: 0;
    right: 0;
}

.to-top button {
    position: relative;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 20px;
    line-height: 27px;
    text-align: center;
    width: 40px;
    height: 40px;
}

.to-top button {
    font-size: 30px;
    width: 40px;
    height: 32px;
    line-height: 1;
    right: 10px;
}

.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
}

.fa-angle-up:before {
    content: "\f106";
}

Nguồn bài viết: DOTNET.VN

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML