17.Css——过渡

Css过渡

 

 

具体用法如下:

<style type="text/css">

p{

       width:100px;                                                       

       height:100px;                                                      

       background-color:black;                                     

}                                                                                

  【此时利用一个冒号选择器,将长100宽100 的黑色矩阵在戍边划过的瞬间变成长200宽200的橙色矩阵,在冒号中添加属性,

   改变变换时候的模式。】

p:hover{

       width:200px;

       height:200px;

       background-color:orange;

transition-delay:500ms;   延迟时间,即需要500ms的时间才能触发这个反应

transition-duration:500ms;  间接过渡,即完成这个转换需要时间是500ms

-webkit-transition-duration:_;  为了让谷歌和Safari浏览器能够正常使用

-o-transition-duration:_;欧朋浏览器

-moz-transition-duration:_;火狐浏览器

-ms-transition-duration:_;IE浏览器

transition-property:background-color; 长度瞬间完成变换,颜色缓慢

                             :width;宽度慢慢变换,长度和颜色瞬间完成变换

transition-timing-function: ease;开始慢后来快

                                         ease-in;开始快后来慢

                                         ease-out;很快很快原来越慢

                                         ease-in-out;前面后面快,中间比较慢

                                         liner;

}

发布了63 篇原创文章 · 获赞 41 · 访问量 1135

猜你喜欢

转载自blog.csdn.net/weixin_46319702/article/details/105103110