用CSS给html元素添加鼠标移动上去抖动效果

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;
	}

HTML

<!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> 

鼠标放到白色区域

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
颜文字
上一篇
下一篇