关于CSS的过渡模块

来源：互联网发布：阿里云dns如何设置编辑：程序博客网时间：2024/06/06 09:28

过渡三要素1.1 必须要有属性发生变化1.2 必须告诉系统哪个属性需要执行过渡效果1.3 必须告诉系统过渡效果持续时长

        *{            margin: 0;            padding: 0;        }        div{            width: 100px;            height: 50px;            background-color: red;            /*告诉系统哪个属性需要执行过渡效果*/ 要素2            /*transition-property: width, background-color;*/            transition-property: opacity, height;            /*告诉系统过渡效果持续的时长*/ 要素3            transition-duration: 5s, 5s;            /*transition-property: background-color;*/            /*transition-duration: 5s;*/        }        /*:hover 鼠标悬空这个伪类选择器除了可以用在a标签上, 还可以用在其它的任何标签上*/
     要素1          div:hover{            /*width: 300px;*/            opacity: 0;            height: 200px;        }
注意点当多个属性需要同时执行过渡效果时用逗号隔开即可transition-property: width, background-color;transition-duration: 5s, 5s;
其他属性:
transition-delay  
告诉系统过渡动画需要延迟多久才开始
transition-timing-function
告诉系统过渡动画的运动的速度 linear ease ease-in ease-out ease-in-out

过渡连写 transition: 过渡属性 过渡时长 运动速度 延迟时间;
<style>        *{            margin: 0;            padding: 0;        }        div {            width: 100px;            height: 50px;            background-color: red;            /*transition-property: width,height,background-color;*/            /*transition-duration: 5s,5s,5s;*/            /*transition: width 5s,background-color 5s,height 5s;*/            transition: all 5s;        }        div:hover{            width: 300px;            height: 300px;            opacity:0;            background-color: blue;        }    </style>

过渡连写注意点1 和分开写一样, 如果想给多个属性添加过渡效果也是用逗号隔开即可2 连写的时可以省略后面的两个参数, 因为只要编写了前面的两个参数就已经满足了过渡的三要素3 如果多个属性运动的速度/延迟的时间/持续时间都一样, 那么可以简写为transition:all 5s;

0 0