HTML连载65-过渡模块的基本使用

  • 内容
  • 评论
  • 相关

一、过渡模块的基本使用

1.*:hover;这个伪类选择器除了可以用在a标签上,还可以用在其他任何标签上。

2.过渡三要素:

(1)必须要有属性发生变化;(2)必须告诉系统哪个属性需要执行过渡效果;(3)必须告诉系统过渡效果持续的时长。

3.注意点:

当多个属性需要同时执行过渡效果的时候,可以使用英文逗号进行隔开。

例如:

transition-property:width,height,background-color;

transition-duration:0.4s,0.8s,4s;

transition-property:width,height,background-color;
transition-duration:0.4s,0.8s,4s;
  <style>
    *{
      margin:0px;
      padding:0px;
    }
    div{
      width:100px;
      height:50px;
      background:red;
      
    }
    div:hover{
      width:300px;
      height:300px;
      background-color:blue;
      /*告诉系统哪个属性将会使用过渡效果*/
      transition-property:width,height,background-color;
      /*告诉系统这个过渡效果需要持续多久*/
      transition-duration:0.4s,0.8s,4s;
    }
........省略代码.......
<div>
</div>

版权声明:若无特殊注明,本文皆为《ice》原创,转载请保留文章出处。

本文链接:HTML连载65-过渡模块的基本使用 - http://iceef.com/?post=362

本文标签:这篇文章木有标签

HTML连载65-过渡模块的基本使用

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论

1条评论
  1. avatar

    1442810249 回复

    滴!学生卡!打卡时间:下午8:28:37,请上车的乘客系好安全带~

    IP数据库文件不存在或者禁止访问或者已经被删除!

    sitemap
    Title - Artist
    0:00