Thiết kế web - animation CSS3
Bài thiết kế web trước mình đã giới thiệu cách sử dụng thuộc tính animal trong CSS3. Và sau đây, mình xin hướng cách sử dụng thêm thuộc tính kết hợp giữa thuộc tính transform và thuộc tính animal mà ta đang đề cặp đến.
Demo
<!DOCTYPE html>
<html>
<head>
<style>
div#ketqua
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;transform: rotate(30deg);}
20% {background:yellow; left:50px; top:0px;transform: rotate(60deg);}
40% {background:blue; left:100px; top:0px;transform: rotate(90deg);}
60% {background:green; left:150px; top:0px;transform: rotate(120deg);}
80% {background:red; left:200px; top:0px;transform: rotate(150deg);}
100% {background:red; left:0px; top:0px;transform: rotate(0deg);}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div></div>
</body>
</html>
kết quả:<html>
<head>
<style>
div#ketqua
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;transform: rotate(30deg);}
20% {background:yellow; left:50px; top:0px;transform: rotate(60deg);}
40% {background:blue; left:100px; top:0px;transform: rotate(90deg);}
60% {background:green; left:150px; top:0px;transform: rotate(120deg);}
80% {background:red; left:200px; top:0px;transform: rotate(150deg);}
100% {background:red; left:0px; top:0px;transform: rotate(0deg);}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div></div>
</body>
</html>
Chúc các bạn thành công!
Liên hệ chúng tôi: thiet ke web, thiết kế web
Không có nhận xét nào:
Đăng nhận xét