动画CSS代码:使用HTML和CSS创建熊猫动画

作者 : IT 大叔 本文共3939个字,预计阅读时间需要10分钟 发布时间: 2020-10-9

使用CSS,我们无需使用JavaScript就能创建出精美的HTML元素动画。您可以使用内置的@keyframe规则,该规则通过定义每个关键帧的样式来控制动画序列的步骤。

要使用关键帧,您只需创建一个@keyframes规则并为其命名即可。然后将该名称用作将动画与其关键帧声明进行匹配的属性

在本教程中,我们将向您介绍CSS动画,并仅使用HTML和CSS制作关键帧熊猫动画。

今天,我们将介绍:

  • CSS动画的基础
  • 熊猫动画概述
  • 编写HTML代码
  • 编写CSS代码

CSS动画的基础

在CSS中,动画允许我们逐渐更改元素的样式。首先,我们为动画指定关键帧。关键帧是保持每个元素在给定时间拥有的样式的元素。

使用该@keyframes规则,我们指定CSS样式,动画将逐渐更改为新样式。我们首先必须将所需的动画绑定到元素。

例如,我们可以将元素绑定animation<div>元素,以将背景颜色从红色逐渐更改为黄色。此动画将持续3秒钟。

/* The animation code */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

/* The element to apply the animation to */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 3s;
}

animation-duration属性定义动画完成之前将花费多长时间。默认值为0秒,因此,如果不指定此属性,则动画不会发生。

在创建CSS动画时,我们也可以使用百分比。这使您可以使用更多样式更改。下面是一个示例,其中<div>当动画完成30%,完成50%和完成100%时,元素的背景颜色发生变化。

/* The animation code */
@keyframes example {
  0%   {background-color: red;}
  30%  {background-color: orange;}
  50%  {background-color: green;}
  100% {background-color: blue;}
}

/* The element to apply the animation to */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

CSS动画的属性

现在,我们了解了CSS属性如何与关键帧一起工作的基本知识,让我们讨论可以应用于动画以获得更多功能的主要属性。

animation-name确定动画的名称

div {
  animation-name: panda;
}

animation-delay此属性会延迟动画的开始

animation-delay: 5s;

animation-iteration-count此属性定义动画将运行多少次

animation-iteration-count: 4;

animation-timing-function此属性定义速度曲线,例如:

  • linear:从头到尾相同的速度
  • ease:缓慢开始,然后快速,缓慢结束
  • ease-in:慢启动
  • ease-out:缓慢完成

animation-direction此属性确定动画是向前播放还是向后播放

animation-direction: reverse;

animation-fill-mode当不播放动画时,此属性确定目标元素的样式。这是我们重写CSS规则的方式,即动画在我们播放第一个关键帧之前不会更改元素。

  • none:动画在执行之前不会应用任何样式
  • forwards:元素将保留由最后一个关键帧设置的样式值
  • backwards:元素将获取由第一个关键帧设置的样式值
  • both:动画在两个方向(向前和向后)扩展动画属性

熊猫动画概述

现在,我们应用从CSS动画中学到的知识,并仅使用CSS和HTML从头开始构建自己的动画。我们将制作一个熊猫在田野中行走的简单动画。如果选择,还可以将音乐包括到动画中。在下面查看我们的最终产品。

动画CSS代码:使用HTML和CSS创建熊猫动画插图

这是我们创建动画所需要的:

  1. 文字编辑器
  2. 动画的精灵表文件
  3. 您选择的音频文件
  4. 您的HTML和CSS技能

要创建动画,我们将使用精灵表。Sprite工作表是位图图像文件,其中包含以平铺网格排列的几个较小图形。看一下我们将用于此动画的Sprite表。

动画CSS代码:使用HTML和CSS创建熊猫动画插图(2)

在这里,我们可以看到有12种不同的熊猫图像。将它们放在一起作为动画后,我们将获得熊猫行走动画!为此,我们将创建两个文件Moving_Panda.htmlMoving_Panda.css

我已在此处添加了所有必需文件供您下载。

您还可以从GitHub查看和下载代码。

编写HTML代码

让我们首先开始HTML部分。切记:HTML代码是CSS动画将更改以创建移动效果的代码。您可以在HTML文件中添加CSS代码,但为简洁起见,我们将创建两个不同的文件。

查看下面的代码,然后继续阅读以获取每个部分的详细说明。

