css3 左右晃动效果

最新推荐文章于 2024-08-20 10:36:07 发布

hi_JXL

最新推荐文章于 2024-08-20 10:36:07 发布

阅读量5k

点赞数 1

分类专栏： css

本文链接：https://blog.csdn.net/hi_JXL/article/details/103939440

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

css3 左右晃动效果

<div class="box"></div>
<style>
	*{
		padding:0;
		margin:0;
	}
	.box{
		width:100px;
		height:100px;
		background:#098;
		margin:20px auto;
		-webkit-animation: rock 1s 0s ease-in-out infinite;
		-moz-animation: rock 1s 0s ease-in-out infinite;
		-ms-animation: rock 1s 0s ease-in-out infinite;
		-o-animation: rock 1s 0s ease-in-out infinite;
		animation: rock 1s 0s ease-in-out infinite;
	}
	@-webkit-keyframes rock {
		    0% {
		        -webkit-transform: rotate(-30deg);
		        transform: rotate(-30deg)
		    }
		    10% {
		        -webkit-transform: rotate(-15deg);
		        transform: rotate(-15deg)
		    }
		    20% {
		        -webkit-transform: rotate(-30deg);
		        transform: rotate(-30deg)
		    }
		    30% {
		        -webkit-transform: rotate(-45deg);
		        transform: rotate(-45deg)
		    }
		    35% {
		        -webkit-transform: rotate(-15deg);
		        transform: rotate(-15deg)
		    }
		    40% {
		        -webkit-transform: rotate(-45deg);
		        transform: rotate(-45deg)
		    }
		    45% {
		        -webkit-transform: rotate(-15deg);
		        transform: rotate(-15deg)
		    }
		    50% {
		        -webkit-transform: rotate(-30deg);
		        transform: rotate(-30deg)
		    }
		    100% {
		        -webkit-transform: rotate(-30deg);
		        transform: rotate(-30deg)
		    }
		}
		@keyframes rock {
		    0% {
		        -webkit-transform: rotate(-30deg);
		        transform: rotate(-30deg)
		    }
		    10% {
		        -webkit-transform: rotate(-15deg);
		        transform: rotate(-15deg)
		    }
		    20% {
		        -webkit-transform: rotate(-30deg);
		        transform: rotate(-30deg)
		    }
		    30% {
		        -webkit-transform: rotate(-45deg);
		        transform: rotate(-45deg)
		    }
		    35% {
		        -webkit-transform: rotate(-15deg);
		        transform: rotate(-15deg)
		    }
		    40% {
		        -webkit-transform: rotate(-45deg);
		        transform: rotate(-45deg)
		    }
		    45% {
		        -webkit-transform: rotate(-15deg);
		        transform: rotate(-15deg)
		    }
		    50% {
		        -webkit-transform: rotate(-30deg);
		        transform: rotate(-30deg)
		    }
		    100% {
		        -webkit-transform: rotate(-30deg);
		        transform: rotate(-30deg)
		    }
		}
</style>