Hiệu ứng trong CSS

Trang trước
Trang sau  

Animation (còn gọi là hiệu ứng) là tiến trình tạo các thay đổi tới hình dáng và tạo các sự chuyển động của các phần tử.

Qui tắc @keyframes trong CSS

Qui tắc @keyframs sẽ điều khiển các bước hiệu ứng trung gian trong CSS3.

Ví dụ của qui tắc @keyframes với Left Animation

@keyframes animation {
   from {background-color: pink;}
   to {background-color: green;}
}
div {
   width: 100px;
   height: 100px;
   background-color: red;
   animation-name: animation;
   animation-duration: 5s;
}

Như trong ví dụ trên, chúng ta đã xác định chiều cao, độ rộng, màu, tên và quãng thời gian của hiệu ứng với cú pháp mẫu của qui tắc @keyframes.

Quảng cáo

Hiệu ứng di chuyển sang trái (Left Animation) trong CSS

<html>
   <head>
   
      <style type="text/css">
         h1 {
            -moz-animation-duration: 3s;
            -webkit-animation-duration: 3s;
            -moz-animation-name: slidein;
            -webkit-animation-name: slidein;
         }
         @-moz-keyframes slidein {
            from {
               margin-left:100%;
               width:300%
            }
            to {
               margin-left:0%;
               width:100%;
            }
         }
         @-webkit-keyframes slidein {
            from {
               margin-left:100%;
               width:300%
            }
            to {
               margin-left:0%;
               width:100%;
            }
         }
      </style>
      
   </head>
   <body>
      <h1>Hoc CSS co ban tai VietJack</h1>
      <p>Vi du hieu ung di chuyen tu trai qua phai.</p>
	  <button onclick="myFunction()">Reload page</button>
      <script>
           function myFunction() {
           location.reload();
           }
      </script>
   </body>
</html>

Kết quả là:−

Quảng cáo

Left Animation sử dụng @keyframes trong CSS

<html>
   <head>
   
      <style type="text/css">
         h1 {
            -moz-animation-duration: 3s;
            -webkit-animation-duration: 3s;
            -moz-animation-name: slidein;
            -webkit-animation-name: slidein;
         }
         @-moz-keyframes slidein {
            from {
               margin-left:100%;
               width:300%
            }
            75% {
               font-size:300%;
               margin-left:25%;
               width:150%;
            }
            to {
               margin-left:0%;
               width:100%;
            }
         }
         @-webkit-keyframes slidein {
            from {
               margin-left:100%;
               width:300%
            }
            75% {
               font-size:300%;
               margin-left:25%;
               width:150%;
            }
            to {
               margin-left:0%;
               width:100%;
            }
         }
      </style>
      
   </head>
   <body>
      <h1>Hoc CSS co ban tai VietJack</h1>
      
      <p>Vi du hieu ung di chuyen tu phai qua trai.</p>
	  <button onclick="myFunction()">Reload page</button>
      <script>
           function myFunction() {
           location.reload();
           }
      </script>
   </body>
</html>

Kết quả là:

Công cụ giáo viên (2048.VN)

Tạo- trộn đề thi miễn phí từ file PDF, Word, Giao bài nhanh chóng, Hoàn toàn Free

Tạo đề, số hóa đề thi từ PDF/Word/Excel Nhập đề nhanh, trích xuất nội dung tự động. Trộn đề thành nhiều mã, Download/In đề thi offline Tạo nhiều mã đề khác nhau, xuất file hoặc in dễ dàng. Quản lý lớp học Theo dõi học sinh, điểm số và kết quả học tập trực quan. Giao bài tập, tổ chức thi kiểm tra trực tuyến Giao bài, chấm điểm và thống kê kết quả ngay trên hệ thống.
Khám phá công cụ
Trang trước
Trang sau  
Bài viết liên quan