Zepto实战练习(1)_静态页面搭建及css动画完成

最新推荐文章于 2021-03-23 08:04:47 发布

玳宸

最新推荐文章于 2021-03-23 08:04:47 发布

阅读量203

点赞数

分类专栏：项目练习

本文链接：https://blog.csdn.net/zeroheitao/article/details/110955383

版权

项目练习专栏收录该内容

16 篇文章 3 订阅

订阅专栏

Zepto实战练习

最终成品展示

在这里插入图片描述
html：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>zepto实战</title>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<link rel="stylesheet" type="text/css" href="css/animation.css"/>
	</head>
	<body>
		<div id="container">
			<div class="page page-1-1  page-current">
					<img class="img_1 pt-page-moveFromTop" src="img/cover.png" alt="" />
					<img class="img_2 pt-page-moveFromLeft" src="img/wording_cover.png" alt="" />
					<img class="img_3 common_img pt-page-moveIconUp" src="img/icon_up.png" alt="" />
			</div>
			<div class="page page-2-1 hide">
						<img class="img_1 hide pt-page-moveFromBottom" src="img/wording.png" />
						<img class="img_2 hide pt-page-moveCircle" src="img/circle.png" />
						<img class="img_3 hide pt-page-moveFromLeft" src="img/people.png" />
						<img class="img_4 hide pt-page-scaleUp" src="img/dot1.png" />
						<img class="img_5 hide pt-page-scaleUp" src="img/check_develop.png" />
						<img class="img_6 hide common_img pt-page-moveIconUp" src="img/icon_up.png" />
						<img class="img_7 hide pt-page-scaleUp" src="img/floating_develop.png" />
			</div>
			<div class="page page-2-2 hide">
					<img class="img_1 hide pt-page-flipInLeft" src="img/introduction.png" />
					<img class="img_2 hide pt-page-flipInLeft" src="img/btn_develop.png" />
					<img class="img_3 hide pt-page-flipInLeft" src="img/dot2.png" />
					<img class="img_6 hide common_img pt-page-moveIconUp" src="img/icon_up.png" />
			</div>
			
			
			<div class="page page-3-1 hide">
					<img class="img_1 hide pt-page-moveFromBottom" src="img/wording_design.png" />
					<img class="img_2 hide pt-page-moveCircle" src="img/circle-design.png" />
					<img class="img_3 pt-page-moveFromBottom hide" src="img/people_design.png" />
					<img class="img_4 hide pt-page-scaleUp" src="img/dot1.png" />
					<img class="img_5 hide pt-page-scaleUp" src="img/check_design.png" />
					<img class="img_6 hide common_img pt-page-moveIconUp" src="img/icon_up.png" />
					<img class="img_7 hide pt-page-scaleUp" src="img/floating_design.png" />
			</div>
			<div class="page page-3-2 hide">
					<img class="img_1 hide pt-page-flipInLeft" src="img/introduction_design.png" />
					<img class="img_2 hide pt-page-flipInLeft" src="img/btn_design.png" />
					<img class="img_3 hide pt-page-flipInLeft" src="img/dot2.png" />
					<img class="img_6 hide common_img pt-page-moveIconUp" src="img/icon_up.png" />
			</div>
			
			<div class="page page-4-1 hide">
					<img class="img_1 hide pt-page-moveFromBottom" src="img/wording_production.png" />
					<img class="img_2 hide pt-page-moveCircle" src="img/circle-production.png" />
					<img class="img_3 pt-page-moveFromRight hide" src="img/people_production.png" />
					<img class="img_4 hide pt-page-scaleUp" src="img/dot1.png" />
					<img class="img_5 hide pt-page-scaleUp" src="img/check_production.png" />
					<img class="img_6 hide common_img pt-page-moveIconUp" src="img/icon_up.png" />
					<img class="img_7 hide pt-page-scaleUp" src="img/floating_production.png" />
					<img class="img_8 hide pt-page-scaleUp" src="img/pic_shadow_production.png" />
			</div>
			
			<div class="page page-4-2 hide">
					<img class="img_1 hide pt-page-flipInLeft" src="img/introduction_production.png" />
					<img class="img_2 hide pt-page-flipInLeft" src="img/btn_production.png" />
					<img class="img_3 hide pt-page-flipInLeft" src="img/dot2.png" />
					<img class="img_6 hide common_img pt-page-moveIconUp" src="img/icon_up.png" />
			</div>
			<div class="page page-5-1 hide">
					<img class="img_1 hide pt-page-rotateCubeBottomIn" src="img/pic_back.png" />
					<img class="img_2 hide pt-page-rotateCubeTopIn" src="img/btn_join.png" />
			</div>
		</div>
		<script src="js/zepto.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/touch.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>

