Làm hiệu ứng mây trôi bằng và bánh xe lăn bằng css html
Hiệu ứng Animation css3 html5
Demo mây trôi background-position
html css 2016
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Demo cloud</title> <style type="text/css"> *{ margin:0; padding:0; } body{ background:#79C5FF; } .cloud { width:100%; height:940px; background: url(http://pngimg.com/upload/cloud_PNG24.png); background-repeat:repeat-x; margin-top:100px; -webkit-animation:test ease 300s; -webkit-animation-iteration-count: infinite; } @-webkit-keyframes test{ 0%{background-position-x:0px;} 50%{background-position-x:5000px;} 100%{background-position-x:0px;} } </style> </head> <body> <div class="cloud"></div> </body> </html>
Demo Bánh xe lăn -webkit-transform
html css 2016
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo cloud</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.cloud {
width:500px;
height:480px;
background: url(http://hoidap.vinhphucnet.vn/qt/hoidap/PublishingImages/115649PMbanhxe.jpg);
-webkit-animation:test ease 500s infinite;
}
@-webkit-keyframes test{
100%{-webkit-transform:rotateY(0deg) rotateZ(51860deg); }
}
</style>
</head>
<body>
<div class="cloud"></div>
</body>
</html>
Nguồn: Tuân Phạm
Các thuộc tính của transform trong css3:
Ví dụ
HTML viết:
<html> <head></head> <body> <p>transform</p> </body> </html>
CSS viết:
p {
background: #cc0000;
height: 50px;
width: 80px;
}
Hiển thị trình duyệt khi chưa có transform:
transform
Thêm thuộc tính transform vào CSS:
p {
background: #cc0000;
height: 50px;
width: 80px;
transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
-webkit-transform: rotate(-15deg);
-o-transform: rotate(-15deg);
}
Hiển thị trình duyệt khi có transform:
transform
0 nhận xét:
Post a Comment