zoukankan      html  css  js  c++  java
  • 炫酷的CSS3抖动样式:CSS Shake

    CSS Shake是一个使用CSS3实现的动画样式,使用SASS编写,利用它我们可以实现多种不同样式的抖动效果(如下面的GIF图像):

    炫酷的CSS3抖动样式:CSS Shake

    这是一个很微小的动画,但使用得当也是挺不错的,比如用在广告、图像、按钮上,这样可以用来吸引用户眼球从而促使去点击它。

    这个Csshake有9个抖动样式,三个状态,如鼠标经过拉动、无限抖动、鼠标悬停拉动。

    CSS Shake 使用方法:

    首先引入css shake的样式表文件。
    css3按钮:​http://www.huiyi8.com/css3/anniu/
    给你的DOM元素添加shake class样式。抖动样式,一共9种,可以看Demo的效果对应添加你想要的css。

    另外我还能通过 .freeze, .shake-constant & .hover-stop 来控制状态,大家可以试试看效果!

    附注:Sass是一款前端CSS框架,它扩展了CSS3,增加了规则、变量、混入、选择器、继承等等特性。SASS是一种CSS的开发工具,生成良好格式化的CSS代码,并且还提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护。SASS是Ruby语言写的,但是两者的语法没有关系。不懂Ruby,照样使用。只是必须先安装Ruby,然后再安装SASS。

    demo请看:http://elrumordelaluz.github.io/csshake/

    1. [图片] css-shake-demo.gif    

    2. [代码]首先引入css shake的样式表文件。     
    <link type="text/css" href="csshake.css">
    3. [代码]抖动样式     
    <div class="shake"></div>
    <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>

  • 相关阅读:
    PAT乙级-1037. 在霍格沃茨找零钱(20)
    PAT乙级-1041. 考试座位号(15)
    PAT乙级-1047. 编程团体赛(20)
    css3 实现 背景图片显示
    块级元素与行内元素(内联元素)的区别和联系
    JS变量
    导航条菜单的制作 滑动缓慢
    HTML中Id和Name的区别
    全面理解Javascript中Function对象的属性和方法
    理解盒子模型
  • 原文地址:https://www.cnblogs.com/xkzy/p/4087502.html
Copyright © 2011-2022 走看看