纯CSS实现抖动效果

大家好哇,我是梦辛工作的灵,又有好久没有更新了,主要不知道更新撒了,感觉没得撒子特别好的,值得写出来分享给大家的,不过最近还好,有个值得分享,就是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> 

就这样就可以简单实现抖动效果了,抖动幅度可以修改 shock动画里面的左右间距,抖动频率可以修改
animation-iteration-count ,简单吧,等我下下次有可以和大家分享的小技巧会继续分享的,没有的话就算了,哈哈哈哈哈哈哈哈哈哈哈

你可能感兴趣的:(前端)