css无限旋转

最新推荐文章于 2024-06-13 09:21:50 发布

棒老师

最新推荐文章于 2024-06-13 09:21:50 发布

阅读量1k

点赞数

分类专栏： WEB

本文链接：https://blog.csdn.net/HTX_HelloWorld/article/details/40213347

版权

WEB 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

<img src="https://img-blog.csdn.net/20141018180818656?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvSFRYX0hlbGxvV29ybGQ=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /><!DOCTYPE html>

<html>

<head>

	<title>@keyframes(动画)</title>

	<meta charset="utf-8">

	<style type="text/css">

	.div_keyf{

		width: 130px;

		height: 100px;

		-webkit-animation: hehe 5s;

	}

	@-webkit-keyframes hehe{

		from{background: #F92672;}

		to{background: #E8D81F;}

	}



	.div_keyf2{

		width: 130px;

		height: 100px;

		-webkit-animation: hehe1 7s;

	}

	@-webkit-keyframes hehe1{

		0{background: #12E8E3;}

		50%{background: #12E86C;}

		100%{background: #F03424;}

	}



	.div_keyf3{

		width: 130px;

		height: 100px;

		background: #eee;		

	}

	.div_keyf3:hover{

		-webkit-animation: hehe1 7s;

	}

	@-webkit-keyframes hehe1{

		0%{background: #12E8E3;}

		50%{background: #12E86C;}

		100%{background: #F03424;}

	}



	.div_keyf4{

		width: 200px;

		height: 30px;

		background: #6CED34;

		border-radius: 20px;

		margin: 100px 100px;

		color: #000;

		text-align: center;

		line-height: 30px;

		cursor: pointer;

		/*在这里linear表示线性变化，infinite表示一直循环，*/

		/*-webkit-animation:haha 2s linear infinite;*/

		/*旋转属性，deg表示度数（角度）*/

		/*-webkit-transform:rotate(90deg);*/

	}

	.div_keyf4:active{

		-webkit-animation:haha 2s linear infinite;

	}

	@-webkit-keyframes haha{

		0%{-webkit-transform:rotate(0deg);}

		25%{-webkit-transform:rotate(90deg);}

		50%{-webkit-transform:rotate(180deg);}

		75%{-webkit-transform:rotate(270deg);}

		100%{-webkit-transform:rotate(360deg);}

	}







	.div_box-shadow-dd{

		width: 3px;

		margin-left: 200px;

		margin-top: 200px;

		height: 3px;

		color: #fff;

		background: #fff;

		border-radius: 100%;

		/*PS:第一个：左右，第二个：上下，第三个：模糊度，第四个值是表示扩大 缩小;*/

		box-shadow:0px -10px 0px 0.7px #333,

		10px 0px #333,

		0px 10px #333,

		-10px 0px #333,



		-7px -7px 0px 0.5px #333,

		7px -7px 0 1.5px #333,



		7px 7px #333,

		-7px 7px #333;

		-webkit-animation:haha1 .8s linear infinite;

	}

	@-webkit-keyframes haha1{

		0%{-webkit-transform:rotate(0deg);}

		25%{-webkit-transform:rotate(90deg);}

		50%{-webkit-transform:rotate(180deg);}

		75%{-webkit-transform:rotate(270deg);}

		100%{-webkit-transform:rotate(360deg);}

	}

	</style>

</head>

<body>

<!-- 	<div class="div_keyf">

	动画1(红遍黄)

	</div> -->

<!-- 	<div class="div_keyf2">

	动画2（蓝变绿在变红）

	</div> -->

<!-- 	<div class="div_keyf3">

	动画3（蓝变绿在变红  hover）

	</div> -->



<!-- 	<div class="div_keyf4">

	动画4（蓝变绿在变红  hover）

	</div> -->





	<div class="div_box-shadow-dd">

		

	</div> 

</body>

</html>