当我在端午节写了一个粽子🫔祝福🥳的小网页发给老师后...

wjl110
1,729 阅读9分钟

我正在参加「初夏创意投稿大赛」详情请看：初夏创意投稿大赛

各位掘友们,🙋大家好呀~

你的谢不肉掘友——😸黑客松又来啦! 今天咱们需要手写一个☝️关于“粽情端午,慕送心意”的前端H5小页面

Now~,这是你们要的最终效果图💁‍♂️(其中包含了拆粽子,动画过渡等场景)

image.png

项目已开源github.com/wjl110/Dragon-wjl110

在线体验网址传送门

不说了➡️开整👨‍🔧

先是去图片素材网,找一些免费使用的,无版权的粽子图标和背景图片🤝

image.png

然后在主文件夹下创建三个二级文件夹,分别为css,img和js,然后将所有的图片文件放置于img文件夹内,并且命名如下👉

image.png

image.png

首先咱们把就是前端的html布局和样式写了🤟,思路是标题,body文本和嵌套div标签样式,定义script样式和img ,如下(命名为index.html)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>端午</title>
	<link rel="stylesheet" href="css/public.css">
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
	<div class="main">
		<div class="zongzi-box" id="zongzi-box">
			<div class="c_zongzi" id="c_zongzi"></div>
			<div class="c_shengzi sz1" id="c_shengzi"></div>

			<div class="c_zongzi_meat" id="c_zongzi_meat"></div>
			<div class="c_left_ye" id="c_left_ye"></div>
			<div class="c_right_ye" id="c_right_ye"></div>
			<div class="c_bottom_ye" id="c_bottom_ye"></div>

			<div class="c_t_1" id="c_t_1"></div>
			<div class="c_t_2" id="c_t_2"></div>
		</div>
		<div class="text" id="text">
			<div class="caption" id="caption"></div>
			<div class="to">地球上的凡人们：</div>
			<div class="msg">在端午节来临之际，黑客松(wjl110)给大家送来心意了，祝大家好运、吉祥、如意、幸福、快快乐乐每一天，黑客松(wjl110)永远和你们相伴</div>
			<div class="from">黑客松(wjl110)</div>
		</div>
	</div>
	<script src="js/script.js"></script>
</body>
</html>

接下来,我们开始写前端的css层叠样式表,如下

首先我的思路💁‍♂️是分为了public.css和style.css,为什么呢,因为public.css为公共css文件规定了其PC和移动端的样式,以及滑动特效样式,其次是style.css规范了他的样式风格,祝福语言,祝福字样,文字和其他的一些属性,so~

public.css如下🤌


@charset "UTF-8";
h1 {font-size: 36px;}
h2 {font-size: 30px;}
h3 {font-size: 24px;}
h4 {font-size: 18px;}
h5 { font-size: 14px;}
h6 { font-size: 12px;}
h1,h2,h3,h4,h5,h6 { font-family: inherit; font-weight: 500;line-height: 1.1;
  color: inherit; margin-bottom: 9px;}