animation.css

/*定义四个方向的动画*/

.pt-page-moveToLeft {
	-webkit-animation: moveToLeft .6s ease both;
	animation: moveToLeft .6s ease both;
}

.pt-page-moveFromLeft {
	-webkit-animation: moveFromLeft .6s ease both;
	animation: moveFromLeft .6s ease both;
}

.pt-page-moveToRight {
	-webkit-animation: moveToRight .6s ease both;
	animation: moveToRight .6s ease both;
}

.pt-page-moveFromRight {
	-webkit-animation: moveFromRight .6s ease both;
	animation: moveFromRight .6s ease both;
}

.pt-page-moveToTop {
	-webkit-animation: moveToTop .6s ease both;
	animation: moveToTop .6s ease both;
}

.pt-page-moveFromTop {
	-webkit-animation: moveFromTop .6s ease both;
	animation: moveFromTop .6s ease both;
}

.pt-page-moveToBottom {
	-webkit-animation: moveToBottom .6s ease both;
	animation: moveToBottom .6s ease both;
}

.pt-page-moveFromBottom {
	-webkit-animation: moveFromBottom .6s ease both;
	animation: moveFromBottom .6s ease both;
}
/*定义四个方向动画的实现过程*/


@-webkit-keyframes moveToLeft {
	from { }
	to { -webkit-transform: translateX(-100%); }
}
@keyframes moveToLeft {
	from {}
	to { -webkit-transform: translateX(-100%); transform: translateX(-100%); }
}

@-webkit-keyframes moveFromLeft {
	from { -webkit-transform: translateX(-100%); }
}
@keyframes moveFromLeft {
	from { -webkit-transform: translateX(-100%); transform: translateX(-100%); }
}

@-webkit-keyframes moveToRight { 
	from { }
	to { -webkit-transform: translateX(100%); }
}
@keyframes moveToRight { 
	from { }
	to { -webkit-transform: translateX(100%); transform: translateX(100%); }
}

@-webkit-keyframes moveFromRight {
	from { -webkit-transform: translateX(100%); }
}
@keyframes moveFromRight {
	from { -webkit-transform: translateX(100%); transform: translateX(100%); }
}

@-webkit-keyframes moveToTop {
	from { }
	to { -webkit-transform: translateY(-100%); }
}
@keyframes moveToTop {
	from { }
	to { -webkit-transform: translateY(-100%); transform: translateY(-100%); }
}

@-webkit-keyframes moveFromTop {
	from { -webkit-transform: translateY(-100%); }
}
@keyframes moveFromTop {
	from { -webkit-transform: translateY(-100%); transform: translateY(-100%); }
}

@-webkit-keyframes moveToBottom {
	from { }
	to { -webkit-transform: translateY(100%); }
}
@keyframes moveToBottom {
	from { }
	to { -webkit-transform: translateY(100%); transform: translateY(100%); }
}

@-webkit-keyframes moveFromBottom {
	from { -webkit-transform: translateY(100%); }
}
@keyframes moveFromBottom {
	from { -webkit-transform: translateY(100%); transform: translateY(100%); }
}



/*iconUp*/
.pt-page-moveIconUp {
	animation: moveIconUp ease 1.5s both infinite;
}


@keyframes moveIconUp {
	0% { -webkit-transform: translateY(100%); transform: translateY(100%); opacity:0;}
	50% { -webkit-transform: translateY(0%); transform: translateY(0%); opacity:1;}
	100% { -webkit-transform: translateY(-100%); transform: translateY(-100%); opacity:0;}
}

/*moveCircle*/
.pt-page-moveCircle{
	animation: moveCircle 1.2s ease-in-out;
}

@-webkit-keyframes moveCircle{
	0%{transform: translateY(-80%);opacity: 0.1;}
	5%{transform: translateY(-80%);opacity: 0.3;}
	35%{transform: translateY(10%);opacity: 0.8;}
	60%{transform: translateY(-30%);opacity: 0.8;}
	65%{transform: translateY(-20%);opacity: 0.8;}
	100%{transform: translateY(0%);opacity: 1;}
}
/*scaleUp*/
.pt-page-scaleUp{
	animation:scaleUp 0.6s ease;
}

