Zoom trong css

Xin chào mọi người,
Em đang học html và css. Em có bài tập là phải fake 1 trang web bất kỳ,
Nói chung là em làm được rồi nhưng khi mình zoom lên thì mất hết vị trí.
Mọi người cho em hỏi là có cách nào để cố định khi mình zoom k ạ.
Mọi người giúp đỡ em bốc phét.
Em cảm ơn.

Bên trên là cấu trúc HTML chứa hình ảnh, bao bọc bên ngoài sẽ là thẻ div có lớp, bên trong sẽ có thêm thẻ bao bọc bên ngoài hình ảnh, bạn có thể sử dụng thẻ div, p. tùy ý

Hiệu ứng CSS thay đổi kích thước hình ảnh khi đưa con trỏ chuột vào

Khi chúng ta di chuột qua thì nút đó có zoom to ra (thu nhỏ), Mờ và tương tự khi chúng ta mất tiêu điểm vào nút đó (phóng to). Để tạo hiệu ứng này, chúng ta sử dụng pseudo-class (. sau đó,. bay lượn)

Use. sau khi tạo ra 1 nút giống như lớp nằm bên dưới nút gốc và hình ảnh phóng to, thu nhỏ chúng ta thấy chính là btn. sau đó

.btn::after {
    content: "";
    display: inline-block;
    height: 100%;
    width: 100%;
}

Lưu ý. content is cái luôn đi theo pseudo-class. sau, hoặc. trước, ở đây 100% là lấy theo chiều cao và chiều rộng của. btn

Phần bên dưới khung chính do hình ảnh của. btn. sau đó. bộ tà

top: 0;
left: 0;

Và đừng quên là đã đặt. btn{ } (vai game. btn as class cha of. btn. sau đó)

Ta continue edit. btn. after same as. btn

• bán kính biên giới. 100px
• Màu nền. #fff ( used for. btn-trắng. sau đó )
• chỉ số Z. -1 ( to for. btn. sau khi chắc chắn là như vậy với. btn)

Bây giờ thì ta không còn thấy hình ảnh của btn. sau nữa

Bước tiếp theo khi di chuột,. btn. after will zoom (hay scale up)

Ta use. biến đổi. tỷ lệ (1. 4); . btn. bay lượn. sau đó

Ta thấy thang tốc độ là ngay lập tức, ta muốn làm chậm lại việc sử dụng  transition. tất cả các. 4s; . btn. sau đó

• Ở đây ta cũng chỉnh chuyển tiếp luôn. tất cả các. 2s cho. btn, doing slow back effect hover and active of. btn

Tiếp theo ta thấy khi phóng to,. btn. sau khi bị mờ, ở đây ta sử dụng 1 mẹo là sử dụng độ mờ

• Đặt độ mờ. 0; . bay lượn. sau ta có thể giải thích 1 chút, khi hover btn. sau sẽ mờ dần đến giá trị 0 (không nhìn thấy gì) trong khoảng thời gian 0. 4s (thời gian chuyển tiếp đã được đặt bên trên). That is ta has been a effect mong muốn

Ở đây mình muốn scale chiều dọc lớn hơn thì sẽ đẹp hơn

• Edit retransform of. btn. bay lượn. sau khi chuyển đổi thành. tỷ lệX(1. 4) tỷ lệY(1. 6); . Đ)

Mã CSS

.btn,
.btn:link,
.btn:visited{
    text-transform: uppercase;
    text-decoration: none;
    padding: 15px 40px;
    display: inline-block;
    border-radius: 100px;
    font-size: 16px;
    
    transition: all .2s;
}

.btn::after {
    content: "";
    display: inline-block;
    height: 100%;
    width: 100%;
    
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 100px;
    transition: all .4s;
}

.btn:hover{
    transform: translateY(-3px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, .2);
}

.btn:active{
    outline: none;
    transform: translateY(-1px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
}
.btn-white{
    color: #777777;
    background-color: #fff;
}

.btn-white::after{
    background-color: #fff;
}

.btn:hover::after{
    transform: scaleX(1.4) scaleY(1.6);
    opacity: 0;
}

Kết luận

Ở bài viết này chúng ta đã kết thúc quá trình nút mã và hiệu ứng của nó trong Landing Page 2019 của trang web

Ở bài học sau, chúng ta sẽ cùng nhau ghi chú mã phần Header bằng cách tạo ra xác thực ỨNG DỤNG KHI TẢI TRANG WEB của văn bản tiêu đề và nút

Cảm ơn các bạn đã theo dõi bài viết. Vui lòng rút lại bình luận và đóng góp ý kiến ​​của mình để giúp phát triển bài viết tốt hơn. đừng quên. "Luyện tập – Thử thách – Không sợ khó"

Load down

Dự án

Nếu công việc thực hiện theo hướng dẫn không thể hiện ra các phần như mong muốn. Bạn cũng có thể tải xuống DỰ ÁN THAM KHẢO ở liên kết bên dưới

Thảo luận

Nếu bạn gặp bất kỳ khó khăn hay thắc mắc gì về khóa học, đừng ngại đặt câu hỏi trong phần BÌNH LUẬN bên dưới hoặc trong mục HỎI & ĐÁP trên thư viện Howkteam. com to get the support from the community