css过渡

最新推荐文章于 2024-01-30 08:30:00 发布

前端啊龙

最新推荐文章于 2024-01-30 08:30:00 发布

阅读量215

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/m0_65354547/article/details/131674540

版权

什么是过渡？

是我们可以再不使用flash动画或js的情况下，让元素从一种样式变换成为另一种样式时为元素添加的效果，需要使用属性transiton。
1、transition-property:定义转换动画css属性名称，宽度，高度，背景颜色，内外边距都可以。如果想要所有属性都使用过度，写一个all就可以了
2.transition-duration: 过渡的持续时间，从设置旧样式到换新样式的时间 -
1，transition-property过渡的属性
**2，transition-duration: 3s;**过度时间

    <style>
        div{
            background-color: red;
            width: 300px;
            height: 300px;
            margin: 50px auto;
            transition-property:width, background-color ;
            transition-duration: 3s;

        }
        div:hover{
width: 700px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div></div>

过渡的速度曲线、
3，transition-timing-function:
ease:慢快慢，
linear：匀速
ease-in：速度越来越快
ease-out：速度越来越慢
ease-in-out：先加速后减速
cubie-bezier 贝塞尔曲线
steps（）是心啊一个关键帧动画的功能
4.transition-delay:过渡的延迟时间
正数延迟的时间，负数跳过的时间
5.transition复合属性
用于再一个属性中同时设置四个过渡属性
列：
transition:all 5s linear 2s
案例：两张图片的转换

    <style>
        .bigbox{    
            width: 300px;
            height: 500px;
            border: 1px solid red;  
            margin: 50px auto;
         
        }
        .box{
            width: 300px;
            height: 500px;
            background-image:url(./01.jpg);
            background-repeat: no-repeat;
            background-size: 300px 500px;
            transition-property:all;
            transition-duration: 2s;

        }
        .bigbox:hover .box{
            background-image:url(./02.jpg);

            
        }
    </style>
</head>
<body>
    <div class="bigbox">
        <div class="box"></div>
    </div>
</body>

前端啊龙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
css过渡

是我们可以再不使用flash动画或js的情况下，让元素从一种样式变换成为另一种样式时为元素添加的效果，需要使用属性transiton。1、transition-property:定义转换动画css属性名称，宽度，高度，背景颜色，内外边距都可以。如果想要所有属性都使用过度，写一个all就可以了2.transition-duration: 过渡的持续时间，从设置旧样式到换新样式的时间 -过渡的属性**过度时间过渡的速度曲线、ease:慢快慢，linear：匀速。
复制链接

扫一扫