您当前的位置：首页 > 计算机 > 编程开发 > Html+Div+Css（前端）

CSS3 Animation Cheat Sheet 功能齐全的 CSS 动画库

时间：12-14来源：作者：点击数：

CSS3 Animation Cheat Sheet 是一组预设的动画库，为您的 Web 项目添加各种很炫的动画。所有你需要做的是添加样式表到你的网站，为你想要添加动画效果的元素应用预制的 CSS 类就可以了。

使用方法

CSS3 Animation Cheat Sheet 是一套预置的，即插即用的动画库，您所需要做的就是将样式表添加到您的网站，并将预先制作好的CSS类应用到您想要动画的元素中。

使用 CSS3 @keyFrame，您不必担心元素的位置来容纳动画，它将被动画化。对于使用旧浏览器的用户来说，即使动画不触发，动画元素也将是可见的和到位的。下面是关于如何开始的说明。

将动画样式表添加到网页的<head>元素：

<link rel="stylesheet" href="css/animations.css">

替换 CSS 带有动画样式表所在目录的名称。

向您想要动画的元素添加一个动画类：

<div id="object" class="slideUp">

替换 slideUp 使用所需的动画类。

对于入门动画，您需要通过添加 visibility: hidden 属性设置为动画元素：

#object{
  background-color: #fe5652;

  visibility: hidden;
}

visibility: hidden 用于在激活动画之前隐藏元素。

这些动画的值与元素的大小有关。这意味着更大的图像有更夸张的动画和更小的图像有更微妙的动画。虽然这些动画很容易实现，但是可以随意调整样式表中的值以获得正确的效果。

动态添加动画效果

默认情况下，这些动画将在页面加载时触发--即使元素在页面的下方--但是通过使用jQuery，您可以通过多种方式激活动画。

将jQuery添加到网页的 <head> 元素中：

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

将其添加到 </body> 标记之前，以便在用户滚动到元素时触发动画：

$(window).scroll(function() {
    $('#animatedElement').each(function(){
    var imagePos = $(this).offset().top;

    var topOfWindow = $(window).scrollTop();
      if (imagePos < topOfWindow+400) {
        $(this).addClass("slideUp");
      }
    });
  });

替换 animatedElement 使用所需动画元素的 ID 或 Class 类。
替换 slideUp 动画类。
400 表示元素与屏幕顶部之间的空格。当元素是 400px 从屏幕的顶部。增加这个数字，使动画激活更快。

将其添加到 </body> 标记之前，以在用户单击元素时触发动画：

$('#animatedElement').click(function() {
    $(this).addClass("slideUp");
  });

替换 animatedElement 使用所需动画元素的ID或类。
替换 slideUp 动画类。

考了这些证书的可享个	怎样用 PS 把电子文档
记录在本地电脑部署自	围棋入门教程十天即