成都做网站之向网站添加动画的简单方法

2022-07-15    分类： 网站建设

在您的网站上添加精美的动画是使访问者与您的内容保持互动的好方法。
就像在PowerPoint或Keynote中一样，动画可用于将访问者的注意力集中在重要的内容上。

不幸的是，对于大多数网站所有者来说，添加动画并不像从下拉菜单中选择动画那样容易。

在本文中，我们将引导您完成向网站添加流行动画的最简单方法。

注意：由于网站是建立在不同的平台上的，这些平台使用不同的代码，因此，我们将介绍使用Animate.css的最通用方法，然后使用PageCloud解释一个简单的替代方法，其中不需要任何代码。

什么是CSS动画？
如您所知，CSS代表层叠样式表。Web浏览器使用CSS来确定页面上HTML元素的显示方式。

成都做网站 创新互联是很在行的

CSS动画使您的内容可以从一种样式配置直观地过渡到另一种样式配置。对于缺乏编写代码经验的初学者来说，这可能会令人生畏。

这是一个简化的示例，其中文本使用HTML和CSS在页面上移动：

你好！
h3 {
  动画时间：8 s；
  animation-name：幻灯片
  animation-iteration-count：无限;
}

@keyframes slidein {
 0 ％ {
  左边距：0 ％ ;
 }
 50 ％ {
  左边距：300 px ;
 }
 100 ％ {
  左边距：0 ％ ;
 }
}
查看原始Hello.css 托管与?通过GitHub上
h3 {
  动画时间：8 s；
  animation-name：幻灯片
  animation-iteration-count：无限；
}

@keyframes  slidein {
 0％ {
  左边距：0 ％ ;
 }
 50％ {
  左边距：300 px ;
 }
 100％ {
  左边距：0 ％ ;
 }
}
查看原始Hello.css 托管与?通过GitHub上

h3 {
  动画时间：8 s；
  animation-name：幻灯片
  animation-iteration-count：无限；
}


@keyframes  slidein {
 0％ {
  左边距：0 ％ ;
 }
 50％ {
  左边距：300 px ;
 }
 100％ {
  左边距：0 ％ ;
 }
}
查看原始Hello.css 托管与?通过GitHub上

h3 {
  动画时间：8 s；
  animation-name：幻灯片
  animation-iteration-count：无限；
}


@keyframes  slidein {
 0％ {
  左边距：0 ％ ;
 }
 50％ {
  左边距：300 px ;
 }
 100％ {
  左边距：0 ％ ;
 }
}
查看原始Hello.css 托管与?通过GitHub上

h3 {
  动画时间：8 s；
  animation-name：幻灯片
  animation-iteration-count：无限；
}


@keyframes  slidein {
 0％ {
  左边距：0 ％ ;
 }
 50％ {
  左边距：300 px ;
 }
 100％ {
  左边距：0 ％ ;
 }
}
查看原始Hello.css 托管与?通过GitHub上

h3 {
  动画时间：8 s；
  animation-name：幻灯片
  animation-iteration-count：无限；
}


@keyframes  slidein {
 0％ {
  左边距：0 ％ ;
 }
 50％ {
  左边距：300 px ;
 }
 100％ {
  左边距：0 ％ ;
 }
}
查看原始Hello.css 托管与?通过GitHub上

h3 {
  动画时间：8 s；
  animation-name：幻灯片
  animation-iteration-count：无限；
}


@keyframes  slidein {
 0％ {
  左边距：0 ％ ;
 }
 50％ {
  左边距：300 px ;
 }
 100％ {
  左边距：0 ％ ;
 }
}
查看原始Hello.css 托管与?通过GitHub上
阅读CSS时，您会看到：

动画的总持续时间为8秒（第2行）。
使用的动画是“ slidein”（第3行）。
动画是无限循环的（第4行）。
“ Slidein”从页面的左侧开始（第9行）。
在一半的时间内，标题距页面左侧300px（第12行）。
在动画的结尾，文本回到页面的左侧（第15行）。
如果您想尝试编写一些CSS，则可以使用CodePen修改上面的示例。

探索CSS动画时，您会发现许多属性，这些属性使您可以自定义过渡，以便它们在设计中无缝工作。

另一方面，如果您想通过使用预构建的动画节省时间，则将要使用Animate.css。

什么是Animate.css？

