Monday, October 10, 2016
Là m hiệu ứng mây trôi và bánh xe lăn bằng css3 html các thuá»™c tÃnh của transform css3
Là m hiệu ứng mây trôi và bánh xe lăn bằng css3 html các thuá»™c tÃnh của transform css3
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
Available link for download
