Posts tagged with CSS


今天在爆栈上刷信仰积分时看到这样一道问题

How to animate the height of the background image

I have tried the following scenario which I need to animate my background image like filling from bottom to top on hover of my div. Whereas my animation is not like filling from bottom instead its like sliding from bottom to top. Can any one suggest me the right way how I can achieve my result. I am ok with jQuery animation as well and css3 keyframe animation.

Code:

<div class="bg"><span></span></div>  
.bg {
  background: url(...) no-repeat center;
  height: 250px;
  position: relative;
}
span {  
  background: url(...) no-repeat top 32px center;
  bottom: 0px;
  height: 0;
  transition: height 0.5s;
  position: absolute;
  right: 0;
  left: 0;
}
.bg:hover span {
  height: 184px;
}

大意是要实现一个背景图片自下而上展开的效果,如图:

...

一、很久很久以前

遥远的 CSS 大草原上,生活着一群草泥马前端攻城狮,在这里攻城狮们捕捉着各种各样属性和创造新属性,施以魔法来构建他们的玩具。有一天,攻城狮们发现了一直被冷落在角落里的 clip 属性……

二、发动咒语

在 MDN 的魔法书上,clip 属性的语法是这样被规定的:

clip: <shape> | auto  

值得注意的是,clip 属性仅在设置了 position: absolute | fixed 的元素上生效

<shape> 仅接受 rect() 矩形裁切,看起来似乎很废柴,因此一直被大家忽视,但用好 clip 属性能创造出许多黑魔法般的效果。

...