北京SEO百度排名_网络推广_网站建设_专业网站优化【启点网络】

网站制作SEO优化推广10年,客户1200+

使用CSS动画和转换将您的网页带入生活【北京SEO顾问】

文章分类: SEO方案资讯 文章来源: 北京启点网络 文章作者: 北京SEO顾问 时间: 2018-05-14 13:54:25浏览热度:


[导读]:

北京网络优化由于互联网上可用的高质量内容,现在用户对用户界面的期望很高。随着网站界面的不断发展以及他们背后的技术。负责增强网站界面的一个主要组件是CSS。

北京SEO

网站设计不断演变。从响应式设计,漂亮的印刷术,完美的颜色编码方案,插图,网站创作者每天都会提出新的想法和设计。北京网络优化由于互联网上可用的高质量内容,现在用户对用户界面的期望很高。随着网站界面的不断发展以及他们背后的技术。负责增强网站界面的一个主要组件是CSS。

北京SEO顾问认为CSS或层叠样式表负责通过定义样式,布局和设计来使网站具有更多互动性。CSS的最新标准CSS3引入了动画和转换的概念,通过为用户界面增加额外的深度来增强用户体验。通过CSS动画和转换,您可以讲述故事,创建奢华效果,并使用户与您网站的互动非常有效和有意义。动画只是一个模拟运动的过程,它是通过一系列像图片一样的对象来显示的。另一方面,过渡基本上是一个对象从一个状态变为另一个状态的过程。但是,当我们谈论网页动画时,基本上有三种类型 - CSS动画或关键帧动画,CSS过渡和JavaScript动画。

CSS动画

要在CSS中创建动画,我们需要在某段时间内更改元素(如图像或文本)的CSS属性。我们可以根据需要多次更改元素的属性,并可以设置动画的持续时间。

CSS动画是用关键帧定义的。这些关键帧是动画的中间点。所有的CSS动画都是在@keyframes规则下指定的。这些关键帧指定了元素在特定时刻发生了什么,

  • 哪些属性正在改变
  • 元素动画时
  • 元素如何动画

您可以将自己的关键帧定义为:

1 @keyframes animation_name
2 {
3 from{ property: value; }
4 to{ property: value; }
5 }

这里'to'和'from'指定动画的开始和结束。我们也可以在开始和结束之间的中间时刻指定动画,如下所示:

1 @keyframes name
2 {
3 0%{ property: value; }
4 50%{ property: value; }
5 100%{ property: value; }
6 }

这里0%表示动画的开始,100%表示动画结束,50%表示开始和结束之间的变化。但是,我们如何告诉浏览器动画应该发生多少时间?我们在某些动画属性的帮助下做到这一点这些动画属性与要动画的元素相关联。例如:

1 element_name
2 {
3 animation_property: value;
4 style_property: value;
5 }

这里的元素可以是任何HTML标签,例如div,span,img,p等,并且style_property是任何CSS样式属性,比如background_color,width,height等。现在让我们看看一些动画属性的细节。

  1. @keyframes:关键帧用于指定上面讨论的动画代码。
  2. 动画名称:使用@keyframes指定的名称是动画的名称。该名称用于引用具有要动画元素的关键帧。
  3. animation-duration:用于指定动画的持续时间,以秒或毫秒为单位。例如,如果我们将其设置为5秒,那么动画只会运行5秒。如果我们没有设置这个属性,那么动画将不会运行,因为它的默认值是0。
  4. 动画延迟:我们可以通过指定动画延迟时间来延迟动画的开始。例如,如果要在浏览器加载页面5秒后启动动画,只需将animation-delay设置为5秒即可。
  5. animation-direction:我们可以告诉浏览器动画是反向移动还是交替循环。例如,如果您希望动画从头到尾运行,则将animation-duration的值设置为“正常”。如果你希望它从头到尾运行,那么只需将该值设置为“反向”即可。
  6. animation-fill-mode:我们可以指定动画不是用这种模式播放时的元素样式,即当动画被延迟或完成时,元素的样式应该是什么样的。
  7. animation-iteration-count:动画可以播放的次数由此属性表示。例如,如果您想要将动画设置为1,或者如果您希望动画可以永久播放,只需将其设置为“无限”即可。
  8. animation-timing-function:该属性用于指定动画的速度曲线,如线性,加速或去加速。
  9. 动画:它是设置所有动画属性的速记属性。

例如,您可以使用以下代码片段为弹跳对象设置动画效果。请注意动画的速记符号如何使用。

1 @keyframes slide {
2  0% {
3   left0;
4   top0;
5  }
6  50% {
7   left244px;
8   top100px;
9  }
10  100% {
11   left488px;
12   top0;
13  }
14 }
15  
16 .stage:hover .object {
17  animation: slide 2s linear;    /*shorthand animation property*/
18 }
19  
20 .object {
21  background#2db34a;
22  border-radius: 50%;
23  height50px;
24  positionabsolute;
25  width50px;
26 }

转变

基于特定的时序函数(也称为缓动函数),CSS转换适用于元素的特性,并持续一段时间通过定时功能,我们指的是一种功能,可以将元素的属性从一种状态改变为另一种状态,如线性级数,加速度或去加速度。您可能已经注意到图像在悬停时滑动或转换为另一图像,或者鼠标单击时播放声音。这些都是可以使网站互动的转换效果。

