CSS Note 2.2 transition和transform组合动画

最新推荐文章于 2024-11-13 11:35:56 发布

原创最新推荐文章于 2024-11-13 11:35:56 发布 · 455 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#transition #过渡动画

CSS Note 专栏收录该内容

18 篇文章

订阅专栏

本文详细介绍了CSS中过渡（transition）和变换（transform）的使用方法，包括如何设定过渡属性、过渡时间、过渡速度和延迟时间，以及如何使用变换属性实现元素的位置、大小和旋转变化。通过具体实例展示了不同过渡效果的应用。

一、CSS

@charset "UTF-8";

div{
    margin: 10px;
    padding: 10px;
    width: 160px;
    height: 80px;
    background: chartreuse ;

}
#div1:hover{
    background: green;
    width: 60px;
    transition-property: width;/*设定对宽度进行过渡*/
    transition-duration: 1s;/*设定过渡时间*/
    transition-timing-function: ease;/*加速过渡;ease-in以慢速开始的过渡，ease-out以慢速结束的过渡，ease-in-out以慢速开始和结束的过渡*/
    transition-delay: 0.5s;/*设定延时过渡时间*/
}
#div2:hover{
    background: blue;
    width: 60px;
    transition-property: all;/*对所有属性过渡*/
    transition-duration: 1s;
    transition-timing-function: linear;/*匀速过渡*/
}
#div3:hover{
    background: red;
    width: 60px;
    transition: background 3s ease-in-out 3s;/*延时3秒，过渡时间为2s，对背景颜色过渡，过渡是先慢后快再慢*/
}
#div4{
    margin: 4px;
    padding: 4px;
    width: 320px;
    height: 200px;
    background-color: lightyellow;
    border-radius: 10px;
    border: 2px brown dashed;
    vertical-align: middle;
}
img{
    width: 60px;
    height: 200px;
}
img:hover{
    position: relative;
    transform-origin: 50% 50%;
    transform: translate3D(200px, -50px ,100px) rotate3D(1,1,1,3600deg) scale(2);
    transition: transform 2s ease 0s;
    bottom: 20px;
}

二、HTML

<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
    <div id="div4">
        <img src="..\sp\gh1.jpg" alt="test">
        <img src="..\sp\gh2.jpg" alt="test">
        <img src="..\sp\gh3.jpg" alt="test">
        <img src="..\sp\gh4.jpg" alt="test">
        <img src="..\sp\gh5.jpg" alt="test">
    </div>
</body>

三、效果展示