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

箭头旋转+向下展开动画

.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; /*足够存放内容的高度*/

}