<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
/*------------------------------宽度过渡-----------------------------------*/
/*<div class="box"></div>*/
/*.box{*/
/*/!* 给box添加了过渡,时间为2s*!/*/
/*transition: width 2s,background-color 1s;*/
/*/!* transition: 过渡属性 持续时间*!/*/
/*/!* 切记:过渡属性加给 标签本身*!/*/
/*给所有属性添加过渡时间 颜色.宽度等等*/
/*/!*transition:all 1s;*!/*/
/*}*/
/*div:hover{*/
/*width:600px;*/
/*background-color: red;*/
/*}*/
/*---------------------------------位置过渡-----------------------------------*/
/*<div class="box"></div>*/
/*.box{*/
/*position: absolute;*/
/*left:0;*/
/*top:0;*/
/*/!*添加过渡属性*!/*/
/*transition:left 3s,top 1s;*/
/*}*/
/**/
/*.box:hover{*/
/*left:100px;*/
/*top:100px;*/
/*}*/
/*--------------------------------过渡属性详解-------------------------------------*/
/*.box{*/
/*添加过渡*/
/*/!*transition:all 2s;*!/*/
/*/!* 过渡的属性*!/*/
/*transition-property: all;*/
/*/!* 过渡的持续时间*!/*/
/*transition-duration: 2s;*/
/*/!* 运动曲线:linear 线性匀速*/
/*ease-in: 加速 ease-out: 减速 ease-in-out:先加速后减速*/
/**!/*/
/*transition-timing-function:ease-out;*/
/*/!* 过渡延迟执行*!/*/
/*transition-delay: 1s*/
/*transition: 过渡属性 持续时间 运动曲线 延迟执行时间 */
/* 前两个参数是必须的,后两个可以省略*/
/*transition: all 1s ease-in-out 2s;*/
/*}*/
/*.box:hover{*/
/*border-radius: 50%;*/
/*border:3px solid blue;*/
/*background-color: pink;*/
/*}*/
</style>
</head>
<body>
</body>
</html>
css3-宽度 位置 等过渡属性
最新推荐文章于 2023-11-16 19:42:38 发布