Khái quát
Chắc hẳn việc tạo ra các hiệu ứng màu sắc hay background image cho văn bản sử dụng CSS không còn quá xa lạ gì với developer nửa, tuy nhiên còn có một kiểu hiệu ứng background cho chử không kém phần đặc sắc đó là hiệu ứng animattion video chạy làm nền cho chử trong CSS. Vậy trong bài này hãy thử cùng nhau tạo hiệu ứng video chạy nền trong chử với Lùn Dev nhé.
Tiến hành tạo hiệu ứng video chạy nền trong chử
Khởi tạo video chạy tự động
Chúng ta cần có sẳng một video chạy tự động và lặp đi lặp lại liên tục, ở đây có một lưu ý đó là từ những năm gần đây chorm đã không còn cho phép khởi chạy video có âm thanh tự động nửa, do đó chúng ta cần tắt tiếng âm thanh để chạy được, đừng lo chúng ta sẽ làm điều đó với code chứ không cần một video thật sự không có âm thanh.
- Thuộc tính muted dùng để tắt tiếng âm thanh của video hiện tại.
- Thuộc tính autoplay dùng để tự động chạy video khi tải trang ( lưu ý phải sử dụng muted kèm theo).
- Thuộc tính loop dùng để lặp lại video liên tục.
Code HTML
LUNDEV
Bạn hãy để í ngay bên dưới video mình đã chèn thêm một đoạn text, đoạn text này mình sẽ sử dụng CSS để tạo ra hiệu ứng chạy trong nền video.
Code CSS
body{
margin: 0;
padding: 0;
}
.container {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.container > .bg-video {
width: 100%;
height: 100%;
object-fit: cover;
}
.container > .text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 0 30px;
background-color: #000;
color: #fff;
font-weight: 900;
font-size: 130px;
font-family: sans-serif;
mix-blend-mode: multiply;
}
Hãy chú ý đến thẻ .container > .text, mình cân chỉnh vị trí đề nó nằm đề lên video bên dưới, sau đó tiếp tục sử dụng mix-blend-mode: multiply. Thuộc tính mix-blend-mode: multiply sẽ tạo ra một hiệu ứng hòa trộn với phần tử nằm bên dưới, cụ thể đó là video với quy tắt như sau:
- Phần nội dung màu trắng sẽ nhìn xuyên thấu hoàn toàn được nội dung video phía sau (Đó là lí do mình cho text color màu trắng).
- Và màu đen sẽ là màu không thể nhìn xuyên thấu được.
Thành quả
Video hướng dẩn chi tiết
Kết luận
Trên đây chính là toàn bộ nội dung hướng dẩn tạo hiệu ứng video chạy làm nền trong chử với HTML và CSS. Mong rằng bài viết này sẽ hửu ích với bạn, hẹn gặp lại mọi người ở video lần sau.