鼠标滑过图片抖动晃动效果(css/Shake)
别人网站上看到鼠标经过图片左右抖动晃动的特效,自己也想弄一个,查了查是用到的就是CSS3的特性——Shake
Shake使用SASS编写,利用它我们可以实现多种不同样式的抖动效果。这是一个很微小的动画,但使用得当也是挺不错的,比如用在广告、图像、按钮上,这样可以用来吸引用户眼球从而促使去点击它。
这个Csshake有9个抖动样式,三个状态,如鼠标经过拉动、无限抖动、鼠标悬停拉动,一起来看一下吧。 实现方法也很简单,因为已经有了做好的CSS代码,我们只需要引入文件在需要抖动的地方调用即可。
1.下载CSS shake样式表
链接: https://pan.baidu.com/s/1nuLaitN 密码: 7ewr
- 2.引入CSS shake样式表
<link type="text/css" href="csshake.css">
- 3.在需要抖动的元素块中加入shake的class属性
抖动样式一共有九种自己选择喜欢的试试吧:<div class="shake shake-hard"></div> //剧烈抖动
<div class="shake shake-slow"></div> //慢速抖动
<div class="shake shake-little"></div> //轻微抖动
<div class="shake shake-horizontal"></div> //横向抖动
<div class="shake shake.vertical"></div> //上下抖动
<div class="shake shake-rotate"></div> //扭动
<div class="shake shake-opacity"></div> //隐现抖动
<div class="shake shake-crazy"></div> //疯狂抖动
鼠标滑过图片抖动晃动效果(css/Shake)相关推荐
- html鼠标滚动图片折叠,鼠标滑过图片3D折叠效果
本教程我们将使用CSS3 3D transforms和jQuery来制作一个神奇的3D折叠效果. 在我们的demo中,图片在鼠标滑过的时候被折叠,空出来的部分将显示图片的一些信息.我们将创建一个放置图 ...
- html鼠标移上去变色放大,CSS3 鼠标滑过图片突出放大效果 | 腾讯云
今天给大家分享一款简单实用的CSS3鼠标滑过图片放大特效,我们可以将它应用在相册中,或者是轮播展示的图片中,这样可以将鼠标移到图片上进行快速预览图片.同时你也可以在此基础上扩展它,比如给图片加投影和边 ...
- 鼠标滑过图片,图片抖动
鼠标滑过图片,图片抖动 2021.9.22 1.html代码 <!DOCTYPE html> <html><head><meta charset=" ...
- html5 鼠标旋转动画效果,CSS3鼠标滑过图片3D翻转动画特效
这是一款效果非常炫酷的CSS3鼠标滑过图片3D翻转动画特效.该特效基于Bootstrap网格系统来布局,通过简单的CSS3代码,在鼠标滑过图片时对图片进行3D翻转,效果非常的酷. 使用方法 HTML结 ...
- html鼠标滑过导航条展开导航条,jquery css实现鼠标滑过导航菜单栏动画效果
对于导航栏的实现对于前端人员来说再简单不过了,但是如何让我们的导航看起来生动,给用户一种很高大上的感觉,却需要我们好好设计一下.今天我给大家带来的是我自己在项目中用到的一个例子,当我们鼠标滑过导航栏时 ...
- jQuery hover事件鼠标滑过图片半透明标题文字滑动显示隐藏
1.效果及功能说明 hover事件制作产品图片鼠标滑过图片半透明,标题文字从左到右滑动动画移动显示隐藏 2.实现原理 首先把效果都隐藏,然后定义一个伪类来触发所有的效果,接下来当触发伪类后会有一个遍历 ...
- html5鼠标滑过图片 图片弹出层,纯CSS3鼠标滑过图片遮罩层动画特效
简要教程 这是一款使用纯CSS3制作的鼠标滑过图片遮罩层动画特效.该特效中,当鼠标滑过或悬停在图片上面时,会在图片上出现遮罩层动画,展示出图片的描述信息和链接图标按钮. 使用方法 在页面中引入boot ...
- html怎么鼠标经过添加蒙版遮罩,js实现鼠标移动到图片产生遮罩效果
本文实例为大家分享了js实现鼠标移动到图片产生遮罩效果的具体代码,供大家参考,具体内容如下 mask .pic{ width:300px; height:250px; background:url(i ...
- 右上角鼠标滑过展开收缩动画效果js代码的演示页面
http://files.cnblogs.com/files/tanlingdangan/top_right.rar.gz 右上角鼠标滑过展开收缩动画效果js代码的演示页面http://www.51x ...
最新文章
- 计算机基础知识-操作系统
- ASP调用web services
- 485串口光纤转换器产品介绍
- 【转】详解Windows消息分类以及WM_COMMAND与WM_NOTIFY的区别,以及模拟发送控件通知消息
- oracle的基本数据类型(转载)
- 微信小程序支付-付款(Java后台)
- 来到深圳奋斗的这些年(不断更新!)
- java和vue的狱警管理系统监狱系统狱务管理系统
- SequoiaDB巨杉数据库许建辉:夯实数据库根科技,提升企业数智化转型的“人效”和“能效”...
- 支付宝沙箱demo演示
- java ftp 250状态码_FTP状态码
- 六足机器人的步态分析与实现——1
- Google服务器架构图解简析
- 如何从 Android 手机恢复丢失的联系人
- 传美云商系统软件方案详解
- Alpha测试和Beta测试简介
- 微信OAuth授权获取用户OpenId-JAVA(个人经验)
- C# Obsolete、Contional等等一些特性的介绍
- Elasticsearch/Kibana 视频学习网址(亲测视频很好)
- 基于卷积神经网络的序列特异性预测研究--云南大学范航恺硕士论文