PowerPoint là phần mềm để tạo những slide báo cáo, thuyết trình trong công việc, học tập cùng nhiều công cụ hỗ trợ tạo hiệu ứng động. Bài viết dưới đây sẽ hướng dẫn các bước tạo slide sáng tạo độc đáo bằng HTML CSS. Cùng theo dõi nhé!
Đầu tiên, khi thực hiện các bước tạo sile độc đáo sinh viên cần chuẩn bị trước các hình ảnh mà các bạn sẽ sử dụng trong slide và cho vào trong thư images của project
Bước 1: Tạo file index.html
Sau đó chúng ta sẽ để chèn hình ảnh sẽ chạy trong slide vào. Chúng ta sẽ sử dụng thẻ span có thuộc tính style=”–i:1” với số đếm –i để lấy thứ tự hình ảnh sau này code CSS cho nó chạy theo thứ tự.
Code mẫu HTML:
<div class=”box”>
<span style=”–i: 1″>
<img src=”./images/1.jpeg” alt=”” />
</span>
<span style=”–i: 2″>
<img src=”./images/2.jpeg” alt=”” />
</span>
<span style=”–i: 3″>
<img src=”./images/3.jpeg” alt=”” />
</span>
<span style=”–i: 4″>
<img src=”./images/4.jpeg” alt=”” />
</span>
<span style=”–i: 5″>
<img src=”./images/5.jpeg” alt=”” />
</span>
<span style=”–i: 6″>
<img src=”./images/6.jpeg” alt=”” />
</span>
</div>
Bước 2: Code CSS chạy hiệu ứng slide cho dự án
Sau khi đã có hình ảnh để chạy slide trong file index.html cùng thứ tự của nó rồi thì chúng ta sẽ sử dụng đoạn code CSS về transform để tạo hiệu ứng về độ nghiêng cho hình ảnh như sau:
.box span {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-origin: center;
transform-style: preserve-3d;
transform: rotateY(calc(var(–i) * 45deg)) translateZ(400px);
-webkit-box-reflect: below 0px
linear-gradient(transparent, transparent, #0004);
}
Sau khi đã tạo hiệu ứng về hình ảnh xong thì việc còn lại là chúng ta sử dụng @keyframes trong CSS để tạo phần chuyển động liên tục cho hình ảnh:
@keyframes animation {
0% {
transform: perspective(1000px) rotateY(0deg);
}
100% {
transform: perspective(1000px) rotateY(360deg);
}
}
Sau đó chúng ta gọi hiệu ứng animation vào trong thẻ .box bao bên ngoài toàn bộ hình ảnh của slide như sau:
.box {
position: relative;
width: 200px;
height: 200px;
transform-style: preserve-3d;
animation: animation 20s linear infinite;
}
Và đây là toàn bộ phần code CSS để các bạn tham khảo thêm, sau khi chạy code dưới local máy tính rồi thì các bạn có thể deploy dự án này lên trên Vercel (hoàn toàn Free) để chia sẻ thêm cho bạn bè hoặc đăng lên mạng xã hội của mình.
Demo: https://hoadv-slider-html-css.vercel.app/
Code: https://github.com/vanhoa690/hoadv_slider_html_css
Các bạn có thể tham khảo bài viết “Hướng dẫn deploy website HTML CSS lên Vercel Free” thì để đưa website của mình lên online được nhé! Chúc các bạn thành công!
CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #000;
}
.box {
position: relative;
width: 200px;
height: 200px;
transform-style: preserve-3d;
animation: animation 20s linear infinite;
}
@keyframes animation {
0% {
transform: perspective(1000px) rotateY(0deg);
}
100% {
transform: perspective(1000px) rotateY(360deg);
}
}
.box span {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-origin: center;
transform-style: preserve-3d;
transform: rotateY(calc(var(–i) * 45deg)) translateZ(400px);
-webkit-box-reflect: below 0px
linear-gradient(transparent, transparent, #0004);
}
.box span img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
Giảng viên Nguyễn Thị Loan
Bộ môn Công nghệ thông tin
FPT Polytechnic Hà Nội
