CSS Note 2.2 transition和transform组合动画

最新推荐文章于 2024-08-12 08:20:35 发布

LetsStudy

最新推荐文章于 2024-08-12 08:20:35 发布

阅读量379

点赞数

分类专栏： CSS Note 文章标签： transition 过渡动画

本文链接：https://blog.csdn.net/LetsStudy/article/details/84142467

版权

CSS Note 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

一、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>

三、效果展示