Hiệu ứng trong CSS

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 (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 {
   awidth: 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.

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%;
               awidth:300%
            }
            to {
               margin-left:0%;
               awidth:100%;
            }
         }
         @-webkit-keyframes slidein {
            from {
               margin-left:100%;
               awidth:300%
            }
            to {
               margin-left:0%;
               awidth:100%;
            }
         }
      </style>
      
   </head>
   <body>
      <h1>Hoc CSS co ban tai code24h</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à:−

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%;
               awidth:300%
            }
            75% {
               font-size:300%;
               margin-left:25%;
               awidth:150%;
            }
            to {
               margin-left:0%;
               awidth:100%;
            }
         }
         @-webkit-keyframes slidein {
            from {
               margin-left:100%;
               awidth:300%
            }
            75% {
               font-size:300%;
               margin-left:25%;
               awidth:150%;
            }
            to {
               margin-left:0%;
               awidth:100%;
            }
         }
      </style>
      
   </head>
   <body>
      <h1>Hoc CSS co ban tai code24h</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à:

Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.

Bài học CSS phổ biến khác tại code24h.com:

Bài liên quan

Tạo hiệu ứng bóng đổ, button box-shadow trong CSS

Chào các bạn, thông thường để làm bóng đổ trên WEB người ta thường sử dụng hình ảnh, tuy nhiên với cách này thì làm cho trang web load chậm hơn, phải bỏ công thiết kế. Các bạn có thể sử dụng CSS để tạo bóng đổ cho khung, button một cách đơn giản hơn với box-shadow trong CSS . Thuộc tính ...

Bùi Văn Nam viết 2 tuần trước

Hiệu ứng dropdown trong CSS

Hiệu ứng dropdown cơ bản Để tạo một hộp xổ xuống (dropdown box) khi người dùng trỏ chuột vào phần tử, bạn có thể tham khảo mã CSS dưới đây: <style> .dropdown { position: relative; display: inline-block; } .dropdown-content { display: ...

Trần Trung Dũng viết 14:42 ngày 07/09/2018

Hiệu ứng trong jQuery

jQuery cung cấp một giao diện đơn giản để thực hiện các loại hiệu ứng tuyệt vời đa dạng. Các phương thức jQuery cho phép chúng ta áp dụng nhanh chóng các hiệu ứng phổ biến với cấu hình tối thiểu. Chương này sẽ bàn luận tất cả phương thức jQuery quan trọng để tạo các Visual Effect. Hiển ...

Tạ Quốc Bảo viết 14:00 ngày 14/08/2018

Hiệu ứng trong CSS

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 ...

Tạ Quốc Bảo viết 12:32 ngày 14/08/2018

Hiệu ứng Hình ảnh trong CSS

Hình ảnh đóng vai trò quan trọng trong bất kỳ Webpage nào. Hiện này, khó có thể tìm thấy một Webpage hiện đại nào mà không có hình ảnh. Tuy nhiên, không phải cứ thêm quá nhiều hình ảnh (trừ các Webpage cho thời trang hay mẫu quần áo) là tốt. Việc trang trí hình ảnh đẹp và hợp lý sẽ làm trang ...

Trịnh Tiến Mạnh viết 12:09 ngày 14/08/2018
0