回归前端学习第19天——CSS一些简易小动画

动画中的关键帧

实现图片在浏览器内自动四处游荡~

<div class="rect"></div>

.rect{
	width:300px;
	height:400px;
	background:url(../xing.jpg);
	position: fixed;
	/*指定用哪个动画*/
	animation-name:mymove;
	/*动画持续多少秒*/
	animation-duration:6s;
	/*匀速行驶 慢后快*/
	animation-timing-function: /*linear*/ ease;
	/*延迟1S*/
	animation-delay:1s;
	/*循环播放*/
	animation-iteration-count:infinite;
	/*normal属性是什么变化都没有，若设置了alternate，则可以反向*/
	animation-direction:alternate; 
	/*可以写在一块/*/
	/*animation: mymove 3s 3;*/
}
@keyframes mymove{
	/*水平横动*/
	/*from{top:0;left:20%;}
	to{top:0; left:80%;}*/
	/*0%{top:0; left:20%; background-color:red;}
	25%{top:0 ; left:80%;background-color:blue;}
	50%{top:80%; left:80%;background-color:green;}
	75%{top:80%;left:20%;background-color:pink;}
	100%{top:0; left:20%;background-color:black;}*/
	0%{top:0; left:10%; background:url(./xing.jpg);}
	25%{top:0 ; left:80%;background:url(./xing.jpg);}
	50%{top:40%; left:80%;background:url(./xing.jpg);}
	75%{top:40%;left:10%;background:url(./xing.jpg);}
	100%{top:0; left:10%;background:url(./xing.jpg);}
}

实现水平横动效果

.main{
	width:320px;
	height:430px;
	border:1px solid #ccc;
	margin:10px auto;
	padding:10px 5px;
	cursor:pointer;
	background-color: #aaee11;
	border-radius:20%;
	text-align: center;
}	
.m_title{
	font-size:20px;
	text-align:center;
	font-weight:bold;
	padding:10px 10px 10px 10px;

}
.m_content{
	color:grey;
	padding:10px;
}
.m_img{
	text-align:right;
	/*让其子元素好定位*/
	position: relative;
}
.m_img img{
	position: absolute;
	right:0px;
	height:350px;
	-webkit-transition: right 0.3s;
	-o-transition: right 0.3s;
	transition: right 0.3s;
	border-radius:30%;
}
/*移到层上开始变化 向左移动*/
.main:hover .m_img img{
	right:30px;

}
@keyframes mymove{
	/*水平横动*/
	/*from{to
	p:0;left:20%;}
	to{top:0; left:80%;}*/
	0%{top:0; left:20%; background:url(./xing.jpg) ;}
	25%{top:0 ; left:80%;background-color:blue;}
	50%{top:80%; left:80%;background-color:green;}
	75%{top:80%;left:20%;background-color:pink;}
	100%{top:0; left:20%;background-color:black;}


}

<div class="main">
		<div class="m_title">知行合一</div>
		<div class="m_content">坚持学习</div>
		<div class="m_img">
			<img src="./xing.jpg">
		</div>
	</div>

进入时有缩放效果，鼠标滑过也会有缩放效果

.main{
	margin:10px auto;
	width:380px;
	border:1px solid #ccc;
	text-align:center;
	background-color: #ccc;
	border-radius:10%;
}
.main li{
	list-style: none;
	cursor:pointer;
}
.m_title{
	font-size:24px;
	font-weight:bold;
	margin:5px;
}
.m_content{
	color:#666;
	margin-bottom:15px;
}
.m_img{
	position:relative;
	padding:30px;
}
/*做了一个圆形。在最下面*/
/*.m_img::before{
	content:'' ;
	position:absolute;
	width:440px;
	height:440px;
	background-color: #eee;
	border-radius:50%;
	z-index:-1;
	left:7px;
	top:16px;
}*/
.m_img img{
	border-radius: 30%;
	/*原先设置成1*/
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	
	-webkit-transition: all ,0.5s;
	-o-transition: all ,0.5s;
	transition: all ,0.5s;
}
.main li:hover  .m_img img{
	/*鼠标经过后放大1.5倍*/
	-webkit-transform: scale(1.1);
	-ms-transform: scale(1.1);
	-o-transform: scale(1.1);
	transform: scale(1.1);
}

<div class="main">
		<ul>
			<li>
				<div class="m_title">水中印象</div>
				<div class="m_content">令人神往</div>
				<div class="m_img"><img src="./yinxiang.jpg"></div>
			</li>
		</ul>
	</div>

一个等待的loading动画

.spinner{
	margin:100px auto;
	width:60px;
	height:60px;
	text-align:center;
	font-size:10px;

}
.spinner div{
	background-color: #67cf22;
	width: 6px;
	height:100%;
	display:inline-block;

	animation:mymove 1.2s infinite ease-in-out;
}
/*伪类选择器*/
.spinner >div:nth-child(2){
	animation-delay:-1.1s;
}
.spinner >div:nth-child(3){
	animation-delay:-1.0s;
}

.spinner >div:nth-child(4){
	animation-delay:-0.9s;
}

.spinner >div:nth-child(5){
	animation-delay:-0.8;
}

<div class="spinner">
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</div>