css 右上角 翻开动画_css之transition上下动画效果

css之transition动画效果

body,html{

position: relative;

}

#root{

position: relative;

top: 200px;

left: calc(50% - 150px);

width: 300px;

height: 300px;

background-color: yellow ;

overflow: hidden;

}

#root:hover #box{

top: 0;

}

#box{

width: 300px;

height: 300px;

background-color: skyblue;

position: absolute;

top: -100%;

transition: all ease-in 2s;

}

#box button {

position: absolute;

bottom: 0;

right: 0;

}

#box:active{

background-color: red;

}

购买

function toBuy(){

alert('购买成功')

}

标签：box,动画,color,top,transition,300px,background,position,css

来源： https://www.cnblogs.com/-roc/p/13634838.html