@-webkit-keyframes scaleUp{
	from{transform: scale(0.4);}
	to{}
}
/*flipInLeft*/
.pt-page-flipInLeft{
	transform-origin: 50% 50%;
	animation: flipInLeft .5s both ease-out;
}
@-webkit-keyframes flipInLeft{
	from { -webkit-transform:rotateY(-90deg); opacity: 0.2; }
}


/*定义page-5-1*/
.pt-page-rotateCubeBottomIn{
	animation:rotateCubeBottomIn .6s ease-in both ;
	transform-origin: 50% 100%;
}

@keyframes rotateCubeBottomIn {
	0%{transform: translateY(-100%) rotateX(90deg);opacity: 0.3}
	50%{animation-timing-function: ease-out; transform: translateY(-50%) translateZ(-200px) rotateX(45deg);}
}

.pt-page-rotateCubeTopIn{
	animation: rotateCubeTopIn 0.6s ease both;
	transform-origin: 100% 50%;
}

@keyframes rotateCubeTopIn {
	0%{translateY(100%) rotateX(-90deg);opacity: 0.3}
	50%{animation-timing-function: ease-out;transform:translateY(50%) translateZ(-200px) rotateX(-45deg) ;}
}

index.css

body{
	width: 100%;
  height:100%;
}

*{
    touch-action: none;
}

#container{
	width:100%;
	height: 100%;
	position: absolute;
}


/*定义每个div的宽高及定位！！不能使用relative因为父元素高度没有办法被脱离文档流的子元素撑开*/
.page{
	width: 100%;
	height: 100%;
	position: absolute;
}

.hide{
	display: none;
}

.page-current{
	z-index: 2;
}


.common_img{
	height: auto;
	width: 25px;
	position: absolute;
	top: 92%;
	left: 50%;
	margin-left:-12px;
}