Animate.css是由Daniel Eden创建的CSS动画的跨浏览器库。截至2019年，该库包含77个预构建的动画，使您可以快速制作网站内容的动画。

这是Daniel Eden为样式表中的“ SlideInLeft”动画编写的代码示例：

@ -webkit-keyframes slideInLeft {
 来自 {
  -webkit变换：translate3d（-100 ％， 0 ， 0）;
  变换：translate3d（-100 ％， 0 ， 0）;
  能见度：可见；
 }

 到 {
  -webkit变换：translate3d（0 ， 0 ， 0）;
  变换：translate3d（0 ， 0 ， 0）;
 }
}

@keyframes slideInLeft {
 来自 {
  -webkit变换：translate3d（-100 ％， 0 ， 0）;
  变换：translate3d（-100 ％， 0 ， 0）;
  能见度：可见；
 }

 到 {
  -webkit变换：translate3d（0 ， 0 ， 0）;
  变换：translate3d（0 ， 0 ， 0）;
 }
}
查看原始GitHub 托管的Animate-example.css
@-webkit-keyframes slideInLeft {
 from {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  visibility: visible;
 }

 to {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
 }
}

@keyframes slideInLeft {
 from {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  visibility: visible;
 }

 to {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
 }
}
view rawAnimate-example.css hosted with ? by GitHub

@-webkit-keyframes slideInLeft {
 from {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  visibility: visible;
 }

 to {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
 }
}


@keyframes slideInLeft {
 from {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  visibility: visible;
 }

 to {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
 }
}
view rawAnimate-example.css hosted with ? by GitHub

@-webkit-keyframes slideInLeft {
 from {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  visibility: visible;
 }

 to {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
 }
}


@keyframes slideInLeft {
 from {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  visibility: visible;
 }

 to {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
 }
}
view rawAnimate-example.css hosted with ? by GitHub

@-webkit-keyframes slideInLeft {
 from {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  visibility: visible;
 }

 to {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
 }
}


@keyframes slideInLeft {
 from {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  visibility: visible;
 }

 to {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
 }
}
view rawAnimate-example.css hosted with ? by GitHub

@-webkit-keyframes slideInLeft {
 from {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  visibility: visible;
 }

 to {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
 }
}


@keyframes slideInLeft {
 from {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  visibility: visible;
 }

 to {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
 }
}
view rawAnimate-example.css hosted with ? by GitHub

@-webkit-keyframes slideInLeft {
 from {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  visibility: visible;
 }

 to {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
 }
}


@keyframes slideInLeft {
 from {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  visibility: visible;
 }

 to {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
 }
}
view rawGitHub 托管的Animate-example.css
通过使用该库，您可以避免花费大量时间编写和微调简单的动画。最好的部分？该库是开源的，可以免费使用！

如何在标准Web开发中使用Animate.css
步骤1.  安装Animate.css样式表或将其上传到文件管理器。这将根据您使用的平台而有所不同。另外，您可以使用Content Delivery Network（CDN）版本来避免将文件上传到Web服务器。

第2步。在网页或模板的链接Animate.css样式表。例如：


< 头>  
< 链接 rel =“ 样式表 ” href =“ animate.min.css ” >


< 头>
< 链接 rel =“ 样式表 ” href =“ https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css ” >
查看原始GitHub 托管于?的Animate-css-head-example.html

< 头 >  


view rawAnimate-css-head-example.html hosted with ? by GitHub

 


view rawAnimate-css-head-example.html hosted with ? by GitHub

 


view rawAnimate-css-head-example.html hosted with ? by GitHub

 


view rawAnimate-css-head-example.html hosted with ? by GitHub

 


view rawAnimate-css-head-example.html hosted with ? by GitHub

 


< 头>
< 链接 rel = “样式表” href = “ https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css ” >
查看原始GitHub 托管于?的Animate-css-head-example.html
步骤3.将正确的类名称添加到您的元素中

您必须在动画名称之前添加“动画”。您还可以包括“无限”类，以使动画无限循环。 

例如： 

