CSS 动画简介：让网站栩栩如生-css教程-PHP中文网

CSS 动画简介：让网站栩栩如生

WBOY

发布： 2024-07-10 21:10:02

转载

1130人浏览过

在网络开发领域，网站的美观对于吸引用户并改善他们的体验至关重要。 css动画对于开发者来说是一个有效的工具。 css 动画使开发人员能够为静态 web 元素注入活力，从而产生具有视觉吸引力的动态用户界面，吸引并取悦访问者。

了解 CSS 动画
CSS 动画使开发人员能够为 HTML 元素添加动画效果，而无需 JavaScript 或任何其他工具。关键帧、过渡和其他 CSS 属性允许开发人员随着时间的推移控制元素外观和行为的许多方面。

关键概念

1.关键帧
CSS 中的关键帧定义了动画序列中某个元素在某些时刻应具有的样式。考虑沿着元素在动画时遵循的路径建立路径点。这些路径点以 0% 到 100% 之间的百分比形式给出，指定元素在动画的每个阶段应如何出现。（阅读更多）

语法和用法
要在 CSS 中定义关键帧，请使用 @keyframes 规则，后跟动画序列的名称。在 @keyframes 块中，您可以指定百分比值（或关键字，例如 from 和 to），以及应在某些点应用的 CSS 属性和值。

这是一个基本示例

@关键帧滑入{
  从 {
    变换：translateX(-100%)；
  }
  到 {
    变换：translateX(0)；
  }
}

登录后复制

在此示例中，滑入动画从左向右滑动一个元素，从视口外部（其宽度的-100%）开始，到其原始位置（0%）结束。

应用关键帧
设置关键帧后，使用 CSS 的动画属性将它们应用到元素。此属性允许您提供动画的名称、持续时间、计时函数、延迟和其他特征。

.元素{
  动画：滑入1秒缓出；
}

登录后复制

滑入动画分配给.element类，持续一秒，使用缓动函数实现平滑加速和减速..

让我们看一个例子
该动画使文本水平抖动。

输出：

立即学习“前端免费学习笔记（深入）”；

text shake horizontally

知网AI智能写作

知网AI智能写作，写文档、写报告如此简单

查看详情

<!DOCTYPE html>
<html>
<头>
    <元字符集='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <标题>页面标题</标题>
    <元名称='视口'内容='宽度=设备宽度，初始比例=1'>
  <风格>
    .摇床{
  字体大小：24px；
  动画：摇动0.5秒cubic-bezier(0.36, 0.07, 0.19, 0.97)无限；
}
分区
{
    宽度：500px；
    保证金：0 自动；
    顶部边距：300px；
}

@关键帧摇动{
  0%, 100% { 变换：translateX(0); }
  25% { 变换：translateX(-5px); }
  50% { 变换：translateX(5px); }
  75% { 变换：translateX(-3px); }
  100% { 变换：translateX(3px); }
}


  </风格>

</头>
<正文>
    <div class="shaker">震动文本</div>
</正文>
</html>

登录后复制

这些 HTML 示例展示了如何将 CSS 关键帧动画包含到您的网页中并创建引人入胜的视觉效果。

CSS动画的动画属性
CSS 动画属性允许开发人员精确控制项目在网页上的移动、变换和转换方式。这些功能使您无需使用 JavaScript 或外部库即可创建吸引人的动画。（点击这里阅读更多css动画示例）
语法：

动画：名称持续时间计时-函数延迟迭代-计数方向填充模式播放状态；

登录后复制

让我们看另一个例子

输出：

立即学习“前端免费学习笔记（深入）”；

bouncing ball

<!DOCTYPE html>
<html lang="en">
<头>
<元字符集=“UTF-8”>
<meta name =“viewport”content =“width = device-width，initial-scale = 1.0”>
<title>三次贝塞尔曲线弹跳动画示例</title>

<风格>

。球 {
    宽度：100px；
    高度：100px；
    背景颜色：#df6412；
    边界半径：50%；
    位置：绝对；
    顶部：50%；
    左：50%；
    动画：弹跳 1.5s 立方贝塞尔曲线(0.68, -0.55, 0.265, 1.55) 无限；
  }

  @关键帧弹跳{
    0%, 100% {
      变换：翻译Y(0)；
    }
    50% {
      变换：translateY(-100px);
    }
  }

</风格>
</头>
<正文>
<div class="ball"></div>
</正文>
</html>

登录后复制

在这个例子中

动画属性通过使用关键帧动画为球元素添加弹跳效果。
动画中使用的cubic Bézier计时函数是由cubic-bezier(0.68, -0.55, 0.265, 1.55)函数定义的，有具体的控制点。
弹跳关键帧动画创建弹跳效果，从初始状态（0％）开始到一半（50％），其中球向上平移100px（translateY（-100px）），然后返回到初始状态（100％） ).
通过调整三次贝塞尔曲线的控制点，您可以自定义弹跳动画的时间和行为以产生所需的结果。

结论
CSS 动画功能为开发人员提供了多种工具来创建视觉上美观且交互式的 Web 体验。通过掌握这些功能并以新的方式集成它们，开发人员可以将他们的设计变为现实并提高用户参与度。 CSS 动画最好通过实验和实践来学习。（阅读有关 CSS 动画的更多信息）

以上就是CSS 动画简介：让网站栩栩如生的详细内容，更多请关注php中文网其它相关文章！