让你的网页动起来的秘诀

最新推荐文章于 2023-03-21 01:39:12 发布

weixin_34174322

最新推荐文章于 2023-03-21 01:39:12 发布

阅读量186

点赞数

原文链接：https://yq.aliyun.com/articles/315816

版权

今天隆重的推荐一个纯CSS实现的现代化具象派史诗级大作。
CSShake.一款能让你的网页元素舞动起来的神奇样式表。

样例Demo

说的再多不如来张图片给力，下面我强烈建议看到这篇文章的童鞋看看下面的这个网站csshake展示页面

怎么用

CSShake使用起来也是很简单的，我们既可以将源码下载下来，将这些样式文件添加到我们要进行添加样式的网页。也可以使用CDN的方式。

虽然使用CDN会很方便，不用管理那么多的路径及配置，但是由于需要访问外网，所以速度上可能稍有下降。这个看自己的需求吧。由于是演示，所以我这里使用CDN的方式。

引用样式文件

我们只需要在HEAD标签中添加下面的link标签

<!-- To include only some csshake animations use this syntax -->
    <link rel="stylesheet" type="text/css" href="csshake-slow.min.css">
    <!-- or from surge.sh -->
    <link rel="stylesheet" type="text/css" href="http://csshake.surge.sh/csshake-slow.min.css">

应用样式文件

应用起来也是相当的简单，比如我们想把震动效果赋给一个DIV，就可以采用下面的方式。

  <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>

或者通过样式类来控制动画状态效果。

<!-- Freeze the animation at that point when :hover -->
<div class="shake shake-freeze"></div>
<!-- Continuous animation instead on :hover -->
<div class="shake shake-constant"></div>
<!-- and stop when :hover -->
<div class="shake shake-constant shake-constant--hover"></div>

当然了，定制自己的需求也是很方便的。如下：

.my-custom-shake {
  @include do-shake(
        $name: 'my-custom-shake', 
        $h: 5px, 
        $v: 5px, 
        $r: 3deg, 
        $dur: 100ms, 
        $precision: .02, 
        $opacity: false, 
        $q: infinite, 
        $t: ease-in-out, 
        $delay: null,
        $chunk: 100%);
}

$name {String} is the name for the keyframes animation

$h{Number} is the max number for random to assign in x axis

$v{Number} is the max number for random to assign in y axis

$r{Number} is the max number for random rotation

$dur {Number} is the animation-duration time value

$precision {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{Boolean} to apply random animation also in the opacity property

$q {String} is the animation-iteration-countvalue

$t{String} animation-timing-function value

$delay {Number} animation-delay time value

$chunk{Number} is the part of the keyframes where apply the animation

小例子

下面我们来看一个小例子吧。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- To include only some csshake animations use this syntax -->
    <link rel="stylesheet" type="text/css" href="csshake-slow.min.css">
    <!-- or from surge.sh -->
    <link rel="stylesheet" type="text/css" href="http://csshake.surge.sh/csshake-slow.min.css">
    <title>CSS Shake Demo</title>
</head>
<body>
    <!-- To shake constant -->
    <div class="shake-slow shake-constant">
        <img src="http://imglf.nosdn.127.net/img/aDh5T0FJOFdnWmRhNFpBMW83bGRLSWp4K1NWUXR3ZFlvcVVja2JoUmdZTkg0SEtaMGxIOThRPT0.jpg" width="200">
        <br></div>
    <!-- and stops on :hover -->
    <div class="shake-slow shake-constant shake-constant--hover">
        <img src="http://imglf2.nosdn.127.net/img/RWxQT0dreUkwQXRQdzJOVU5nZG82THZjeG5TOVFmZHd1UGtOYnc4WVY4WHp6dUw1TlJXSjV3PT0.jpg" width="200">
        <br></div>
    <!-- Freeze animation at that point when :hover -->
    <div class="shake-crazy shake-freeze shake-slow">
        <img src="http://imglf2.nosdn.127.net/img/WDRSLzY1VHdzRGUyNzdZc1F0WFZWSTB0L1BEd2tkKzZJR3B3ZVUyYS9sNFRmVDNDcTB5UGRRPT0.jpg" width="200">
        <br></div>
    <span class="shake-slow">我是带有震动效果的文字！</span>
    <br>
    <ul class="shake-trigger shake">
        <li class="shake-slow">列表一</li><br>
        <li class="shake-chunk">列表二</li><br>
        <li>列表三</li><br>
        <li class="shake-hard">列表四</li><br>
        <li>列表五</li><br>
        <li class="shake">列表⑥</li><br>
    </ul>
</body>
</html>

还在等什么，赶紧给你的网页加上点现代元素吧。

weixin_34174322

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
让你的网页动起来的秘诀

今天隆重的推荐一个纯CSS实现的现代化具象派史诗级大作。 CSShake.一款能让你的网页元素舞动起来的神奇样式表。样例Demo说的再多不如来张图片给力，下面我强烈建议看到这篇文章的童鞋看看下面的这个网站csshake展示页面怎么用CSShake使用起来也是很简单的，我们既可以将源码下载下来，将这些样式文件添加到我们要...
复制链接

扫一扫