鼠标滑过图片,图片抖动
2021.9.22
1.html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鼠标滑过抖动图标在线演示</title>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head>
<body>
<div class="container">
<a href="#" class="service-item">
<span class="service-icon-wrap">
<img src="https://cdnalifile.tianguiedu.com/img/tuiguang/20210922172606.png" alt="service icon" class="service-icon">
</span>
<h3 class="service-title">Full Service Oil Change</h3>
</a>
<a href="#" class="service-item">
<span class="service-icon-wrap">
<img src="https://cdnalifile.tianguiedu.com/img/tuiguang/20210922172629.png" alt="service icon" class="service-icon">
</span>
<h3 class="service-title">Performance Additives</h3>
</a>
<a href="#" class="service-item">
<span class="service-icon-wrap">
<img src="https://cdnalifile.tianguiedu.com/img/tuiguang/20210922172646.png " alt="service icon" class="service-icon">
</span>
<h3 class="service-title">Maintenance Parts</h3>
</a>
<a href="#" class="service-item">
<span class="service-icon-wrap">
<img src="https://cdnalifile.tianguiedu.com/img/tuiguang/20210922172701.png " alt="service icon" class="service-icon">
</span>
<h3 class="service-title">Installed Parts</h3>
</a>
<a href="#" class="service-item">
<span class="service-icon-wrap">
<img src="https://cdnalifile.tianguiedu.com/img/tuiguang/20210922172719.png " alt="service icon" class="service-icon">
</span>
<h3 class="service-title">Fleet<br> Services</h3>
</a>
</div>
</body>
</html>
2.css代码
@keyframes icon-bounce {
0%, 100% {
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
25% {
-moz-transform: rotate(15deg);
-ms-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
50% {
-moz-transform: rotate(-15deg);
-ms-transform: rotate(-15deg);
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);
}
75% {
-moz-transform: rotate(5deg);
-ms-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
}
85% {
-moz-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
}
}
@-webkit-keyframes icon-bounce {
0%, 100% {
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
25% {
-moz-transform: rotate(15deg);
-ms-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
50% {
-moz-transform: rotate(-15deg);
-ms-transform: rotate(-15deg);
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);
}
75% {
-moz-transform: rotate(5deg);
-ms-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
}
85% {
-moz-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
}
}
@-moz-keyframes icon-bounce {
0%, 100% {
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
25% {
-moz-transform: rotate(15deg);
-ms-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
50% {
-moz-transform: rotate(-15deg);
-ms-transform: rotate(-15deg);
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);
}
75% {
-moz-transform: rotate(5deg);
-ms-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
}
85% {
-moz-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
}
}
@-o-keyframes icon-bounce {
0%, 100% {
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
25% {
-moz-transform: rotate(15deg);
-ms-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
50% {
-moz-transform: rotate(-15deg);
-ms-transform: rotate(-15deg);
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);
}
75% {
-moz-transform: rotate(5deg);
-ms-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
}
85% {
-moz-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
}
}
/* styles */
body {
background: #FBD40B;
}
a {
color: #000;
text-decoration: none;
}
a:hover, a:active {
text-decoration: underline;
}
.container {
max-width: 1000px;
margin: 0 auto;
padding-top: 40px;
}
.service-item {
display: block;
float: left;
margin-bottom: 30px;
width: 20%;
}
.service-item:hover .service-icon {
-webkit-animation: icon-bounce 0.5s alternate;
-moz-animation: icon-bounce 0.5s alternate;
-o-animation: icon-bounce 0.5s alternate;
animation: icon-bounce 0.5s alternate;
}
.service-icon-wrap {
text-align: center;
display: block;
height: 52px;
margin-bottom: 30px;
}
.service-title {
font-family: 'Cabin Condensed', sans-serif;
font-weight: 700;
text-transform: uppercase;
font-size: 20px;
text-align: center;
margin: 0;
padding: 0 20px;
}