HTML5和css3 實現雪花飄動和translate的練習
阿新 • • 發佈：2018-03-12
utf-8 紛飛 下拉 light mar true posit fall back
看了看HTML5和css3 練習他的動畫和位移 記錄一下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>h5+css3實現雪花紛飛 以及 動畫下拉</title>
</head>
<style>
*{
padding: 0;
margin: 0;
}
/*?*/
header{
width: 100%;
height:315px;
background: url(images/header-bg.png) 0 0;
}
section{
position: relative;
width:85%;
height:100%;
margin: 0 auto;
background:url(images/con-bg.png) repeat-x 0px 204px,url(images/snow-bg.png) 0px 0px;
animation: snowFall 15s linear infinite;
}
.tree{
position: absolute;
top:170px;
left:141px;
width: 112px;
height:137px;
background: url("images/tree.png");
animation: showFall 2s linear;
}
.tree:nth-child(2){
top: 139px;
left: 276px;
animation: showFall 1.8s linear;
}
.tree:nth-child(3){
top: 164px;
left: 395px;
animation: showFall 1.7s linear;
}
.tree:nth-child(4){
top: 180px;
left: 882px;
animation: showFall 1s linear;
}
.tree:nth-child(5){
top: 147px;
left: 707px;
animation: showFall 1.5s linear;
}
.tree:nth-child(6){
top: 147px;
left: 549px;
animation: showFall 1.2s linear;
}
.ice{
position: absolute;
top: 212px;
left: 475px;
width:115px;
height:103px;
background: url("images/ice.png");
animation: showFall 1s linear;
}
@keyframes snowFall {
from{
background-position-y: 204px,0px;}
to{
background-position-y: 204px,880px;
}
}
@keyframes showFall {
from{
transform:translate(0,-300px);}
to{
transform:translate(0,0px);
}
}
</style>
<body>
<header>
<section>
<div class="tree"></div>
<div class="tree"></div>
<div class="tree"></div>
<div class="tree"></div>
<div class="tree"></div>
<div class="tree"></div>
<div class="ice"></div>
</section>
</header>
</body>
</html>
連接路徑 https://zhouxiao632292.github.io/snowFall/
HTML5和css3 實現雪花飄動和translate的練習