CSS3 Animation Cheat Sheet 功能齐全的 CSS 动画库 - 文章教程

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

发布于 2020-07-26 字数 3187 浏览 1206 评论 0

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

CSS3 Animation Cheat Sheet 功能齐全的 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 动画类。

相关链接

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

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

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

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

2583 文章
29 评论
84935 人气
更多

推荐作者

佚名

文章 0 评论 0

cs163v

文章 0 评论 0

Mr Rock

文章 0 评论 0