在网站页面的制造中,很多成绩是由transition完成过渡动画做成的。比来的任务,必要做一个div的hover成绩,hover的时分笔墨内容自适应高度即是height: 70px(牢固高度)变更到height: auto; 从下往上发生一个过渡动画,进程中由中心圆形遮罩中心疏散到消散,表示底图。
进程中,碰到的题目有两点:
关于不定高度的元素完成transition动画,制造过渡成绩的进程中,发明height: auto;会致使过渡动画不产天生绩,并且看起来不流通,显得僵硬。
中心圆形表示局部底图周围是遮罩的成绩,div hover以后圆形渐渐扩展的过渡动画,表示完全的底图。以下所示的成绩图:
关于不定高度的元素完成transition动画,能够用max-height,文本内容设置max-height: 64px; transition: max-height 1s; 文本内容的div hover以后设置max-height: 250px(比方250px),就能够完成这个成绩,不外在这里这个动画成绩不是很抱负。也能够经由过程js得到div.text精确的高度,赋予div.txt一个明白的值,
高端做网站,移出鼠标以后,移除这个值。以下所示:
Css:
.divLi .txt{
Height: 640;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
Html:
Js:
关于上图的中心圆形表示局部底图周围遮罩,先设置定位在图片下面,中心的圆形能够用border做,设置border-color做遮罩色,border-width设置大一些,再border-radius设置50%就能做成一个中心是圆形表示局部底图的遮罩,div hover 以后设置缩放的倍数,比方transform: scale(4),加上div本来设置的过渡动画transition,就能把圆形表示周围遮罩缩小,中心的圆形就会缩小,能够表示全数的底图,以下所示:
Html:
Css:
. divLi .img-circle{
position: absolute;
z-index: 3;
top: 0;
right: 0;
bottom: 0;
left: 0;
pointer-events: none;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
-webkit-transform: scale(1);
transform: scale(1);
}
. divLi:hover .img-circle{
-webkit-transform: scale(4);
transform: scale(4);
}
. divLi .img-circle span{
position: absolute;
top: 50%;
left: 50%;
width: 55%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
. divLi .img-circle span::before {
content: "";
display: block;
padding-top: 100%;
}
. divLi .img-circle span:after{
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
border: 1000px solid #edf6ff;
border-radius: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}