脚本宝典收集整理的这篇文章主要介绍了来自程序员的圣诞浪漫&纯CSS3打造的圣诞祝福【献给前端初学者】内附代码以及运行方法,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
如果你想编一个简单的圣诞树送给你的男/女朋友的话,
这里也许有你要的东西, 对于你也许他很简单,不值一提。
但是对于小白,也许是他入门HTML、css3的极佳小项目
代码运行方式:代码运行很简单,解压缩文件夹,即可获得如下文件,只需要双击index.html即可运行。源代码的话可以用编辑器打开index.html即可查看或者修改。
代码我已分享,获取方式如下(文章底部有福利):
获取方式一:csdn下载
获取方式二:关注公众号:zhulin1028。回复:【css动画】即可免费获取。
上动图:
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全栈】【爬虫】等等,也有最新考研资料哦
免费获取对应资料。
以上是脚本宝典为你收集整理的来自程序员的圣诞浪漫&纯CSS3打造的圣诞祝福【献给前端初学者】内附代码以及运行方法全部内容,希望文章能够帮你解决来自程序员的圣诞浪漫&纯CSS3打造的圣诞祝福【献给前端初学者】内附代码以及运行方法所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。