简化功能对于创建转换很重要。他们指定了属性将如何改变。它们还可以改变房产价值从转折的起点到终点的变化率。您可以按照以下方式应用转场:

1 element
2 {
3 style_property: value;
4 transition_property: value;
5 }

这里元素指定你想要转换的HTML元素,如div,H1,img等。style_property是应用于该元素的CSS样式。现在让我们看看一些转换属性

  • transition-property:过渡效果将始终应用于元素的CSS属性,如宽度,高度,颜色或形状。此属性的值指定元素的CSS属性。只要此属性发生变化(例如在鼠标悬停或点击时),就会启动过渡效果。
  • 转换定时功能:这是应用于元素的易用功能。该属性用于指定转换的速度曲线,如易入,易出,线性等。
  • transition-duration:它就像动画持续时间属性一样。它用于以秒或毫秒为单位指定过渡效果的持续时间。例如,如果我们将其设置为5秒,那么过渡将会在5秒内完成。如果我们不设置这个属性,那么根本就不会有任何转换,因为它的默认值是0。
  • transition-delay:使用此属性,我们可以指定延迟转换效果的持续时间。例如,如果要在鼠标悬停5秒后启动效果,只需将transition-delay设置为5秒即可。
  • 过渡:这是将所有上述过渡属性一起设置的简写属性。

例如,以下代码将更改鼠标悬停时div元素的宽度。请参阅此处应用的过渡速记属性。

1 div {
2   width50px;
3   height50px;
4   backgroundblue;
5   transition: height 4s;     /*transition shorthand on height for 4 seconds*/
6 }
7 div:hover {
8   height200px;      /* increase height on mouse hover */
9 }

动画与转换

动画与转换

动画和转换之间的相似之处
  • 过渡和动画都用于可视化元素属性的更改。
  • 我们可以指定过渡和动画应该发生多长时间的持续时间。
  • 我们有一些定时功能来改变转换和动画从一个值到另一个值的速率。
动画和转换之间的区别
  • CSS转换是被动的他们需要由用户触发。另一方面,动画在页面加载到浏览器时运行。他们不需要被触发。
  • 转场运行一次然后停止。然后,当动画可以循环时,我们必须一次又一次地触发它们他们可以自己停下来然后再开始。
  • 浏览器负责转换本身。我们只需要指定转换的开始和结束。我们可以设置过渡效果,但是我们不能改变其间的过渡变化率。例如,如果图像在鼠标悬停的情况下滑动,我们只会在我们将鼠标悬停在其上时淡入或淡出。
  • 另一方面,动画提供了更改开始和结束之间属性的灵活性。这发生在关键帧的帮助下。例如,我们可以将图像的颜色在前5秒内设置为红色,然后在接下来的5秒内将其设置为蓝色,然后在接下来的5秒内将其设置为绿色,并在动画的最后5秒内设置为黄色。因此,我们可以控制动画。
供应商前缀

所有的CSS3功能都不支持每个浏览器。因此,我们为特定浏览器(如-webkit-(Safari),-moz-(Firefox)或-o-(Opera))使用CSS属性的前缀。这允许浏览器标记添加对该CSS3功能的支持。这些前缀称为供应商前缀CSS浏览器前缀因此,我们需要将供应商前缀以及动画和转换属性也放在一起。例如,请考虑以下代码,并了解如何使用Safari的供应商前缀:

1 div {
2 width100px;
3 height100px;
4 backgroundred;
5  
6 /* For Safari 3.1 to 6.0 */
7 -webkit-transition-property: width;
8 -webkit-transition-duration: 2s;
9 -webkit-transition-timing-function: linear;
10 -webkit-transition-delay: 1s;
11  
12 /* Standard syntax */
13 transition-property: width;
14 transition-duration: 2s;
15 transition-timing-function: linear;
16 transition-delay: 1s;
17 }

北京SEO顾问通过使用-prefix-free等库,可以避免这种喧嚣它是一个JavaScript库,它会将当前浏览器的前缀添加到任何CSS代码中。查看网上提供的许多此类库。

网站开发人员可以应用动画和转换来吸引用户访问您的网站。北京SEOER在使用它们来增强表单,通知,背景图形,图像,图表,涂鸦,号召性用语按钮以及不用的按钮。只要使用你的想象力,你就可以找到让你的用户惊叹的方法。请记住,即使您的网站发生小的变化,也可以使它看起来更好,并增加其价值。那么,北京SEO顾问你有没有在你的网站上使用动画呢?分享您对使用动画和转场的看法。

标题:使用CSS动画和转换将您的网页带入生活【北京SEO顾问】
地址:http://www.seozoe.com/news/zx/79.html _北京SEO
声明:非特殊说明,本文为本站原创(翻译)文章,转载请注明:本文转自:北京SEO启点网络_启点


请您留下您的小脚印:

服务支持

我们珍惜您每一次在线询盘,有问必答,用专业的态度,贴心的服务。

让您真正感受到我们的与众不同!

合作流程

合作流程

网站制作流程从提出需求到网站制作报价,再到网页制作,每一步都是规范和专业的。

常见问题

常见问题

提供什么是网站定制?你们的报价如何?等网站建设常见问题。

常见问题

售后保障

网站制作不难,难的是一如既往的热情服务及技术支持。我们知道:做网站就是做服务,就是做售后。