Trong thiết kế website khi CSS3 chưa ra đời thì việc tạo hiệu ứng cho trang web chủ yếu là dùng Flash hoặc jQuery. Việc dùng hai công nghệ đó khiến tốc độ website ảnh hưởng một phần. Và hôm nay, mình sẽ giúp các bạn tạo hiệu ứng chuyển động, chủ yếu nhờ đến hai thuộc tính Transition và Animation có trong CSS3.
CSS3 Animation
Trước khi vào phần hướng dẫn, chúng ta tham khảo vài thuộc tính của Animation và @keyframe. Thuộc tính animation xác định một chuyển động của một tag hay một hình ảnh.
1 2 3 4 5 6 7 8 | animation: [name] [duration] [timing] [delay] [interaction-count] [direction] [play-state]; [animation-name]: Tên của animation, do chúng ta tự qui định. [animation-duration]: Xác định thời gian để hoàn thành chuyển động, mặc định là 0s. [animation-timing-function]: Mô tả animation sẽ diễn ra như thế nào trên chu kì của nó. [animation-delay]: Xác định sau bao lâu thì chuyển động sẽ bắt đầu, mặc định sẽ là 0. [animation-iteration-count]: Xác định số lần thực hiện chuyển động. [animation-direction]: Animation sẽ diễn ra lần lượt từng chu kì hay ở chu kì tiếp theo sẽ đảo ngược lại với 2 giá trị: normal và alternate. [animation-play-state]: Animation có diễn ra hay dừng. |
Cấu trúc @keyframe
Thuộc tính @keyframes dùng để điều khiển diễn biến một hoạt động của thành phần, được dùng kèm với thuộc tính animation.
1 2 3 4 | @keyframes Tên Anination {giá trị { css }} [Tên Anination]: Xác định tên cho @keyframes. Tên này trùng với tên ở phần animation. [giá trị]: Định dạng thành phần theo trí đầu và vị trí cuối. [css]: Cần có một hay nhiều thuộc tính css. |
Và bây giờ chúng ta bài tạo hiệu ứng loading animation
HTML5
1 2 3 4 5 6 | <span class="step1"></span> <span class="step2"></span> <span class="step3"></span> <span class="step4"></span> <span class="step5"></span> <span class="step6"></span> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | span { display: inline-block; background: #fff; width: 4px; height: 4px; margin: 12px 2px; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; -webkit-animation: loader 4s infinite; -webkit-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415); -webkit-animation-fill-mode: both; -moz-animation: loader 4s infinite; -moz-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415); -moz-animation-fill-mode: both; -ms-animation: loader 4s infinite; -ms-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415); -ms-animation-fill-mode: both; animation: loader 4s infinite; animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415); animation-fill-mode: both;} |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | .step1 { -webkit-animation-delay: 1s; -moz-animation-delay: 1s; -ms-animation-delay: 1s; animation-delay: 1s;} .step2 { -webkit-animation-delay: 0.8s; -moz-animation-delay: 0.8s; -ms-animation-delay: 0.8s; animation-delay: 0.8s;} .step3 { -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; -ms-animation-delay: 0.6s; animation-delay: 0.6s;} .step4 { -webkit-animation-delay: 0.4s; -moz-animation-delay: 0.4s; -ms-animation-delay: 0.4s; animation-delay: 0.4s;} .step5 { -webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; -ms-animation-delay: 0.2s; animation-delay: 0.2s;} .step6 { -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -ms-animation-delay: 0s; animation-delay: 0s;} |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | @-webkit-keyframes loader { 0% { -webkit-transform: translateX(-30px); opacity: 0; } 25% { opacity: 1; } 50% { -webkit-transform: translateX(30px); opacity: 0; } 100% { opacity: 0; } } @-moz-keyframes loader { 0% { -moz-transform: translateX(-30px); opacity: 0; } 25% { opacity: 1; } 50% { -moz-transform: translateX(30px); opacity: 0; } 100% { opacity: 0; } } @-ms-keyframes loader { 0% { -ms-transform: translateX(-30px); opacity: 0; } 25% { opacity: 1; } 50% { -ms-transform: translateX(30px); opacity: 0; } 100% { opacity: 0; } } @keyframes loader { 0% { transform: translateX(-30px); opacity: 0; } 25% { opacity: 1; } 50% { transform: translateX(30px); opacity: 0; } 100% { opacity: 0; } } |
Với hiệu ứng trên bạn có thể nâng cấp website từ sử dụng javascrip thành css làm tăng tốc độ website của mình hơn.
Nguồn: Code Theory
Tin tức nổi bật
Thiết kế web theo mẫu
Thiết kế web theo mẫu là gì? Thiết kế web theo mẫu là dịch vụ website được xây dựng...
Tổng hợp 20+ cách kiếm tiền từ website trong năm 2020
Thời kỳ 4.0, Internet trở thành một phần không thể thiếu trong cuộc sống của chúng ta. Người...
10 bước xây dựng kế hoạch marketing online
Thị trường luôn thay đổi và chính vì thế các chiến lược marketing online của bạn cũng cần...
Ý tưởng đặt tên thương hiệu – Cách chọn tên miền website – Lời khuyên vàng từ ITC Việt
Cách chọn tên miền website. Chúng tôi là ITC Việt. Chúng tôi là công ty thiết kế website...
Thiết kế website theo yêu cầu
Hiện nay Dịch vụ Thiết kế website theo yêu cầu đã không còn xa lạ đối với các doanh...
Thiết kế trang web, lập trang web, dựng trang web bán hàng
Nội dung bài viết1 Thiết kế trang web2 Lập trang web3 Dựng trang web bán hàng4 CÔNG...
E-commerce là gì? E-business là gì? So sánh E-commerce và E-business
E-Commerce (tiếng Việt là thương mại điện tử) đang là một trong những vấn đề đáng quan tâm của...
Để thiết kế web đẹp bạn không thể bỏ qua 8 lưu ý sau
Việc thiết kế web ngày nay không còn dừng lại ở việc cung cấp thông tin đủ hay...