Loading icon cực sáng tạo với HTML5 & CSS3

Hôm nay mình sẽ mang đến cho các bạn thêm một mẫu loading rất dễ làm với sự kết hợp hoàn hảo giữa html và CSS3. Qua bài viết này, các bạn sẽ hiểu được cách tạo các hiệu ứng động đơn giản bằng CSS3 và có thể áp dụng hiệu ứng này ngay cho website hay blog mà các bạn đang quản lý.

Loading icon cực sáng tạo với HTML5 & CSS3

Xem Demo | Download

HTML

Để tạo hiệu ứng loading, chúng ta cần các thẻ html được bố trí như sau :

 <div class="animationload">     <div class="osahanloading"></div> </div> 

CSS

Các bạn hãy xem cách tạo hiệu ứng động cực đơn giản với đoạn css bên dưới.

 .animationload {     background-color: #fff;     height: 100%;     left: 0;     position: fixed;     top: 0;     width: 100%;     z-index: 10000; } .osahanloading {     animation: 1.5s linear 0s normal none infinite running osahanloading;     background: #fed37f none repeat scroll 0 0;     border-radius: 50px;     height: 50px;     left: 50%;     margin-left: -25px;     margin-top: -25px;     position: absolute;     top: 50%;     width: 50px; }  .osahanloading::after {     animation: 1.5s linear 0s normal none infinite running osahanloading_after;     border-color: #85d6de transparent;     border-radius: 80px;     border-style: solid;     border-width: 10px;     content: "";     height: 80px;     left: -25px;     position: absolute;     top: -26px;     width: 80px; }  @keyframes osahanloading { 0% {     transform: rotate(0deg); } 50% {     background: #85d6de none repeat scroll 0 0;     transform: rotate(180deg); } 100% {     transform: rotate(360deg); } } 

Đây chỉ là bài viết ngắn gọn, mình mong là nó sẽ thực sự hữu ích cho những bạn mới bước đầu làm quen với thiết kế web. Hãy share cho bạn bè để cùng nhau học hỏi nhé.

Nguồn: https://www.thuthuatweb.net/css/loading-icon-cuc-sang-tao-voi-html5-css3.html

The post Loading icon cực sáng tạo với HTML5 & CSS3 appeared first on Tin Công Nghệ – Phim Ảnh.

Bài viết liên quan

  • Weather Widgets : Mẫu dự báo thời tiết đơn giản bằng CSS3

    Weather Widgets : Mẫu dự báo thời tiết đơn giản...

    Khi chúng ta lướt qua những trang dự báo thời tiết trên internet, hẳn là các bạn sẽ bắt gặp những icon cũng...

  • WordPress :Tự động thông báo người dùng khi có bài viết mới

    WordPress :Tự động thông báo người dùng khi có bài...

    Việc tăng lượt truy cập luôn luôn là yếu tố hàng đầu mà chúng ta cần phải thực hiện. Ngoài việc chia sẻ...

  • Ẩn hiện menu với CSS3 và jQuery

    Ẩn hiện menu với CSS3 và jQuery

    Một menu với khả năng linh động sẽ giúp ích rất nhiều cho những trang web không có quá nhiều diện tích trong...

  • Chưa có bình luận nào