动画会震一下css,csshake.css强大的CSS3元素抖动动画库

CSS Shake是一个使用CSS3实现的动画样式，使用SASS编写，利用它我们可以实现多种不同样式的抖动效果(如下面的GIF图像)。这是一个很微小的动画，但使用得当也是挺不错的，比如用在广告、图像、按钮上，这样可以用来吸引用户眼球从而促使去点击它。这个Csshake有9个抖动样式，三个状态，如鼠标经过拉动、无限抖动、鼠标悬停拉动，一起来玩一下吧。

使用方法

要使用csshake，首先要将csshake.css文件引入你的html文件的

中。

然后你就可以使用下面的方法是DOM元素抖动起来：

你可以通过 .freeze 、 .shake-constant 和 .hover-stop 来控制抖动动画的状态。

定制

你可以通过SASS @mixins 来创建新的抖动动画。

编辑_mixins.scss文件：@include shake($x, $y, $rot, $name, $steps, $opacity);$x 和 $y 是在x或y轴上移动的像素。

$rot 是旋转的角度。

$name 是参数中元素的名字。

$steps 可以调整动画的循环次数(例如：设置为10可以是动画每次完成10%)。

$opacity 表示是否给动画添加透明度。

下面是一个例子：@include shake(40px, 40px, 20deg, 'shake-crazy', 10, true);

编辑_shake.scss文件：@include animation($name, $dur, $iter, $tim, $del);$name ：animation-name。

$dur ：animation-duration。

$iter ：animation-iteration-count。

$tim ：animation-timing-function。

$del ：animation-delay。

下面是一个例子：@include animation(shake-slow, 5s);

注意：你必须使用random()函数来编译SASS文件。

你可以在下面三篇文章中获得更多这方面的信息：

动画会震一下css,csshake.css强大的CSS3元素抖动动画库相关推荐

最近在做动画相关的项目，推荐 11 个好用的 JS 动画库
作者:Jonathan Saring 译者:前端小智来源:medium . 为了保证的可读性,本文采用意译而非直译. 1.Three.js 超过46K的星星,这个流行的库提供了非常多的3D显示功能, ...
html中如何设置动画鼠标,使用animate动画库添加鼠标经过动画
使用animate动画库添加鼠标经过动画蓝叶网站设计 2016-11-27 11679 4评论 animate是一个css3动画库,使用它简单几步就能很轻松的为网站增加各种 ...
前端进阶必学必会动画学习之Animate.css的使用与解析：一个强大而酷炫的CSS3动画库Animate.css使用方法教程
简介 animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake).闪烁(flash).弹跳(bounce).翻转(flip).旋转(rotateIn/rotateOut). ...
强大的CSS3动画库animate.css
今天要给大家介绍一款强大的CSS3动画库animate.css,animate.css定义了大概50多种动画形式,包括淡入淡出,文字飞入.左右摇摆动画等等.使用animate.css也非常简单,你可以 ...
CSS: Animation CSS：动画 Lynda课程中文字幕
CSS: Animation 中文字幕 CSS:动画中文字幕CSS: Animation CSS动画为将运动引入交互式项目提供了一种全新的方式这是网页设计师和开发人员的核心技能,也是用户期望从现代 ...
【JavaLearn】（22）jQuery介绍、选择器、事件、动画、DOM编程、操作CSS、表单验证
目录 1. jQuery定义和特点 1.1 jQuery 入门 1.2 jQuery对象和DOM对象 2. jQuery 选择器 2.1 基本选择器 2.2 属性选择器 2.3 位置选择器 2.4 表 ...
【JavaLearn】#（22）jQuery介绍、选择器、事件、动画、DOM编程、操作CSS、表单验证
1. jQuery定义和特点 1.1 jQuery 入门对 JavaScript 进行了封装,降低了使用JavaScript的难度,可以大幅提高开发效率(Write less, do more) j ...
css3动画简介以及动画库animate.css的使用
在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...
css animation动画完成后隐藏_css3动画简介以及动画库animate.css的使用
在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...

动画会震一下css,csshake.css强大的CSS3元素抖动动画库

动画会震一下css,csshake.css强大的CSS3元素抖动动画库相关推荐

最新文章

热门文章