h1 small,h2 small,h3 small,h4 small,h5 small,h6 small { font-size: 80%; font-weight: 400px;
  color: #777777; line-height: 1;}
p {margin: 0 0 9px;}
p small {font-size: 80%; font-weight: 400px; color: #777777;line-height: 1;}
strong {font-weight: 700;}
.text-left { text-align: left;}
.text-center { text-align: center;}
.text-right {text-align: right;}
.text-zh {text-indent: 2em;}
abbr {cursor: help; border-bottom: 1px dotted #777;}
table {border-color: transparent;border-spacing: 0;border-collapse: collapse;}
.table { max-width: 100%; margin-bottom: 16px;}
.table thead tr th {border-bottom: 1px solid #eee;vertical-align: bottom;
  padding: 7px;line-height: 1.428; text-align: left;}
.table tbody tr td {padding: 7px;border-top: 1px solid #eee;
  vertical-align: top;line-height: 1.428; text-align: left;}
.table-odd tbody tr:nth-child(odd) td { background: #f9f9f9;}
input[type="radio"],input[type="checkbox"] {
  margin: 4px 0 0;  line-height: normal;cursor: pointer;}
input[type="radio"]:focus,input[type="checkbox"]:focus {
  outline: thin dotted; outline: 5px auto -webkit-focus-ring-color;outline-offset: -2px;}
img { border: 0; vertical-align: middle;}
.clear{ clear:both;}
body{font-family:  "Helvetica Neue",微软雅黑 , Helvetica, STHeiTi, sans-serif;color: #000000;font-size: 14px;}
body,html,ul,li,dl,dd,ol,p,form,h1,h2,h3,h4,h5,h6,figure{margin: 0px;padding: 0px;}
input,h1,h2,h3,h4,h5,h6,select,button,textarea{font-family: inherit;font-weight: normal;}
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display: block}/*html5*/
address,caption,cite,code,dfn,em,strong,th,var, i,pre{ font-weight: normal; font-style: normal;} 
input,textarea,select{margin:0px;padding:0px;outline:none;border:none; }
a{text-decoration: none;outline: none;color: #6E6E6E;}
a:link{color: #6E6E6E; } 
a:visited { color: #6E6E6E;} 
a:hover { color: #6E6E6E;} 
a:active { color: #6E6E6E; } 
img,fieldset{border:none;}
ul,li{list-style: none;}
table{width: 100%;border-collapse: collapse;border-spacing: 0;}
textarea{resize: none;}
/*清除浮动*/
.clearfix:before, .clearfix:after { content:"";display: table;}
.clearfix:after{clear:both;	overflow: hidden;}
.clearfix{zoom:1;clear:both;}
/*移动端*/
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
html, body {-webkit-user-select: none;   user-select: none;-webkit-user-drag:none;}/* 禁止选中文本（如无文本选中需求，此为必选项） */
body{-webkit-overflow-scrolling: touch;}
*, ::after, ::before{-webkit-tap-highlight-color: rgba(0,0,0,0);}/*click会出现绑定点击区域闪一下*/
input[type="text"],input[type="password"],input[type="button"],input[type="submit"],select{
	-webkit-appearance:none;
}/*去除input默认样式*/
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}/*阻止旋转屏幕时自动调整字体大小*/
a, img {-webkit-touch-callout: none; }/* 禁止长按链接与图片弹出菜单 */
img{max-width:100%;height:auto;vertical-align:middle;}
.flexBox { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;}
.flexChild { display: block; -webkit-box-flex:1; -moz-box-flex:1; -webkit-flex:1; -ms-flex:1; flex:1;}
.fl { float: left;}
.fr { float: right;}
/*选项卡滑动*/

/*注释选项卡滑动特效*/

style.css如下👉

html,
body{
	height: 100%;
}

body{
	min-width: 1200px;
	min-height: 600px;
}

/* 动画定义 */
@-webkit-keyframes rock {
	0%{ transform: rotate(0deg) }
	10%{ transform: rotate(3deg) }
	20%{ transform: rotate(-3deg) }
	30%{ transform: rotate(2deg) }
	40%{ transform: rotate(-2deg) }
	50%{ transform: rotate(1deg) }
	60%{ transform: rotate(-1deg) }
	70%{ transform: rotate(0deg) }
	100%{ transform: rotate(0deg) }
}
@-o-keyframes rock {
	0%{ transform: rotate(0deg) }
	10%{ transform: rotate(3deg) }
	20%{ transform: rotate(-3deg) }
	30%{ transform: rotate(2deg) }
	40%{ transform: rotate(-2deg) }
	50%{ transform: rotate(1deg) }
	60%{ transform: rotate(-1deg) }
	70%{ transform: rotate(0deg) }
	100%{ transform: rotate(0deg) }
}
@-moz-keyframes rock {
	0%{ transform: rotate(0deg) }
	10%{ transform: rotate(3deg) }
	20%{ transform: rotate(-3deg) }
	30%{ transform: rotate(2deg) }
	40%{ transform: rotate(-2deg) }
	50%{ transform: rotate(1deg) }
	60%{ transform: rotate(-1deg) }
	70%{ transform: rotate(0deg) }
	100%{ transform: rotate(0deg) }
}
@keyframes rock {
	0%{ transform: rotate(0deg) }
	10%{ transform: rotate(3deg) }
	20%{ transform: rotate(-3deg) }
	30%{ transform: rotate(2deg) }
	40%{ transform: rotate(-2deg) }
	50%{ transform: rotate(1deg) }
	60%{ transform: rotate(-1deg) }
	70%{ transform: rotate(0deg) }
	100%{ transform: rotate(0deg) }
}


.main{
	width: 1200px;
	height: 600px;
	background: url(../img/bg.jpg) no-repeat center;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -600px;
	margin-top: -300px;
	overflow: hidden;
}

.zongzi-box{
	width: 312px;
	height: 305px;
	position: absolute;
	left: 700px;
	top: 184px;
}

.rock{
	animation: rock 1s infinite;
}

/* 粽子 */
.c_zongzi{
	width: 312px;
	height: 305px;
	background: url(../img/zz.png) no-repeat center;
	transition: all 1s;
}
.c_zongzi.out{
	opacity: 0;
	transform: scale(.5);
}

/* 绳子 */
.c_shengzi{
	position: absolute;
	left: 10px;
}
.sz1{
	background: url(../img/line_1.png) no-repeat center;
	width: 218px;
	height: 180px;
	top: 120px;
	z-index: 999;
	cursor: pointer;
}
.sz2{
	background: url(../img/line_2.png) no-repeat center;
	width: 219px;
	height: 159px;
	top: 158px;
}
.sz3{
	background: url(../img/line_3.png) no-repeat center;
	width: 264px;
	height: 117px;
	top: 220px;
}
.sz4{
	background: url(../img/line_4.png) no-repeat center;
	width: 288px;
	height: 56px;
	top: 290px;
}
.sz0{
	display: none;
}

/* 粽子肉 */
.c_zongzi_meat{
	width: 288px;
	height: 206px;
	background: url(../img/zzr_1.png) no-repeat center;
	background-size: 288px 206px;
	position: absolute;
	left: 32px;
	top: 54px;
	z-index: 10;
	opacity: 0;
	transition: all 1s;
	transform-origin: top center;
	transform: scale(.8);
}
.c_zongzi_meat.in{
	opacity: 1;
	transform: scale(1);
}

/* 左叶 */
.c_left_ye{
	width: 114px;
	height: 266px;
	background: url(../img/leaf_left.png) no-repeat center;
	position: absolute;
	left: 0px;
	top: -30px;
	z-index: 1;
	opacity: 0;
	transform-origin: left bottom;
	transition: all 1s;
}
.c_left_ye.in{
	opacity: 1;
	transform: rotate(-5deg);
}
.c_left_ye.out{
	opacity: 0;
	transform: rotate(-15deg);
}

/* 右叶 */
.c_right_ye{
	width: 318px;
	height: 338px;
	background: url(../img/leaf_right.png) no-repeat center;
	position: absolute;
	left: 80px;
	top: -60px;
	z-index: 11;
	opacity: 0;
	transform-origin: left bottom;
	transition: all 1s;
	transform: scale(.8);
}
.c_right_ye.in{
	opacity: 1;
	transform: rotate(5deg) scale(.8);
}
.c_right_ye.out{
	opacity: 0;
	transform: rotate(15deg) scale(.8);
}

/* 底叶 */
.c_bottom_ye{
	width: 618px;
	height: 468px;
	background: url(../img/leaf_expand.png) no-repeat center;
	position: absolute;
	left: -150px;
	top: -45px;
	z-index: 9;
	opacity: 0;
	transition: all 1s;
}
.c_bottom_ye.in{
	opacity: 1;
}

/* 祝福字 */
.c_t_1{
	width: 180px;
	height: 100px;
	background: url(../img/t_jixiang.png) no-repeat center;
	position: absolute;
	left: 50%;
	margin-left: -70px;
	top: 50%;
	margin-top: -50px;
	z-index: 12;
	transform: scale(.8);
	transform-origin: center center;
	opacity: 0;
	transition: all 1s;
}
.c_t_2{
	width: 180px;
	height: 100px;
	background: url(../img/t_ruyi.png) no-repeat center;
	position: absolute;
	left: 50%;
	margin-left: -70px;
	top: 50%;
	margin-top: -50px;
	z-index: 12;
	transform: scale(.8);
	transform-origin: center center;
	opacity: 0;
	transition: all 1s;
}
.c_t_in{
	opacity: 1;
}

/*祝福语文字*/
.text{
	position: absolute;
	width: 400px;
	height: 370px;
	left: 180px;
	top: 140px;
	font-size: 14px;
	line-height: 20px;
	color: #333;
}

.caption{
	width: 400px;
	height: 240px;
	background: url(../img/caption.png) no-repeat center;
	margin-left: 40px;
	opacity: 0;
	transition: all 1s;
}

.to{
	width: 400px;
	margin-top: 10px;
	margin-left: 40px;
	opacity: 0;
	transition: all 1s .5s;
}
.msg{
	width: 400px;
	margin-top: 10px;
	margin-left: 40px;
	text-indent: 28px;
	opacity: 0;
	transition: all 1s 1s;
}
.from{
	width: 400px;
	margin-top: 10px;
	margin-left: 40px;
	text-align: right;
	opacity: 0;
	transition: all 1s 1.5s;
}

.text.in .caption,
.text.in .to,
.text.in .msg,
.text.in .from{
	opacity: 1;
	margin-left: 0;
}

/* 粽子肉动画 */
.c_zongzi_meat.v1{
	transition: all 0s;
	background-image: url(../img/zzr_1.png);
}
.c_zongzi_meat.v2{
	transition: all 0s;
	background-image: url(../img/zzr_2.png);
}
.c_zongzi_meat.v3{
	transition: all 0s;
	background-image: url(../img/zzr_3.png);
}
.c_zongzi_meat.v4{
	transition: all 0s;
	background-image: url(../img/zzr_4.png);
}
.c_zongzi_meat.v0{
	transition: all 0s;
	background-image: url(../img/zzr_1.png);
	transform: rotateY(180deg);
}

/* 文字动画 */
.c_t_in.v2{
	transition: all 0s;
	transform: scale(.7) rotateY(30deg) translate(-50px, 0) rotate(8deg);
}
.c_t_in.m2{
	transition: all 0s;
	transform: scale(.65) rotateY(70deg) translate(283px, -15px) rotate(-8deg);
}
.c_t_in.v3{
	transition: all 0s;
	transform: scale(.75) rotateY(49deg) translate(-94px, 0) rotate(15deg);
}
.c_t_in.m3{
	transition: all 0s;
	transform: scale(.7) rotateY(47deg) translate(110px, 0) rotate(-15deg);
}
.c_t_in.v4{
	transition: all 0s;
	transform: scale(.58) rotateY(50deg) translate(-196px, 10px) rotate(24deg);
}
.c_t_in.m4{
	transition: all 0s;
	transform: scale(.7) rotateY(30deg) translate(58px, 16px) rotate(-5deg);
}
.c_t_in.v0{
	transition: all 0s;
	transform: scale(.8);
	margin-top: -17px;
}
.c_t_in.m0{
	transition: all 0s;
	display: none;
}

/*叠层样式表*/
/*版本号*/

然后就是写其js文件:(统一名称为style.js)

/* 获取 DOM 元素 */
var g = function(id){
	return document.getElementById(id);
}


/* 时间轴对象构造器 */
var Timeline = function(){
	this.order = []; // 动画序列
	this. add = function(timeout, func, log){
		this.order.push({
			timeout: timeout,
			func: func,
			log: log
		})
	}
	this.start = function(ff){
		for(var s in this.order){
			(function(me){
				var fn = me.func;
				var timeout = me.timeout;
				var log = me.log;
				timeout = Math.max(timeout-(ff||0), 0);

				setTimeout(fn,timeout);
				setTimeout(function(){
					console.log('timeout->',timeout,'log->',log);
				},timeout)
			})(this.order[s])
		}
	}
}

// 初始的场景 
var s1 = new Timeline();

// 粽子展开场景
var s2 = new Timeline();

// 粽子旋转场景
var s3 = new Timeline();

s1.add(1, function(){
	g('zongzi-box').className = 'zongzi-box rock';

	g('c_shengzi').onclick = function(){
		s2.start();
		g('c_shengzi').onclick = function(){}
	}
},'粽子抖动');

s2.add(1, function(){
	g('zongzi-box').className = 'zongzi-box';
	g('text').className = 'text in';
},'粽子停止抖动，左侧文字入场');

// 绳子的解开动画

s2.add(100, function(){
	g('c_shengzi').className = 'c_shengzi sz2';
}, '绳子解开步骤1');
s2.add(500, function(){
	g('c_shengzi').className = 'c_shengzi sz3';
}, '绳子解开步骤2');
s2.add(1000, function(){
	g('c_shengzi').className = 'c_shengzi sz4';
}, '绳子解开步骤3');
s2.add(1500, function(){
	g('c_shengzi').className = 'c_shengzi sz0';
}, '绳子解开步骤4');

// 粽叶动画
s2.add(2000, function(){
	g('c_zongzi').className = 'c_zongzi out';
	g('c_zongzi_meat').className = 'c_zongzi_meat in';
	g('c_left_ye').className = 'c_left_ye in';
	g('c_right_ye').className = 'c_right_ye in';
	g('caption').className = 'caption rock';

}, '粽子隐藏，粽子肉进来，粽叶展开');
s2.add(3000, function(){
	g('c_left_ye').className = 'c_left_ye out';
	g('c_right_ye').className = 'c_right_ye out';
	g('c_bottom_ye').className = 'c_bottom_ye in';
	g('c_t_1').className = 'c_t_1 c_t_in v0';
	g('c_t_2').className = 'c_t_1 c_t_in m0';
	s3.start();
}, '粽叶完全展开，粽子底页进来，文字进来');

// 粽子肉旋转动画

s3.add(1000,function(){
	g('c_zongzi_meat').className = 'c_zongzi_meat in v1';
},'粽子肉旋转');
s3.add(1200,function(){
	g('c_zongzi_meat').className = 'c_zongzi_meat in v2';
	g('c_t_1').className = 'c_t_1 c_t_in v2';
	g('c_t_2').className = 'c_t_2 c_t_in m2';
},'粽子肉旋转');
s3.add(1400,function(){
	g('c_zongzi_meat').className = 'c_zongzi_meat in v3';
	g('c_t_1').className = 'c_t_1 c_t_in v3';
	g('c_t_2').className = 'c_t_2 c_t_in m3';
},'粽子肉旋转');
s3.add(1600,function(){
	g('c_zongzi_meat').className = 'c_zongzi_meat in v4';
	g('c_t_1').className = 'c_t_1 c_t_in v4';
	g('c_t_2').className = 'c_t_2 c_t_in m4';
},'粽子肉旋转');
s3.add(1800,function(){
	g('c_zongzi_meat').className = 'c_zongzi_meat in v0';
	g('c_t_1').className = 'c_t_1 c_t_in m0';
	g('c_t_2').className = 'c_t_2 c_t_in v0';
},'粽子肉旋转');
s3.add(3000,function(){
	g('c_zongzi_meat').className = 'c_zongzi_meat in v4';
	g('c_t_1').className = 'c_t_1 c_t_in v4';
	g('c_t_2').className = 'c_t_2 c_t_in m4';
},'粽子肉旋转');
s3.add(3200,function(){
	g('c_zongzi_meat').className = 'c_zongzi_meat in v3';
	g('c_t_1').className = 'c_t_1 c_t_in v3';
	g('c_t_2').className = 'c_t_2 c_t_in m3';
},'粽子肉旋转');
s3.add(3400,function(){
	g('c_zongzi_meat').className = 'c_zongzi_meat in v2';
	g('c_t_1').className = 'c_t_1 c_t_in v2';
	g('c_t_2').className = 'c_t_2 c_t_in m2';
},'粽子肉旋转');
s3.add(3600,function(){
	g('c_zongzi_meat').className = 'c_zongzi_meat in v1';
	g('c_t_1').className = 'c_t_1 c_t_in v0';
	g('c_t_2').className = 'c_t_2 c_t_in m0';
},'粽子肉旋转');
s3.add(5000,function(){
	s3.start();
},'粽子肉旋转');

// s1.start();

//注释选项
// 图片加载器
var imgs = ['img/zzr_1.png','img/zzr_2.png','img/zzr_3.png','img/zzr_4.png'];

var imgs_onload = function(){
	imgs.pop();
	if(imgs.length == 0){
		s1.start();
	}
}
for(var s in imgs){
	var img = new Image;
	img.onload = imgs_onload;
	img.src = imgs[s]
}

如下

最后,在GitHub 上发布,然后就可以送给你同学,老师,家人和朋友们啦~

image.png

image.png

所以最后

我把我的祝福页面发给了老师👻

老师很开心,

她说:

“小王,鉴于你很有新意,你的毕业设计可以晚点再交"

我:

😻(开心,又有时间在掘金上跟掘友一起掘金了,哈哈哈哈哈😂)

好啦~如果你觉得此文写的还行,欢迎三连👍哈哈,不足之处欢迎大家批评指正~~

avatar
文章
阅读
粉丝