0
点赞
收藏
分享

微信扫一扫

2024最新SLAM实习、秋招面经(百度、华为、小米、蔚来、理想、美团、阿里菜鸟……)

墨春 2024-01-03 阅读 27
css3
.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-delay
作用:指定开始过渡的延迟时间,单位: s 或ms

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

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

transition:1s 1s linear all;

举报

相关推荐

0 条评论