纯CSS实现抖动效果

大家好哇，我是梦辛工作的灵，又有好久没有更新了，主要不知道更新撒了，感觉没得撒子特别好的，值得写出来分享给大家的，不过最近还好，有个值得分享，就是css如何实现抖动效果，实现原理很简单，就是给控件一个动画，让其短时间内向左向右向上漂移一点距离，控制时间和次数就可以有效果了，下面来看代码@keyframes shock {0% {margin-left: 0px;margin-right: 5px;

灵神翁

6032人浏览 · 2021-05-21 11:38:32

灵神翁 · 2021-05-21 11:38:32 发布

大家好哇，我是梦辛工作的灵，又有好久没有更新了，主要不知道更新撒了，感觉没得撒子特别好的，值得写出来分享给大家的，不过最近还好，有个值得分享，就是css如何实现抖动效果，实现原理很简单，就是给控件一个动画，让其短时间内向左向右向上漂移一点距离，控制时间和次数就可以有效果了，下面来看代码


	@keyframes shock {
	    0% {
	        margin-left: 0px;
	        margin-right: 5px;
	        margin-top: 0px;
	    }
	    100% {
	        margin-left: 5px;
	        margin-right: 0px;
	        margin-top: 5px	;	/* 可以自定义上下左右的幅度 */
	    }
	}
		.item{

 		width: 100px;
 		height: 150px;
 		background: #FFF;
 		border-radius: 5px;

	}

	.item:hover{
 		animation-delay: 0s;
	    animation-name: shock;
	    animation-duration: .1s;
	    animation-iteration-count: 3;
	    animation-direction: normal;
	    animation-timing-function: linear;
	}

整体代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>示例</title>
 <style type="text/css">
 	
 	.item{

 		width: 100px;
 		height: 150px;
 		background: #FFF;
 		border-radius: 5px;

	}

	.item:hover{
 		animation-delay: 0s;
	    animation-name: shock;
	    animation-duration: .1s;
	    animation-iteration-count: 3;
	    animation-direction: normal;
	    animation-timing-function: linear;
	}

	@keyframes shock {
	    0% {
	        margin-left: 0px;
	        margin-right: 5px;
	        margin-top: 0px;
	    }
	    100% {
	        margin-left: 5px;
	        margin-right: 0px;
	        margin-top: 5px	;
	    }
	}

 </style>
</head>
<body style="padding: 0;margin: 0">
 
<div >
  <div style="width:100vw;height: 50vh;padding: 30px 0;background: #000F0F;display: flex;justify-content: center;align-items: center;">

  			<!-- 加个盒子，防止抖动影响其他视图 -->
  			<div style="width: 200px;height: 300px;">
					
					<!-- 抖动控件 -->
					<div class="item"></div>


  			</div>

    
  </div>
</div> 
</body>
</html>