HTML部分: <div class="header"> <div class="wrapper"> <div class="christmas-tree tree1"></div> <div class="christmas-tree tree2"></div> <div class="christmas-tree tree3"></div> <div class="snowman"></div> <div class="christmas-tree tree4"></div> <div class="christmas-tree tree5"></div> <div class="christmas-tree tree6"></div> </div> </div> CSS3部分 <style type="text/css"> body{margin:0;padding:0;list-style-type:none;} .header{ margin: 0 0 30px; background: url(css/img/header-bg.png); background: url(css/img/snow-bg.png) repeat-y center, url(css/img/header-bg.png); -webkit-animation: animate-snow 9s linear infinite; -moz-animation: animate-snow 9s linear infinite; -ms-animation: animate-snow 9s linear infinite; animation: animate-snow 9s linear infinite; } .zhulin{ margin: 0 0 30px; background: url(css/img/zhulin1028.png) no-repeat; width:100%; height:300px; } @-webkit-keyframes animate-snow { 0% { background-position: center 0, 0 0;} 100% { background-position: center 885px, 0 0;} } @-moz-keyframes animate-snow { 0% { background-position: center 0, 0 0;} 100% { background-position: center 885px, 0 0;} } @-ms-keyframes animate-snow { 0% { background-position: center 0, 0 0;} 100% { background-position: center 885px, 0 0;} } @keyframes animate-snow { 0% { background-position: center 0, 0 0;} 100% { background-position: center 885px, 0 0;} } .wrapper{ width: 960px; height: 315px; margin: auto; overflow: hidden; position: relative; background-image: url(css/img/wrapper-bg.png); background-repeat: no-repeat; background-position: bottom; } @-moz-keyframes animate-drop { 0% {opacity:0;-moz-transform: translate(0, -315px);} 100% {opacity:1;-moz-transform: translate(0, 0);} } @-webkit-keyframes animate-drop { 0% {opacity:0;-webkit-transform: translate(0, -315px);} 100% {opacity:1;-webkit-transform: translate(0, 0);} } @-ms-keyframes animate-drop { 0% {opacity:0;-ms-transform: translate(0, -315px);} 100% {opacity:1;-ms-transform: translate(0, 0);} } @keyframes animate-drop { 0% {opacity:0;transform: translate(0, -315px);} 100% {opacity:1;transform: translate(0, 0);} } .christmas-tree, .snowman { position: absolute; -moz-animation: animate-drop 1s linear; -webkit-animation: animate-drop 1s linear; -ms-animation: animate-drop 1s linear; animation: animate-drop 1s linear; } .christmas-tree { width: 112px; height: 137px; background: url(css/img/christmas-tree.png); } .snowman { width: 115px; height: 103px; top: 195px; left: 415px; background: url(css/img/snowman.png); -moz-animation-duration: .6s; -webkit-animation-duration: .6s; -ms-animation-duration: .6s; animation-duration: .6s; } .tree1 { top: 165px; left: 35px; -moz-animation-duration: .6s; -webkit-animation-duration: .6s; -ms-animation-duration: .6s; animation-duration: .6s; } .tree2 { left: 185px; top: 175px; -moz-animation-duration: .9s; -webkit-animation-duration: .9s; -ms-animation-duration: .9s; animation-duration: .9s; } .tree3 { left: 340px; top: 125px; -moz-animation-duration: .7s; -webkit-animation-duration: .7s; -ms-animation-duration: .7s; animation-duration: .7s; } .tree4 { left: 555px; top: 155px; -moz-animation-duration: .8s; -webkit-animation-duration: .8s; -ms-animation-duration: .8s; animation-duration: .8s; } .tree5 { left: 710px; top: 170px; -moz-animation-duration: .7s; -webkit-animation-duration: .7s; -ms-animation-duration: .7s; animation-duration: .7s; } .tree6 { left: 855px; top: 125px; -moz-animation-duration: .6s; -webkit-animation-duration: .6s; -ms-animation-duration: .6s; animation-duration: .6s; } </style> v搜索公众号:zhulin1028。后台回复: 【java经典源码】【java手册】【java全栈】【java全栈】【快速开发框架】 【springboot点餐】【P8】【软件资料】【Python1】【Python2】【Python3】 【Python全栈】【爬虫】等等,也有最新考研资料哦 免费获取对应资料。 |
|
来自: zhulin1028 > 《待分类》