鼠标滑过图片，图片抖动

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

鼠标滑过图片，图片抖动相关推荐

java鼠标滑入换图片_超简单---鼠标滑过变换图片
鼠标滑过,图片变换,非常实用,用JS可以很容易做到,但是JS完成后有个缺陷,在滑过的时候,第一次可能是空白的,然后才显示,因为要下载图片,网速慢的时候更加明显.其实用CSS实现更容易,而且不会出现上面 ...
鼠标滑过显示图片大图效果
描写叙述: 当用户将鼠标放到图片上时.显示图片的大图. 效果图: 说明: 用到了mouseover.mouseout.mousemove三个事件.分别表示鼠标滑过图片.鼠标移除图片.鼠标在图片上移动 ...
CSS —— 背景图片填满DIV、鼠标滑过放大图片
1.让背景图片填满DIV 应用background-size属性可以设置背景图片填满整个div,background-size取值及解释如下: (1)background-size:cover MDN ...
jquery鼠标滑过展示图片时显示详情
jquery: 1 <script src="js/jquery.js" type="text/javascript"></script> ...
php鼠标点击图片后换图片,鼠标滑过改变图片
jQuery中attr()函数不支持delay函数控制延迟,把attr函数加在animate的回调函数中 jQuery(function(){ jQuery('.avia_p_w_picpath'). ...
html鼠标滚动图片折叠,鼠标滑过图片3D折叠效果
本教程我们将使用CSS3 3D transforms和jQuery来制作一个神奇的3D折叠效果. 在我们的demo中,图片在鼠标滑过的时候被折叠,空出来的部分将显示图片的一些信息.我们将创建一个放置图 ...
鼠标滑过时显示图片内容隐藏和鼠标滑过图片隐藏内容显示的两种小方法
1.鼠标滑过时显示图片,内容隐藏,下面以一个小日历的做法展示 <div class="date7"> <a href=""><di ...
[JQuery代码]超酷鼠标滑过背景高亮效果
1.效果及功能说明鼠标滑过悬停特效,div css制作产品列表图片布局通过鼠标滑过产品图片背景高亮闪烁显示,产品标题滑动显示或隐藏 2.实现原理首先定义好一个重复实现效果的方法,然后定义光带出现速 ...
鼠标滑过图片抖动晃动效果（css/Shake）
别人网站上看到鼠标经过图片左右抖动晃动的特效,自己也想弄一个,查了查是用到的就是CSS3的特性--Shake Shake使用SASS编写,利用它我们可以实现多种不同样式的抖动效果.这是一个很微小的动画 ...

鼠标滑过图片，图片抖动

鼠标滑过图片，图片抖动

2021.9.22

鼠标滑过图片，图片抖动相关推荐

最新文章

热门文章