好玩的CSS抖动样式 – CSS Shake ,支持 react

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

好玩的CSS抖动样式 – CSS Shake ,支持 react_第1张图片
来源自网络
好玩的CSS抖动样式 – CSS Shake ,支持 react_第2张图片
来源自网络
好玩的CSS抖动样式 – CSS Shake ,支持 react_第3张图片
来源自网络

安装:

三种方法:

$ git clone https://github.com/elrumordelaluz/csshake.git

$ bower install csshake

$ npm i csshake

使用:

包括CSS文件,然后将类应用于元素。

首先引入css shake的样式表文件。

  或

添加抖动样式,一共9种,也可以看DEMO对应添加即可:

另外我还能通过.freeze,.shake-constant&.hover-stop来控制状态,具体自己试下哦!


想要更多特制的效果,可以引入下面的文件:

效果如下:

好玩的CSS抖动样式 – CSS Shake ,支持 react_第4张图片
来源自网络

CSS Shake在 SASS 预留了参数方法,可以自己修改参数获得想要的效果,具体方法如下:

.my-custom-shake {

    @include do-shake(

        $name: 'my-custom-shake', /* {String} is the name for the keyframes animation */

        $h: 5px, /* {Number} is the max number for random to assign in x axis */

        $v: 5px, /* {Number} is the max number for random to assign in y axis */

        $r: 3deg, /* {Number} is the max number for random rotation */

        $dur: 100ms, /* {Number} is the animation-duration time value */

        $precision: .02, /* {Number} is the precision of the keyframes animation. For             example .02 generates keyframes each 2% and .1 each 10%. The calculation is             $step: 100 * $precision; */

        $opacity: false,

        $q: infinite, /* {String} is the animation-iteration-count value */

        $t: ease-in-out, /* {String} animation-timing-function value */

        $delay: null, /* {Number} animation-delay time value */

        $chunk: 100%); /* {Number} is the part of the keyframes where apply the animation             */

}

/* Example shake-crazy */

.shake-crazy {

        @include do-shake('shake-crazy', 40, 40, 20, 100ms, .1, $opacity: true);

}


CSShake作为React功能组件

npm i --save reshake

import React, { Component } from 'react'

import { Shake } from 'reshake'

class App extends Component {

    render () {

        return (

            

                h={53}

                v={5}

                r={3}

                dur={300}

                int={10}

                max={100}

                fixed={true}

                fixedStop={false}

                freez={false}>

            

          )

    }

}

更多...

为每个动画类型分离的组件 见 地址 详情

附:手摸手玩转经典图表类库 - Echarts3
       手摸手带你玩转sublime text 3 安装配置

好玩的CSS抖动样式 – CSS Shake ,支持 react_第5张图片

声明:部分内容从网络获取,如有侵权行为,请与作者联系,作者将于2日内删除。

你可能感兴趣的:(好玩的CSS抖动样式 – CSS Shake ,支持 react)