<html>
<head>
	<title>Panda Walking Animation</title>
	<link rel="stylesheet" href = "Moving_Panda.css">
</head>

<body>
	<a href="#" onclick="play()">

	<audio id="audio" src="https://git.io/JUW4q" loop="loop"></audio>

	<script>
      function play() 
      {
        var audio = document.getElementById("audio");
        audio.play();
      }
    </script>
	
	<div id="panda"></div>
	<div id="street"></div>
	</a>
</body>
</html>
  1. 首先,我们将添加<html>标记以表示HTML文档的根。
  2. 接下来,我们将添加<head>标签,该标签用于显示元数据(有关该网页的其他任何特定信息,这些信息将不会显示给用户)。在这里,我们<title>将为html文件设置。
  3. 然后,我们添加<link>元素以将CSS文件链接到我们的HTML文件。在此,rel属性代表关系,它是CSS文件的样式表。href用于链接外部CSS文件。
  4. 接下来,我们有我们的主要<body>元素。我们在此处编写要显示在网页上的代码。首先,我们添加<a>元素,该元素触发play()音频的功能。
  5. 接下来,我们添加<audio>元素以获取音频文件。在这里,我们给它一个id。在这里,我们可以看到音频将循环播放。
  6. 接下来,我们为该play()函数编写脚本,该脚本将在用户单击熊猫时触发。脚本将通过获取音频元素id
  7. 接下来,我们为熊猫添加一个分区或一个区域,之后,我们<div>将为街道添加另一个元素。

就是这样了。很简单,对吧?现在,让我们进入CSS文件。

编写CSS代码

现在为CSS动画!查看下面的代码,然后继续阅读以获取每个部分的详细说明。

body
	{
		background: url(https://git.io/JUW4t);
		background-size: cover;
		overflow: hidden;
	}

#panda
	{
		position:relative;
		top:600px;
		background: url(https://git.io/JUW4L); 
		width:250px;
		height:330px;		
		animation:walking_animation 1s steps(12) infinite,move_forward 8s linear infinite;	
	}

@keyframes walking_animation
	{
		0%{background-position:0px;}
		100%{background-position:3000px;}
	}

@keyframes move_forward
	{
		0%{transform:translateX(-100px);}
		100%{transform:translateX(1366px);}
	}

#street
	{
		position:relative;
		top:600px;
		border-bottom:5px groove green;
	}
  1. 首先,我们将为身体添加背景图像。它将覆盖整个屏幕。然后,我们添加overflow:hidden来控制主窗口布局。
  2. 接下来,我们将为熊猫添加一些样式。我们300px从顶部开始设置,然后添加熊猫的实际图像。我们的熊猫文件的宽度为3000px,但我们只想显示12张图像中的第一张图像。为此,我们更改宽度和高度。

第一只熊猫的高度为330px。对于宽度,我们将其每帧分为12个相等的部分,因此宽度为250px

  1. 现在,我们添加动画。第一个动画称为Walking_animation。它会遍历所有12张熊猫图像,但不会偏离其原始位置。为了使其在x轴上移动,我们添加了另一个动画move_forward,该动画将在屏幕上从左向右移动图像。
  2. Walking_animation将浏览所有12张熊猫图像。为此,我们将background-positionfrom从0移到3000px,即图像的宽度。
  3. Move_forward将使用transform属性在x轴上移动熊猫。我们将在处生成熊猫-100px,它将进入屏幕的结尾。
  4. 现在,我们在熊猫下方添加街道。为此,我们只需添加border-bottom,然后设置位置即可。

万岁!现在,您应该可以正常运行熊猫动画了。

免责声明:
1. 本站资源转自互联网,源码资源分享仅供交流学习,下载后切勿用于商业用途,否则开发者追究责任与本站无关!
2. 本站使用「署名 4.0 国际」创作协议,可自由转载、引用,但需署名原版权作者且注明文章出处
3. 未登录无法下载,登录使用金币下载所有资源。
IT小站 » 动画CSS代码:使用HTML和CSS创建熊猫动画

常见问题FAQ

没有金币/金币不足 怎么办?
本站已开通每日签到送金币,每日签到赠送五枚金币,金币可累积。
所有资源普通会员都能下载吗?
本站所有资源普通会员都可以下载,需要消耗金币下载的白金会员资源,通过每日签到,即可获取免费金币,金币可累积使用。

发表评论