来自程序员的圣诞浪漫&纯CSS3打造的圣诞祝福献给前端初学者内附代码以及运行方法

Posted 2022-01-13 zhulin1028

如果你想编一个简单的圣诞树送给你的男/女朋友的话，

这里也许有你要的东西，
对于你也许他很简单，不值一提。

但是对于小白，也许是他入门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">	
bodymargin: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全栈】【爬虫】等等，也有最新考研资料哦
免费获取对应资料。