Css3抖动

http://files.cnblogs.com/xinlinux/csshake.min.css

　　<div class="shake">AAA</div>
　　<div class="shake shake-hard">AAA</div>
　　<div class="shake shake-slow">AAA</div>
　　<div class="shake shake-little">AAA</div>
　　<div class="shake shake-horizontal">AAA</div>
　　<div class="shake shake.vertical">AAA</div>
　　<div class="shake shake-rotate">AAA</div>
　　<div class="shake shake-opacity">AAA</div>
　　<div class="shake shake-crazy">AAA</div>

时间： 2024-11-02 15:15:06

Css3抖动的相关文章

炫酷的CSS3抖动样式:CSS Shake

CSS Shake是一个使用CSS3实现的动画样式,使用SASS编写,利用它我们可以实现多种不同样式的抖动效果(如下面的GIF图像): 炫酷的CSS3抖动样式:CSS Shake 这是一个很微小的动画,但使用得当也是挺不错的,比如用在广告.图像.按钮上,这样可以用来吸引用户眼球从而促使去点击它. 这个Csshake有9个抖动样式,三个状态,如鼠标经过拉动.无限抖动.鼠标悬停拉动. CSS Shake 使用方法: 首先引入css shake的样式表文件.css3按钮:?http://www.hui

如何用css3实现一个图片的抖动或者弹跳

<li onmouseout="this.className='off'"><a href=""><img src="../活力广州_files/admin.png" ></a></li> .off{ -webkit-animation:1s seconddiv; background: transparent; } @keyframes seconddiv{ 0% {transform

解析css3 shake 抖动样式

前端时间做项目发现一抖动按钮挺吸引眼球的,研究了下实现原理,在此和大家分享下: CSS Shake是一个使用CSS3实现的动画样式,使用SASS编写,利用它我们可以实现多种不同样式的抖动效果(如下面的GIF图像).这是一个很微小的动画,但使用得当也是挺不错的,比如用在广告.图像.按钮上,这样可以用来吸引用户眼球从而促使去点击它. 其中有前辈为大家编写好了csshake.css ,大家可以去参考下:http://www.webhek.com/misc/css-shake Csshake有9个抖动样

不错的CSS3图文列表还有鼠标悬停图片抖动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS3新浪微博模板商店列表图片抖动特效&

关于使用css3属性：transform固定菜单位置，在滑动页面时菜单闪现抖动的问题

1 myScroll = new IScroll('#h-s-wrapper', { 2 scrollX: true, 3 scrollY: true, 4 probeType: 3, 5 mouseWheel: true, 6 bounce: false, //锁定边界,不允许拖拽 7 //click: true 8 //preventDefault: false, 9 preventDefaultException: { tagName: /^(INPUT|TEXTAREA|BUTTON|S

CSS3动画之按钮抖动

今天要分享一组代码,当鼠标悬停在按钮上时.按钮抖动!!! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>鼠标悬停在按钮上,按钮抖动</title> </head> <style> .lanren { margin: 200px auto; width: 300px; text-a

css3动画抖动效果

html结构: <div class="top"> <a href="#"> <div> <img src="images/top1.jpg" width="80" height="79" class="to_top" /> </div> </a> <a href="index.html"&

css3 图片抖动效果

@-moz-keyframes tada{ 0%{-moz-transform:scale(1);} 10%,20%{-moz-transform:scale(0.9) rotate(-3deg);} 30%,50%,70%,90%{-moz-transform:scale(1.2) rotate(3deg);} 40%,60%,80%{-moz-transform:scale(1.2) rotate(-3deg);} 100%{-moz-transform:scale(1) rotate(0)

css3动画animate.css的使用

简介 animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake).闪烁(flash).弹跳(bounce).翻转(flip).旋转(rotateIn/rotateOut).淡入淡出(fadeIn/fadeOut)等多达 60 多种动画效果,几乎包含了所有常见的动画效果. 虽然借助 animate.css 能够很方便.快速的制作 CSS3 动画效果,但还是建议看看 animate.css 的代码,也许你能从中学到一些东西. 在使用animate.css的时候通常都会搭配