.page-1-1{background: #083846;}
.page-2-1{background: #9261BF;}
.page-2-2{background: #9261BF;}
.page-3-1{background: #F3533C;}
.page-3-2{ background-color:#F3533C;}
.page-4-1{ background-color:#FFBF50;}
.page-4-2{ background-color:#FFBF50;}
.page-5-1{ background-color:#083846;}

.page-1-1 .img_1{
	height: auto;
	width: 248px;
	position: absolute;
	top: 1%;
	left: 50%;
	margin-left: -124px;
}

.page-1-1 .img_2{
	height: auto;
	width: 185px;
	position: absolute;
	top:62%;
	left: 50%;
	margin-left: -92px;
}


.page-2-1 .img_1{
	height: auto;
	width: 158px;
	position: absolute;
	top: 2%;
	left: 50%;
	margin-left:-79px ;
	z-index:2;
}

.page-2-1 .img_2{
	height: auto;
	width: 240px;
	position: absolute;
	top: 28%;
	left: 50%;
	margin-left:-120px ;
}

.page-2-1 .img_3{
	height: auto;
	width: 241px;
	position: absolute;
	top: 36%;
	left: 50%;
	margin-left:-120px ;
}

.page-2-1 .img_4{
	height: auto;
	width: 20px;
	position: absolute;
	top: 87%;
	left: 50%;
	margin-left:-10px ;
}

.page-2-1 .img_5{
	height: auto;
	width: 142px;
	position: absolute;
	top: 82%;
	left: 50%;
	margin-left:-71px ;
}

.page-2-1 .img_7{
	height: auto;
	width: 248px;
	position: absolute;
	top: 8%;
	left: 50%;
	margin-left:-124px ;
}


.page-2-2 .img_1 {
	height:auto;
	width:293px;
	position:absolute;
	left:50%;
	top:5%;
	margin-left:-146px;
}
.page-2-2 .img_2 {
	height:auto;
	width:260px;
	position:absolute;
	left:50%;
	top:75%;
	margin-left:-130px;
}
.page-2-2 .img_3 {
	height:auto;
	width:20px;
	position:absolute;
	left:50%;
	top:87%;
	margin-left:-10px;
}
.page-2-2 .img_6 {
	height:auto;
	width:25px;
	position:absolute;
	left:50%;
	top:92%;
	margin-left:-12px;
}

.page-3-1 .img_1 {
	height:auto;width:166px;
	position:absolute;
	left:50%;
	top:2%;
	margin-left:-86px;
	z-index:2;
}
.page-3-1 .img_2 {
	height:auto;width:250px;
	position:absolute;
	left:50%;
	top:30%;
	margin-left:-125px;
}
.page-3-1 .img_3 {
	height:auto;width:172px;
	position:absolute;
	left:50%;
	top:28%;
	margin-left:-55px;
}
.page-3-1 .img_4 {
	height:auto;width:20px;
	position:absolute;
	left:50%;
	top:87%;
	margin-left:-10px;
}
.page-3-1 .img_5 {
	height:auto;width:142px;
	position:absolute;
	left:50%;
	top:82%;
	margin-left:-71px;
}
.page-3-1 .img_6 {
	height:auto;width:25px;
	position:absolute;
	left:50%;
	top:92%;
	margin-left:-12px;
}
.page-3-1 .img_7 {
	height:auto;width:248px;
	position:absolute;
	left:50%;
	top:43%;
	margin-left:-124px;
}
.page-3-2 .img_1 {
	height:auto;width:296px;
	position:absolute;
	left:50%;
	top:5%;
	margin-left:-148px;
}
.page-3-2 .img_2 {
	height:auto;width:260px;
	position:absolute;
	left:50%;
	top:75%;
	margin-left:-130px;
}
.page-3-2 .img_3 {
	height:auto;width:20px;
	position:absolute;
	left:50%;
	top:87%;
	margin-left:-10px;
}
.page-3-2 .img_6 {
	height:auto;width:25px;
	position:absolute;
	left:50%;
	top:92%;
	margin-left:-12px;
}
.page-4-1 .img_1 {
	height:auto;width:162px;
	position:absolute;
	left:50%;
	top:2%;
	margin-left:-84px;
	z-index:2;
}
.page-4-1 .img_2 {
	height:auto;width:230px;
	position:absolute;
	left:50%;
	top:28%;
	margin-left:-115px;
}
.page-4-1 .img_3 {
	height:auto;width:161px;
	position:absolute;
	left:50%;
	top:28%;
	margin-left:-80px;
}
.page-4-1 .img_4 {
	height:auto;width:20px;
	position:absolute;
	left:50%;
	top:87%;
	margin-left:-10px;
}
.page-4-1 .img_5 {
	height:auto;width:142px;
	position:absolute;
	left:50%;
	top:82%;
	margin-left:-71px;
}
.page-4-1 .img_6 {
	height:auto;width:25px;
	position:absolute;
	left:50%;
	top:92%;
	margin-left:-12px;
}
.page-4-1 .img_7 {
	height:auto;width:271px;
	position:absolute;
	left:50%;
	top:33%;
	margin-left:-135px;
}
.page-4-1 .img_8 {
	height:auto;width:169px;
	position:absolute;
	left:50%;
	top:75%;
	margin-left:-84px;
}
.page-4-2 .img_1 {
	height:auto;width:298px;
	position:absolute;
	left:50%;
	top:5%;
	margin-left:-149px;
}
.page-4-2 .img_2 {
	height:auto;width:260px;
	position:absolute;
	left:50%;
	top:75%;
	margin-left:-130px;
}
.page-4-2 .img_3 {
	height:auto;width:20px;
	position:absolute;
	left:50%;
	top:87%;
	margin-left:-10px;
}
.page-4-2 .img_6 {
	height:auto;width:25px;
	position:absolute;
	left:50%;
	top:92%;
	margin-left:-12px;
}
.page-5-1 .img_1 {
	height:auto;width:280px;
	position:absolute;
	left:50%;
	top:20%;
	margin-left:-140px;
}
.page-5-1 .img_2 {
	height:auto;width:260px;
	position:absolute;
	left:50%;
	top:67%;
	margin-left:-130px;
}

reset.css

* {
  margin: 0;
  padding: 0;
  outline: none;
}
*:not(input,textarea) {
  -webkit-touch-callout: inherit;
  -webkit-user-select: auto;
}
body {
  width: 100%;
  font-family: Hiragino Sans GB, Arial, Helvetica, "����", sans-serif;
  font-size: 14px;
  color: #878787;
  -webkit-touch-callout: inherit ;
  -webkit-user-select: auto ;
  background-color: #fff;
}
a {
  color: #878787;
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
a:hover {
  text-decoration: none;
}
button,input,select,textarea {
  font-size: 100%;
  margin: 0;
  padding: 0;
  outline: none;
}
dt,dd {
  display: inline-block;
}
textarea,input {
  resize: none;
  outline: none;
}
textarea {
  resize: none;
  -webkit-appearance: none;
}
ul,ol,li {
  list-style: none;
}
em {
  font-style: normal;
}

玳宸

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Zepto实战练习(1)_静态页面搭建及css动画完成

Zepto实战练习最终成品展示html：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>zepto实战_练.
复制链接

扫一扫