鼠标滑过图片，图片抖动

最新推荐文章于 2023-03-28 20:43:18 发布
最新推荐文章于 2023-03-28 20:43:18 发布
阅读量186 收藏 1
点赞数 1
分类专栏： CSS3 文章标签： html5 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29272181/article/details/120418579
版权

鼠标滑过图片，图片抖动

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;
}
qq_29272181
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
鼠标经过抖动图片，点击显示大图
04-12
鼠标经过抖动图片，点击显示大图.
鼠标经过图片抖动效果
马优晨
05-18 1011
（1）全部图片抖动 img:hover{ animation: tada 1s .2s ease both; -moz-animation: tada 1s .2s ease both; } @keyframes tada{ 0%{-webkit-transform:scale(1);} 10%, 20%{-webkit-transform:scale(0.9) rotate(-3deg);} 30%, 50%, 70%, 90%{-webkit-transform:scale(1.1) ro
css3鼠标悬停图片抖动效果
06-12
效果描述： 一款纯css3实现的图片抖动效果 附件提供了多种图片抖动样式 喜欢的懒人可以自己试着下载使用，或者学习 使用方法： 1、将css样式引入到你的网页中 2、将body中的代码部分拷贝到你需要的地方即可 (图片采用绝对路径，不建议修改)
百度鼠标经过图片抖动javascript效果
12-25
百度鼠标经过图片抖动javascript效果
实现百度的鼠标移入图片抖动的特效(提供步骤和源码)
weixin_33924770的博客
09-15 233
　　今天无聊，在上网时候发现了这个效果（效果演示地址：http://www.baidu.com/search/baike/usertask/mingmantianxia/）.     　　在鼠标放到图片上， 图片会有个上下抖动的特效。很喜欢这种感觉。在于是摸索了一下，下面是一些步骤。 　　 　　1。查看源文件，在查看后很纳闷的发现，此页并没有包含那些奖品信息。这样就断定代码在另一个页...
jquery鼠标经过图片抖动效果特效代码
03-20
jquery鼠标经过图片抖动效果是一款鼠标滑过图片抖动，支持自定义晃动幅度。
jquery鼠标经过图片抖动效果.zip
07-05
jquery鼠标经过图片抖动效果是一款鼠标滑过图片抖动，支持自定义晃动幅度。
鼠标滑过按钮动画效果.rar
05-23
鼠标滑过按钮动画效果
带动感抖动效果CSS3幻灯片
04-07
带动感抖动效果CSS3幻灯片是一款鼠标滑过图片带有抖动效果的CSS3幻灯片代码，带进度条，暂停按钮。
CSS3图片3D旋转相册
01-19
带动感抖动效果CSS3焦点图——这是一款简单的CSS3焦点图，该CSS3焦点图的特点是鼠标滑过焦点图时图片会产生抖动的效果。
html5 CSS3鼠标悬停图片抖动.rar
07-10
html5 CSS3鼠标悬停图片抖动，鼠标放在图片上，图片会抖动几下，在支持HTML5浏览器中有最佳效果。将本效果放在图片列表中比较合适，比如购物网站的产品图片列表、企业网站的产品中心列表、文章资讯站的推荐图文列表，都可以加入这种图片抖动效果，会让访问者感觉网站的灵动，而且不张扬。
CSS技巧！鼠标经过图片抖动效果
difen5071的博客
09-02 736
把代码加到style.css(模板的主css里面)： /**图片抖动**/ img:hover{-webkit-animation: tada 1s .2s ease both;-moz-animation: tada 1s .2s ease both;} @-webkit-keyframes tada{0%{-webkit-transform:scale(1);} 10%, 2...
图片跟随鼠标移动效果的抖动问题
lll_90的博客
12-16 1771
误用offset实现图片跟随鼠标移动效果时，产生的图片抖动问题
鼠标滑过图片抖动晃动效果（css/Shake）
热门推荐
学习-记录笔记-积累
07-01 1万+
别人网站上看到鼠标经过图片左右抖动晃动的特效,自己也想弄一个,查了查是用到的就是CSS3的特性——Shake Shake使用SASS编写，利用它我们可以实现多种不同样式的抖动效果。这是一个很微小的动画，但使用得当也是挺不错的，比如用在广告、图像、按钮上，这样可以用来吸引用户眼球从而促使去点击它。 这个Csshake有9个抖动样式，三个状态，如鼠标经过拉动、无限抖动、鼠标悬停拉动，一起来看一下吧。
css实现悬浮时图标抖动效果
weixin_48043684的博客
03-28 751
例如，利用css实现鼠标悬浮时热线电话电话标识晃动效果效果如下图所示。
css 圆形扩散特效 水波
笔记库
10-16 2058
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=...
uniapp 点击事件触发图片左右抖动
最新发布
07-10
要实现在UniApp中点击事件触发图片左右抖动效果，你可以使用CSS...最后，通过控制`isShaking`变量的值，切换图片的class，从而触发图片的左右抖动效果。 注意，需要根据实际情况修改代码中的图片路径和动画效果细节。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值