春节移动端贺卡

Goodwin
658 阅读4分钟

PK创意闹新春，我正在参加「春节创意投稿大赛」，详情请看：春节创意投稿大赛”

前言

移动端网页非常方便传播分享，很多企业或组织都会制作移动端的宣传网页，下面分享一个之前在慕课网学习移动端Web开发时候的一个移动端新春贺卡。

效果

还是先来看看实现效果吧。

222.gif

思路

主要思路是：

  • 使用audio标签实现背景音乐播放；
  • 使用vw和vh适配移动设备宽高；
  • 使用绝对定位完成页面布局；
  • 使用animation实现各页面动效，和多页面滚动切换；这里需要注意页面动效和页面切换的时机；

知识点

主要涉及前端知识点如下：

  • audio 用于在文档中嵌入音频内容。

使用autoplay自动播放，使用loop实现无限循环播放。

  • vw&vh vw&vh是 length 的单位，视口单位。

vw：相对于视口的宽度， 视口被均分为 100 单位的vw，1vw等于视口宽度的1%。

vh：相对于视口的宽度， 视口被均分为 100 单位的vh，1vh等于视口高度的1%。

  • transform 允许旋转，缩放，倾斜或平移给定元素。

注意只能转换由盒模型定位的元素。

用来指定一组或多组动画，每组之间用逗号相隔。

每组动画规定的属性如下：

以下属性出现0次或1次：

<single-transition-timing-function>

<single-animation-iteration-count>

<single-animation-direction>

<single-animation-fill-mode>

<single-animation-play-state>

animation 的 name 值可能是：none，<custom-ident>， <string>

<time> 可能会出现0、1 或 2 次

每个动画定义中的属性值的顺序很重要：可以被解析为 <time> 的第一个值被分配给animation-duration， 第二个分配给 animation-delay。

每个动画定义中的值的顺序，对于区分 animation-name 值与其他关键字也很重要。解析时，对于除 animation-name 之外的有效的关键字，必须被前面的简写中没有找到值的属性所接受。

此外，在序列化时，animation-name 与以及其他属性值做区分等情况下，必须输出其他属性的默认值。

代码

html部分

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
	<title>新年贺春</title>
	<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
	<div class="wrap">
		<div class="music">
			<div class="music-wrap">
				<img class="music-pointer" src="imgs/music_pointer.png">
				<img class="music-disc" src="imgs/music_disc.png">
				<audio src="Sleep Away.mp3" autoplay="autoplay" loop="loop">您的浏览器不支持audio标签</audio>
			</div>
		</div>
		<div class="main-wrap">
			<div class="page1">
				<div class="page1-main">
					<div class="text">
						<p>点击屏幕</p>
						<p>开启好运2022</p>
					</div>
					<div class="lantern-wrap">
						<span class="lantern"></span>
					</div>
				</div>
				<img class="p1-imooc" src="imgs/p1_imooc.png">
				<p>2022年新年特献</p>
			</div>
			<div class="main-wrap-2">
				<div class="page2">
					<span class="p2-year">2022</span>
					<img class="p2-circle-inner" src="imgs/p2_circle_inner.png">
					<img class="p2-circle-middle" src="imgs/p2_circle_middle.png">
					<img class="p2-circle-outer" src="imgs/p2_circle_outer.png">
				</div>
				<div class="page3">
					<img class="p3-logo" src="imgs/p3_logo.png">
					<br>
					<img class="p3-title" src="imgs/p3_title.png">
					<img class="p3-couplet-first" src="imgs/p3_couplet_first.png">
					<img class="p3-couplet-second" src="imgs/p3_couplet_second.png">
					<br>
					<img class="p3-blessing" src="imgs/p3_blessing.png">
				</div>
			</div>
		</div>
	</div>
	
</body>
</html>

css部分

