css3 变换 transition

2024-01-02 17:51:37
.box1 {
            width: 200px;
            height: 200px;
            background-color: orange;
            opacity: 0.5;
            /* 设置哪个属性需要过渡效果 */
            transition-property: width,height;

            /* 让所有能过渡的属性,都过渡 */
            transition-property: all;

            /* 分别设置时间 */
            /* transition-duration: 1s,1s,1s; */
            /* 设置一个时间,所有人都用 */
            transition-duration: 1s;
        }
        .box1:hover {
            width: 400px;
            height: 400px;
            background-color: green;
            transform: rotate(45deg);
            box-shadow: 0px 0px 20px black;
            opacity: 1;
        }

transition-property: 设置哪些属性要发生变换

不是所有的属性都能过渡,值为数字,或者值能转为数字的属性,都支持过渡,否则不支持
过渡。
常见的支持过渡的属性有:颜色、长度值、百分比、z-index 、opacity 、2D 变换属
性、3D 变换属性、阴影。

margin,padding

不使用过度的话,就会闪的一下变到hover设置的样式。

transition-duration


作用:设置过渡的持续时间,即:一个状态过渡到另外一个状态耗时多久。
常用值:
1. 0 :没有任何过渡时间 —— 默认值。
2. s 或ms :秒或毫秒。
3. 列表:
如果想让所有属性都持续一个时间,那就写一个值。
如果想让每个属性持续不同的时间那就写一个时间的列表。

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

?/* 分别设置时间 */

?transition-duration: 0.5s,0.5s,3s;

transition-delay
作用:指定开始过渡的延迟时间,单位: s 或ms

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

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

?/* 分别设置时间 */

?transition-duration: 0.5s,0.5s,3s;

?transition-delay:0 ,0,3s;

?transition 复合属性
如果设置了一个时间,表示duration ;如果设置了两个时间,第一是duration ,第二个是
delay ;其他值没有顺序要求。

transition:1s 1s linear all;

文章来源:https://blog.csdn.net/u014378108/article/details/135344080
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。