Question

我在CSS中创建了一个矩形，添加了一个过渡，所以当我悬停时，形状缩小并消失：

.shapeB{
	background-color: #FFCC00;
	width: 100px;
	height: 100px;
	-webkit-transition:all 1s;
}

.shapeB:hover{
	height:0px;
}

<div class="shapeB"></div>

但它缩小的事实不是我想要的，我希望它缩小下降。试图刺激消耗的液体。有可能吗？

Answer 1

你可能会以某种方式错过div 100px，以给人留下这样的印象。像这样：

＆＃13;

.shapeB{
    background-color: #FFCC00;
    width: 100px;
    height: 100px;
    position: relative;
    top: 0;
	-webkit-transition:all 1s;
}

.shapeB:hover{
    height:0px;
    top: 100px;
}

＆＃13;

<div class="shapeB"></div>

＆＃13;

Answer 2

＆＃13;

 .box{ 
    position:absolute;
    width: 100px;
    height: 100px;
    left:50px;
    top:50px; 
 }

.shapeB{
  background-color: #FFCC00;
  width: 100px;
  height: 100px;
  position:absolute;
  bottom:0;
  -webkit-transition:all 1s;
}

.shapeB:hover{
   height:0px;
}

＆＃13;

<div class="box">
<div class="shapeB"></div>
</div>

＆＃13;

CSS转换和转换

2 个答案: