css3箭头旋转+向下展开动画 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>箭头旋转+向下展开动画</title>
    <style>
        .closeBox {
            display: inline-block;
            width: 50px;
            height: 50px;
            transition: transform 0.5s;
            -moz-transition: -moz-transform 0.5s; /* Firefox 4 */
            -webkit-transition: -webkit-transform 0.5s; /* Safari 和 Chrome */
            -o-transition: -o-transform 0.5s;
        }

        .closeBox img {
            width: 100%;
        }

        .closeBox:hover {
            transform: rotate(90deg);
        }

        .element{
            max-height: 60px;
            overflow: hidden;
            transition: max-height ease-in 0.2s;
            background-color: pink;
        }
        .element:hover{
            max-height: 2000px; /*足够存放内容的高度*/
        }
    </style>

</head>
<body>
    <span class="closeBox" style="margin:0px 120px;" id="btn">
        <img src="images/arrow.png" class="close">
    </span>
    <p></p>
    <div class="element">
        <div class="box" style="width: 100%;height: 500px"></div>
    </div>
</body>
</html>
posted @ 2020-08-20 22:56  逸_风  阅读(2884)  评论(0)  编辑  收藏  举报