< h1  class =“ 动画无限弹跳延迟2秒 ” >您好！
查看原始GitHub 托管?的h1-class-example.html
< h1  class = “动画无限弹跳延迟-2s ” >您好！
查看原始GitHub 托管?的h1-class-example.html
< h1  class = “动画无限弹跳延迟-2s ” >您好！
查看原始GitHub 托管?的h1-class-example.html
< h1  class = “动画无限弹跳延迟-2s ” >您好！
查看原始GitHub 托管?的h1-class-example.html
< h1  class = “动画无限弹跳延迟-2s ” >您好！
查看原始GitHub 托管?的h1-class-example.html
< h1  class = “动画无限弹跳延迟-2s ” >您好！
查看原始GitHub 托管?的h1-class-example.html
< h1  class = “动画无限弹跳延迟-2s ” >您好！
查看原始GitHub 托管?的h1-class-example.html
熟悉CSS之后，您可以修改样式表中找到的任何属性，以匹配您自己的选项。

如果您希望特定元素与默认动画不同，则可以添加修饰符以更改属性，例如动画的播放时间，延迟或播放次数：

例如：

。elementNAME {
 动画时间：3 s；
 动画延迟：2 s；
 animation-iteration-count：无限;
}
查看原始GitHub 托管于?的Element-animate.css
.elementNAME {
 动画时间：3 s；
 动画延迟：2 s；
 animation-iteration-count：无限；
}
查看原始GitHub 托管于?的Element-animate.css

.elementNAME {
 动画时间：3 s；
 动画延迟：2 s；
 animation-iteration-count：无限；
}
查看原始GitHub 托管于?的Element-animate.css

.elementNAME {
 动画时间：3 s；
 动画延迟：2 s；
 animation-iteration-count：无限；
}
查看原始GitHub 托管于?的Element-animate.css

.elementNAME {
 动画时间：3 s；
 动画延迟：2 s；
 animation-iteration-count：无限；
}
查看原始GitHub 托管于?的Element-animate.css

.elementNAME {
 动画时间：3 s；
 动画延迟：2 s；
 animation-iteration-count：无限；
}
查看原始GitHub 托管于?的Element-animate.css

.elementNAME {
 动画时间：3 s；
 动画延迟：2 s；
 animation-iteration-count：无限；
}
查看原始GitHub 托管于?的Element-animate.css
就是这样！

通过执行上述步骤，可以将动画添加到有权访问源代码的任何网站上的任何元素。

要了解有关自定义CSS动画以及Java语言可以做什么的更多信息，我们建议您看看w3schools和GitHub。

但是，如果Web开发不是您的专长，那么还有诸如PageCloud之类的更简单的替代方法，您根本不需要处理代码。

如果您不熟悉网站建设，我们绝对建议您尝试一下。 

方法1

步骤1-从此处下载Animate.css文件；
第2步 -登录到PageCloud并打开要编辑的页面；
第3步  -将下载的“ Animate.css”文件拖放到页面上；
第4步  -选择要设置动画的元素，然后在编辑菜单中单击“高级”；
第5步  -添加“动画” +所需动画的名称（例如动画反弹）；
第6步 -保存并查看您的实时网站。

方法2

步骤1-登录到PageCloud并打开要编辑的页面；
第2步 -将“ 滚动动画文件 ”拖到您的页面上；
第3步 -选择要设置动画的元素，然后在编辑菜单中单击“高级”；
第4步 -将所需动画的名称添加到class字段；
第5步 -保存并查看您的实时网站。

瞧！你完成了。

专家提示：巧妙地使用动画可以提升几乎任何设计。但是，太多的动画可能会分散注意力并关闭潜在客户。如有疑问，少即是多。如果您想真正精通动画，我们建议您查阅《动画手册》。

摘要
无论您有使用CSS的经验如何，都可以按照本文中的说明进行操作，以向任何网站添加出色的动画。

但是，动画只是网站用来显示令人惊叹的内容的众多CSS属性之一。您网站上的几乎每个元素都需要一些CSS才能正确显示：文本，背景，图像，视频...

如果您不想花几天时间学习或摆弄代码，我们建议您尝试使用像PageCloud这样的网站构建器，它提供了一个用户友好的界面，使您可以自定义网站的外观而无需编写任何代码。

最重要的是，PageCloud提供了世界的支持团队，即使在您免费试用期间，我们也乐于回答您的任何问题！

当前文章：成都做网站之向网站添加动画的简单方法
文章链接：https://www.cdcxhl.com/news/179331.html

成都网站建设公司_创新互联，为您提供品牌网站设计、商城网站、做网站、营销型网站建设、电子商务、网页设计公司

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

成都seo排名网站优化

网站建设知识

同城分类信息