* {
	margin: 0;
	padding: 0;
}
.wrap {
	width: 100vw;
	height: 100vh;
	position: relative;
	overflow: hidden;
}
/*音乐*/
.music {
	position: absolute;
	top: 15px;
	right: 15px;
	z-index: 99;
}
.music-wrap {
	position: relative;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 5px solid #ef1639;
	background-color: #fff;
	padding: 5px;
}
.music-disc {
	position: absolute;
	z-index: 100;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	animation: rotate 5s infinite linear;
}
@keyframes rotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}
.music-pointer {
	position: absolute;
	z-index: 101;
	width: 15px;
	right: 0;
	top: 10px;
}
/*三页内容容器*/
.main-wrap {
	width: 100vw;
	height: 300vh;
	margin: 0 auto;
	box-sizing: border-box;
	position: absolute;
	top: 0;
	left: 0;
	animation: rollA ease 3s 3s;
	animation-fill-mode: forwards;
}
@keyframes rollA {
	0% {
		top: 0;
	}
	100% {
		top: -100vh;
	}
}
/*后两页内容容器*/
.main-wrap-2 {
	width: 100vw;
	height: 200vh;
	margin: 0 auto;
	box-sizing: border-box;
	position: absolute;
	top: 100vh;
	left: 0;
	animation: rollB ease 3s 11s;
	animation-fill-mode: forwards;
}
@keyframes rollB {
	0% {
		top: 100vh;
	}
	100% {
		top: 0vh;
	}
}
/*第一页*/
.page1 {
	background: url(imgs/p1_bg.jpg) no-repeat;
	text-align: center;
	width: 100vw;
	height: 100vh;
}
.page1-main {
	width: 25vh;
	height: 68vh;
	margin: 0 auto;
	position: relative;
	background: url(imgs/p1_lantern.png) no-repeat;
	background-size: 100%;
	padding-top: 19.5vh;
	box-sizing: border-box;
}
.page1-main .text {
	width: 25vh;
	height: 25vh;
	border-radius: 50%;
	color: #fff;
	padding-top: 6vh;
	box-sizing: border-box;
	position: absolute;
	z-index: 98;
}
.page1 .text p {
	font-weight: bold;
	font-size: 6vw;
}
.page1-main .lantern-wrap {
	width: 30vh;
	height: 30vh;
	border-radius: 50%;
	line-height: 30vh;
	text-align: center;
	position: absolute;
	z-index: 97;
	top: 16.5vh;
	left: -4vw;
}
.page1-main .lantern {
	display: inline-block;
	vertical-align: middle;
	width: 20vh;
	height: 20vh;
	border-radius: 50%;
	background-color: rgb(223,11,59);
	animation: tiaodong 0.5s infinite alternate;
}
/*第一页类心脏跳动动画*/
@keyframes tiaodong {
	from {
		box-shadow: 0px 0px 4vw 4vw #d60b3b;
	}
	to {
		box-shadow: 0px 0px 8vw 8vw #d60b3b;
	}
}
.page1 .p1-imooc {
	margin-top: 8vh;
	width: 15vh;
}
.page1 p {
	font-family: Arial;
	font-size: 12px;
	margin: -1vh auto 4vh; 
}
/*第二页*/
.page2 {
	background: url(imgs/p2_bg.jpg) no-repeat;
	text-align: center;
	width: 100vw;
	height: 100vh;
	position: relative;
}
.page2 .p2-year {
	width: 30vw;
	position: absolute;
	top: 48vh;
	left: 35vw;
	font-family: Arial, Lucida Grande, Tahoma, sans-serif;
	font-size: 3.2rem;
	color: #dc8f03;
	font-weight: bold;
	line-height: 85px;
	text-align: center;
}
.page2 .p2-circle-inner {
	width: 40vw;
	position: absolute;
	top: 42vh;
	left: 30vw;
	animation: rotateA 1s 6s infinite alternate;
}
/*逆时针旋转动画*/
@keyframes rotateA {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(-360deg);
	}
}
.page2 .p2-circle-middle {
	width: 55vw;
	position: absolute;
	top: 38vh;
	left: 23vw;
	animation: rotateB 1s 7s infinite alternate;
}
/*顺时针旋转动画*/
@keyframes rotateB {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}
.page2 .p2-circle-outer {
	width: 70vw;
	position: absolute;
	top: 34vh;
	left: 16vw;
	animation: rotateA 1s 8s infinite alternate;
}
/*第三页*/
.page3 {
	background: url(imgs/p3_bg.jpg) no-repeat;
	text-align: center;
	width: 100vw;
	height: 100vh;
	position: relative;
}
.p3-logo {
	width: 35vw;
	margin: 8vh auto 6vh;
}
.p3-title {
	width: 47vw;
}
.p3-couplet-first {
	position: absolute;
	right: 4vw;
	top: 27vh;
	width: 25vw;
	height: 36vh;
}
.p3-couplet-second {
	position: absolute;
	left: 4vw;
	top: 27vh;
	width: 25vw;
	height: 36vh;
}
.p3-blessing {
	width: 33vw;
	margin-top: 3vh;
	animation: rotateB 2s 14s infinite linear;
}
avatar
文章
阅读
粉丝