14/08/2018, 12:32
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:
