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

发布于 2020-07-26 09:21:37 字数 2596 浏览 1290 评论 0

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 动画类。

相关链接

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84935 人气
更多

推荐作者

遥远的她

文章 0 评论 0

情深如许

文章 0 评论 0

18120987591

文章 0 评论 0

女皇必胜

文章 0 评论 0

13002228876

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。