transition-property属性(CSS设置)

发布时间：2021-11-22 09:51 所属分类：热门主题浏览次数：

　　transition-property属性

　　csstransition-property特点用于规则运用过渡作用的CSS特点的称号，其语法是transition-property:none|all|property；过渡作用通常在用户将鼠标指针浮动到元素上时发生。

　　csstransition-property特点怎么用？

　　作用：transition-property特点规则运用过渡作用的CSS特点的称号。（当指定的CSS特点改动时，过渡作用将开端）。提示：过渡作用通常在用户将鼠标指针浮动到元素上时发生。

　　语法：

　　transition-property:none|all|property;

　　阐明：

　　none没有特点会获得过渡作用。

　　all所有特点都将获得过渡作用。

　　property界说运用过渡作用的CSS特点称号列表，列表以逗号分隔。

　　注释：请始终设置transition-duration特点，否则时长为0，就不会发生过渡作用。

　　csstransition-property特点运用示例

　　请把鼠标指针移动到蓝色的div元素上，就可以看到过渡作用。

　　注释：本例在InternetExplorer中无效。

　　CSS设置

　　1、绝对定位+margin：auto

　　<styletype="text/css">

　　.wrp{background-color:#b9b9b9;width:240px;height:160px;}

　　.box{color:white;background-color:#3e8e41;width:200px;height:120px;overflow:auto;}

　　.wrp1{position:relative;}

　　.box1{margin:auto;position:absolute;left:0;right:0;top:0;bottom:0;}</style><divclass="wrpwrp1">

　　<divclass="boxbox1">

　　<h3>完全居中层1：</h3>

　　<h3>开发工具【WeX5】：高性能轻架构、开源免费、跨端、可视化</h3>

　　</div></div>1234567891011121314151617181920212223242526

　　效果：

　　实现原理：利用css定位规则，设置左右、上下方向定位为0，margin为auto，让css根据定位计算margin值，用hack的方式实现居中。居中块（绿色）的尺寸需要可控,因为css计算margin时也需要参考尺寸值，由于四周为0，所以自动计算的尺寸是与父容器一样的。无论是设置width、height或者是max-height、max-width，都是让尺寸不会扩大到与父级一样。

　　2、绝对定位+margin反向偏移

　　</style><styletype="text/css">

　　.wrp2{position:relative;}

　　.box2{position:absolute;top:50%;left:50%;margin-left:-100px;/*(width+padding)/2*/

　　margin-top:-75px;/*(height+padding)/2*/

　　}</style><divclass="wrpwrp2">

　　<divclass="boxbox2">

　　<h3>完全居中方案二：</h3>

　　<h3>开发工具【WeX5】：高性能轻架构、开源免费、跨端、可视化</h3>

　　</div></div>12345678910111213141516