07/05/2018, 15:12
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 ...
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 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à:−
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 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à:
Loạt bài hướng dẫn Học CSS cơ bản và nâng cao của chúng tôi dựa trên nguồn tài liệu của: và
Follow fanpage của team hoặc facebook cá nhân Nguyễn Thanh Tuyền để 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 vietjack.com:
