Hiệu ứng lấp đầy css hover
|
Mẹo. Sử dụng. bộ chọn liên kết để tạo kiểu liên kết đến các trang chưa được truy cập,. bộ chọn đã truy cập để tạo kiểu liên kết đến các trang đã truy cập và. bộ chọn hoạt động để tạo kiểu cho liên kết hoạt động Show Ghi chú. . di chuột PHẢI đến sau. liên kết và. đã truy cập (nếu có) trong định nghĩa CSS, để có hiệu quả Hỗ trợ trình duyệtCác số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ bộ chọn Bộ chọn. hover4. 07. 02. 03. 19. 6 Ghi chú. Trong IE phải khai báo a for the. bộ chọn di chuột để hoạt động trên các phần tử khác ngoài phần tử
chaupm 933 18-05-2020 Bizfly Cloud sẽ giới thiệu cho bạn danh sách những hiệu ứng Hover siêu đẹp và khá đơn giản mà bạn có thể áp dụng cho các nút trên trang web. Việc sử dụng những nút mẫu được tạo ra bằng hiệu ứng Hover sẽ làm cho trang web của bạn sinh động hơn và thu hút người truy cập hơn Các nút cách điệu với hiệu ứng Hướng di chuộtHiệu Hướng di chuột giúp bạn trở thành linh hồn cho nút ứng dụng đơn giản hơn sinh động nhờ sự chuyển động của nền chữ và nút viền. Ví dụ.  HTML.Từ trên xuống Từ trái Từ phải Từ trung tâm Từ dưới lên CSS./* ~~~~~~~ BẮT ĐẦU. BTN ~~~~~~~ */ btn { Chức vụ. liên quan đến; đệm. 1. 4rem 4. 2rem; đệm-phải. 3. 1rem; cỡ chữ. 1. 4rem; màu. var(--inv); khoảng cách giữa các chữ cái. 1. 1rem; chuyển đổi văn bản. chữ hoa; chuyển tiếp. tất cả 500ms khối-bezier(0. 77, 0, 0. 175, 1); con trỏ. con trỏ; người dùng chọn. không ai; } btn. trước,. btn. sau đó { Nội dung. ''; Chức vụ. tuyệt đối; chuyển tiếp. thừa kế; chỉ số z. -1; } btn. bay lượn { màu. var(--def); độ trễ chuyển đổi. . 5s; } btn. bay lượn. trước { độ trễ chuyển đổi. số 0; } btn. bay lượn. sau đó { lai lịch. var(--inv); độ trễ chuyển đổi. . 35s; } /* Từ đầu */từ đầu. trước, từ đầu. sau đó { trái. 0; Chiều cao. 0; chiều rộng. 100%; } từ đầu. trước { đáy. 0; ranh giới. 1px rắn var(--inv); đường viền trên cùng. 0; viền dưới. 0; } từ đầu. sau đó { hàng đầu. 0; Chiều cao. 0; } từ đầu. bay lượn. trước, từ đầu. bay lượn. sau đó { Chiều cao. 100%; } /* Từ trái */từ trái. trước, từ trái. sau đó { hàng đầu. 0; chiều rộng. 0; Chiều cao. 100%; } từ trái. trước { đúng. 0; ranh giới. 1px rắn var(--inv); biên giới bên trái. 0; biên giới bên phải. 0; } từ trái. sau đó { trái. 0; } từ trái. bay lượn. trước, từ trái. bay lượn. sau đó { chiều rộng. 100%; } /* Từ Phải */từ phải sang. trước, từ phải sang. sau đó { hàng đầu. 0; chiều rộng. 0; Chiều cao. 100%; } từ phải sang. trước { trái. 0; ranh giới. 1px rắn var(--inv); biên giới bên trái. 0; biên giới bên phải. 0; } từ phải sang. sau đó { đúng. 0; } từ phải sang. bay lượn. trước, từ phải sang. bay lượn. sau đó { chiều rộng. 100%; } /* Từ trung tâm */từ trung tâm. trước { hàng đầu. 0; trái. 50%; Chiều cao. 100%; chiều rộng. 0; ranh giới. 1px rắn var(--inv); biên giới bên trái. 0; biên giới bên phải. 0; } từ trung tâm. sau đó { đáy. 0; trái. 0; Chiều cao. 0; chiều rộng. 100%; lai lịch. var(--inv); } từ trung tâm. bay lượn. trước { trái. 0; chiều rộng. 100%; } từ trung tâm. bay lượn. sau đó { hàng đầu. 0; Chiều cao. 100%; } /* Từ đáy */từ đáy. trước, từ đáy. sau đó { trái. 0; Chiều cao. 0; chiều rộng. 100%; } từ đáy. trước { hàng đầu. 0; ranh giới. 1px rắn var(--inv); đường viền trên cùng. 0; viền dưới. 0; } từ đáy. sau đó { đáy. 0; Chiều cao. 0; } từ đáy. bay lượn. trước, từ đáy. bay lượn. sau đó { Chiều cao. 100%; } /* ~~~~~~~~~~~~ CÀI ĐẶT TOÀN CẦU ~~~~~~~~~~~~ */ *, *. trước, *. sau đó { kích thước hộp. hộp viền; } thân thể { --def. #96B7C4; --inv. #ffff; trưng bày. uốn cong; biện minh cho nội dung. trung tâm; sắp xếp các mục. trung tâm; hướng uốn. cột; Chiều cao. 100vh; chiều rộng. 100%; hình nền. độ dốc tuyến tính (-25deg, #616161 0%, #96B7C4 100%); } html { cỡ chữ. 12px; họ phông chữ. 'Hiển thị Playfair', serif; } div {lề-đáy. 3rem;} div. con cuối cùng {margin-bottom. 0;}
Đây là một hiệu ứng khá thú vị và đẹp mắt mà bạn có thể sử dụng nút chọn của mình để làm mới giao diện của trang web. To have been effect as hinh on youtham khảo các bước dưới đây. HTMLCSS chung phầnthân thể { màu nền. #222; } #chủ yếu { lề trên. 200px; } btn { màu. #ffff; con trỏ. con trỏ; trưng bày. chặn Nội tuyến; cỡ chữ. 16px; trọng lượng phông chữ. 400; chiều cao giữa các dòng. 36px; lề. 0 0 2em; chiều rộng tối đa. 160px; Chức vụ. liên quan đến; trang trí văn bản. không ai; chuyển đổi văn bản. chữ hoa; chiều rộng. 100%; } CSSbtn-1 { trọng lượng phông chữ. 100; chuyển tiếp. tất cả các. 25s; svg { Chiều cao. 45px; trái. 0; Chức vụ. tuyệt đối; hàng đầu. 0; chiều rộng. 100%; } trực tràng { lấp đầy. không ai; Cú đánh. #ffff; Chiều rộng đột quỵ. 2; đột quỵ-dasharray. 422, 0; độ trễ chuyển đổi. không ai; } } btn-1. bay lượn { trọng lượng phông chữ. 900; khoảng cách giữa các chữ cái. 2px; trực tràng { Chiều rộng đột quỵ. 5; đột quỵ-dasharray. 15, 310; đột quỵ-dashoffset. 48; chuyển tiếp. tất cả 1. 35s khối bezier(0. 19, 1, 0. 22, 1); } } btn-1. màu xanh lá cây. bay lượn { màu. màu xanh lá; trực tràng { Cú đánh. màu xanh lá; } } btn-1. màu xanh. bay lượn { màu. màu xanh da trời; trực tràng { Cú đánh. màu xanh da trời; } } Hiệu ứng bổ sung đường kẻ và nút đổi màuĐể áp dụng hiệu ứng này, bạn cần hiểu và biết cách sử dụng. before and. sau một cách thành công Ví dụ minh họa. HTMLCSSbtn-2 { khoảng cách giữa các chữ cái. 0; } btn-2. màu xanh lá cây. bay lượn, btn-2. màu xanh lá cây. tích cực { màu. màu xanh lá; } btn-2. màu xanh. bay lượn, btn-2. màu xanh. tích cực { màu. màu xanh da trời; } btn-2. bay lượn, btn-2. tích cực { khoảng cách giữa các chữ cái. 5px; } btn-2. sau đó, btn-2. trước { khả năng hiển thị backface. ẩn giấu; ranh giới. rgba rắn 1px(#fff, 0); đáy. 0px; Nội dung. " "; trưng bày. chặn; lề. 0 ô tô; Chức vụ. liên quan đến; chuyển tiếp. tất cả 280 mili giây vào ra dễ dàng; chiều rộng. 0; độ mờ đục. 0; } btn-2. màu xanh lá cây. sau đó, btn-2. màu xanh lá cây. trước { ranh giới. 1px màu xanh lá cây đặc; } btn-2. màu xanh. sau đó, btn-2. màu xanh. trước { ranh giới. 1px màu xanh đặc; } btn-2. bay lượn. sau đó, btn-2. bay lượn. trước { khả năng hiển thị backface. ẩn giấu; chuyển tiếp. chiều rộng 350ms dễ dàng ra vào; chiều rộng. 70%; độ mờ đục. 1; }
Hiệu ứng này giúp các nút bấm có sự phân phối độc đáo giữa màu sắc, hình khối và con chữ. Đây là một ứng dụng khá đơn giản nhưng mới mẻ Thao tác như sau. HTMLthùng đựng hàng cái nút. btn nhịp. btn-text Hover Me cái nút. btn. làm tròn nhịp. text-green Hover Me CSSnội dung,html{ Chiều cao. 100%; } thân thể { họ phông chữ. "Lato", sans-serif; màu. #111; trưng bày. uốn cong; hướng uốn. hàng ngang; sắp xếp các mục. trung tâm; căn chỉnh nội dung. trung tâm; biện minh cho nội dung. trung tâm; màu nền. #GDMN; } thùng đựng hàng { chiều rộng. tự động; trưng bày. uốn cong; hướng uốn. cột; //ranh giới. 2px màu đen đặc; } btn{ lề. tự động 20px; ranh giới. không ai; đệm. 10px 44px; cỡ chữ. 36px; Chức vụ. liên quan đến; &. trước{ chuyển tiếp. tất cả 0. thập niên 85-bezier(0. 68, -0. 55, 0. 265, 1. 55); Nội dung. ''; chiều rộng. 50%; Chiều cao. 100%; lai lịch. đen; Chức vụ. tuyệt đối; hàng đầu. 0; trái. 0; } &. btn-text{ màu. trắng; // xem tài liệu mdn để biết các loại chế độ hòa trộn khác nhau. chế độ hòa trộn. Sự khác biệt; } &. bay lượn{ &. trước{ lai lịch. đen; chiều rộng. 100%; } } // phong cách btn làm tròn &. tròn { bán kính đường viền. 50px; &. văn bản màu xanh lá cây { màu. #00F0B5; chế độ hòa trộn. Sự khác biệt; } &. trước{ bán kính đường viền. 50px; chiều rộng. 25%; lai lịch. #00F0B5; } &. bay lượn{ &. trước{ lai lịch. #00F0B5; chiều rộng. 100%; } } } } Tổng kết Hãy chia sẻ và đóng góp thêm những hiệu ứng Hover thú vị khác các bạn nhé. Hy vọng rằng bạn sẽ luôn đồng hành và ủng hộ những bài viết khác. Theo BizFly Cloud tổng hợp >> You can you quan tâm. mẹo cải thiện hiệu suất hoạt hình CSS và JS không thể bỏ qua BizFly Cloud là hệ thống sinh thái điện toán đám mây được vận hành bởi VCCorp - Công ty đi đầu trong lĩnh vực truyền thông và internet tại Việt Nam. Với đội ngũ kỹ thuật viên kỹ thuật trình độ cao và kinh nghiệm lâu năm làm việc trên các công nghệ khác nhau như đám mây, di động, web. , chúng tôi có đủ khả năng để hỗ trợ đưa ra những lời khuyên hữu ích và công nghệ toàn diện giúp doanh nghiệp chuyển đổi số thành công. Dành cho độc giả quan tâm tới các dịch vụ đám mây do BizFly Cloud cung cấp có thể truy cập tại đây |
