提供Discuz ,ECShop ,PHPCMS ,帝国CMS ,CSS教程 ,PHP教程 ,DedeCMS ,WordPress ,HTML教程等cms问题查询.
当前位置: CSS教程 > CSS的transition属性怎样运用【css教程】,transition属性

CSS中的transition过渡属性是能够用于完成动画的,本篇文章就来给人人引见CSS中过渡属性的用法,下面我们来看细致的内容。

我们先来看一下transition过渡属性是什么?

transition属性是在表现时候经由的变化时运用,细致来说,你能够经由过程点击光标逐步变动背景色彩等,另有其他的animation 属性,但过渡属性用于举行相对简朴的变化时运用。

下面我们就来细致看看transition属性的用法

我们先来看看transition属性的参数

-webkit-transition-property: 变化的属性(background属性等);
-webkit-transition-duration: 变化的秒数;
-webkit-transition-timing-function: 变化的要领;

-webkit-transition-timing-function的有以下的值

default
linear: 匀速
ease-in: 逐步加快
ease-out: 逐步减速
ease-in-out: 逐步加快和逐步加快
cubic-bezier: 自定义

也能够运用以下的缩写

-webkit-transition: 变化的属性 変化的秒数 変化的要领;

我们来看细致的示例

代码以下

HTML代码

<div id="demo"></div>
<br>
<div id="demo2"></div>

CSS代码

#demo {
  height: 100px;
  width: 200px;
  background: rgb(255, 100, 100);
  -webkit-transition-property: background;
  -webkit-transition-duration: 1s;
  -webkit-transition-timing-function: linear;
}
#demo:hover {
  background: rgb(100, 255, 100);
}
#demo2 {
  height: 100px;
  width: 200px;
  background: rgb(255, 100, 100);
  -webkit-transition: background 2s ease-in-out;
}
#demo2:hover {
  background: rgb(100, 100, 255);
}

运转结果

实行上述代码,将显现以下结果

将鼠标光标放在两个赤色的框上,色彩将会逐步转变

本篇文章到这里就悉数完毕了,更多有关于transition属性的内容人人能够移步到ki4网的CSS3视频教程栏目中进一步的进修!!!

以上就是CSS的transition属性怎样运用的细致内容,更多请关注ki4网别的相干文章!

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

标签:

上一篇:

下一篇:

相关推荐

0 条评论关于"CSS的transition属性怎样运用【css教程】,transition属性"

最新评论

    暂无留言哦~~

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线