Question

当用户以下列方式将鼠标悬停在其上时，我的文字出现了：

.item{

  color: transparent;
  font-weight: bold;
  text-align: center;

}

然后在我的JQuery中悬停我将颜色设置为黑色：

 $(".item").hover(function () {
    $(this).css("color", "black");
}, function () {
    $(this).css("color", "transparent");
});

但是，我问，如果有某种webkit-animation或某些滚动功能，我不知道我是否想要在div悬停时将文本从div的底部滚动到其中放置在中间或其所在的任何位置

我正在查看过去的答案，我正在为此找到一些非常长而复杂的答案，并且希望我能够忽视一些简单的事情。

Answer 1

使用CSS转换

JS Fiddle

＆＃13;

data = [-1 -1 -1 1 0 0 1 1 -1 0 1 -1 0 1];
states = flipud(unique(data)');
im = bsxfun(@eq,data,states);

image(im);
colormap([1 1 1;0 0 0]);
axis equal;
axis tight;
set(gca,'XTick',1:length(data));
grid minor
set(gca,'YTickLabel',states);

＆＃13;

.item {
  width: 300px;
  height: 300px;
  outline: 1px solid skyblue;
  margin: 5px;
  text-align: center;
}
.item .content {
  position: relative;
  top: 270px;
  /* 270px top + 30px line height = 300px outer container height */
  line-height: 30px;
  -webkit-transition: all 1s;
  transition: all 1s;
}
.item:hover .content {      
  /* centering text vertically 135px top + 15px (line-height/2) = 150px half the container height */
  top: 135px;
}

＆＃13;

动画文字从下往上显示html / css

1 个答案: