本文共 5339 字，大约阅读时间需要 17 分钟。

目录

上一篇博客动画练习

HTML

			
   				
   			
   
			
    
				
     
				
     
clock
			
    
			
    
				
     
				
     
hourglass
			
    
			
    
				
     
				
     
loader1
			
    
			
    
				
     
				
     
loader2
			
    
			
    
				
     
				
     
loader3
			
    
			
    
				
     
				
     
loader4
			
    
				
   
	

CSS 

.contain{	text-align: center;	background-color: #e74c3c;	overflow: hidden;}.box:nth-child(2n-1){	background-color: rgba(0,0,0,0.05);}.box{	display: inline-block;	height: 200px;	width: 33.3%;	float: left;	position: relative;	transition: all .2s ease;}.box p{	color: #777;	font-weight: 300;	position: absolute;	font-size: 20px;	width: 100%;	height: 25px;	text-align: center;	bottom: 0px;	margin: 0;	top: 160px;	background-color: #fff;	opacity: 0;	text-transform: uppercase;	transition: all .2s ease;}.box:hover p{	bottom: 0px;	top: 175px;	opacity: 1;	transition: all .2s ease;	z-index: 2;}/* media queries 媒体查询：当屏幕小于某一个值时会改变排数*/@media (max-width: 700px){	.box{		width: 50%;	}	.box:nth-child(2n-1){		background-color: inherit;	}	.box:nth-child(4n),.box:nth-child(4n-3){		background-color: rgba(0,0,0,0.05);	}}@media (max-width:420px){	.box{		width: 100%;	}	.box:nth-child(2n-1){		background-color: rgba(0,0,0,0.05);	}	.box:nth-child(4n),.box:nth-child(4n-3){		background-color: inherit;	}}/*clock*/.clock{	border-radius: 60px;	border: 3px solid #fff;	height: 80px;	width: 80px;	position: relative;		/*top: 20%;*/	top: -webkit-calc(50% - 43px);	top: calc(50% - 43px);	/*left: 35%;*/	left: -webkit-calc(50% - 43px);	left: calc(50% - 43px);}.clock:after{	content: "";	position: absolute;	background-color: #fff;	top: 2px;	left: 48%;	height: 38px;	width: 4px;	border-radius: 5px;	/*-webkit-transform-origin: 50% 97%;*/	transform-origin: 50% 97%;	animation: grdAiguille 2s linear infinite;}@keyframes grdAiguille{	0%{transform: rotate(0deg);}	100%{transform: rotate(360deg);}}.clock:before{	content: "";	position: absolute;	background-color: #fff;	top: 6px;	left: 48%;	height: 35px;	width: 4px;	border-radius: 5px;	/*-webkit-transform-origin: 50% 97%;*/	transform-origin: 50% 94%;	animation: ptAiguille 12s linear infinite;}@keyframes ptAiguille{	0%{transform: rotate(0deg);}	100%{transform: rotate(360deg);}}/*    hourglass       */.hourglass{	border-radius: 80px;	border: 3px solid #fff;	height: 80px;	width: 80px;	position: relative;		top: calc(50% - 43px);	left: calc(50% - 43px);	transform-origin: 50% 50%;	animation: hourglass 2s linear infinite;}.hourglass:before{	content: "";	position: absolute;	background-color: #fff;	top: 6px;	left: 18px;	height: 0px;	width: 0px;	border-style: solid;	border-width:35px 22px 0 22px;	border-color: #fff #e74c3c; }.hourglass:after{	content: "";	position: absolute;	background-color: #fff;	top: 40px;	left: 18px;	height: 0px;	width: 0px;	border-style: solid;	border-width:0 22px 35px 22px;	border-color: #fff #e74c3c; }@keyframes hourglass{	0%{transform: rotate(0deg);}	100%{transform: rotate(360deg);}}/*loader1*/.loader1{	position: relative;	width: 150px;	height: 20px;	top: calc(50%-10px);	left: calc(50%-75px);	margin: 90px auto;		background-color: rgba(255,255,255,0.2);}.loader1:before{	content: "";	position: absolute;	background-color: #fff;	top: 0px;	left: 0px;	height: 20px;	width: 0px;	z-index: 0;	opacity: 1;	transform: 100% 0%;	animation: loader1 6s ease-in-out infinite;}.loader1:after{	content: "LOADING......";	color: #fff;	font-weight: 200;	font-size: 16px;	position: absolute;	width: 100%;	height: 20px;	line-height: 20px;	left: 0;	top: 0;}@keyframes loader1{	0%{width: 0px;}	85%{width: 100%;opacity: 1;}	90%{opacity: 1;width: 100%;}	100%{opacity: 0;width: 0px;}}/*loader2*/.loader2{	position: relative;	width: 40px;	height: 40px;	top: calc(50%-20px);	left: calc(50%-20px);	margin: 90px auto;		background-color: rgba(255,255,255,0.2);}.loader2:before{	content: "";	position: absolute;	background-color: #fff;	height: 10px;	width: 10px;	border-radius: 10px;	animation: loader2 2s ease-in-out infinite;}.loader2:after{	content: "";	position: absolute;	background-color: #fff;	top: 0px;	left: 0px;	width: 0px;	height: 40px;	z-index: 0;	opacity: 1;	animation: loader22 5s ease-in-out infinite;}@keyframes loader2{	0%{left: -12px;top: -12px;}	25%{left: 42px;top: -12px;}	50%{left: 42px;top: 42px;}	75%{left: -12px;top: 42px;}	100%{left: -12px;top: -12px;}}@keyframes loader22{	0%{width: 0px;}	80%{width: 100%;opacity: 1;}	90%{opacity: 1;width: 100%;}	100%{opacity: 0;width: 0px;}}

运行结果： 

触屏事件

什么是触屏事件：

• 手指在屏幕上滑动带来的一些效果
• 方便我们的操作
• 指尖上的行动

分类以及触发的时机

• touchstart事件:当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。
• touchmove事件:当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。
• touchend事件:当手指从屏幕上离开的时候触发。
• touchcancel事件:当系统停止跟踪触摸的时候触发

跟踪触屏的特性

• touches :表示当前跟踪的触摸操作的touch对象的数组。
• targetTouches:特定于事件目标的Touch对象的数组。
• changeTouches:表示自，上次触摸以来发生了什么改变的Touch对象的数组。

Touch对象属性

• clientX:触摸目标在视口中的x坐标。
• clientY:触摸目标在视口中的y坐标。
• identifier:标识触摸的唯一-ID。
• pageX:触摸目标在页面中的x坐标。
• pageY:触摸目标在页面中的y坐标。
• screenX:触摸目标在屏幕中的x坐标。
• screenY:触摸目标在屏幕中的y坐标。
• target:触摸的DOM节点目标。

分类以及触发时机

• touchstart事件:当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。
• touchmove事件:当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。
• touchend事件:当手指从屏幕上离开的时候触发。
• touchcancel事件:当系统停止跟踪触摸的时候触发。

例子：将页面切换成手机模式，点击在控制台打印事件

CSS：

*{	padding: 0;	margin: 0;}#box{	width: 200px;	height: 200px;	background-color: red;}

运行结果： 

一起学习，一起进步 -.- ，如有错误，可以发评论

转载地址：https://kongchengji.blog.csdn.net/article/details/99294507 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！