400-616-8059
    当前位置:
  • 首页
  • >
  • 技术分享  
  • >
  • 网站前端技术:不定高度的元素实现transition动画

网站前端技术:不定高度的元素实现transition动画

技术分享 (3003) 2022-03-05 11:25:35
在网站页面的制作中,不少效果是由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: <xmp> <div class=”divLi”> <a href=”project_detail.html”> <div class=”ic”> <img src=”images/img102.png”/> </div> <div class=”img”> <img src=”images/img101.jpg” /> <div class=”img-circle”> <span></span> </div> </div> <div class=”txt”> <div class=”text”> <div class=”t1″> Joint project of Planting Grass in the Gobi Desert </div> <div class=”t2″> Immunity, the best doctor of human health, is the ability of the human body to resist external… </div> </div> </div> </a> </div> Js: <script> $( ‘.divLi’).hover(function() { var hei = $(this).find(“.text”).height(); $(this).children(“.txt”).css(‘height’, hei); },function() { $(this).children(“.txt”).removeAttr(“style”); }); </script>
关于上图的中间圆形显示部分底图四周遮罩,先设置定位在图片上面,中间的圆形可以用border做,设置border-color做遮罩色,border-width设置大一些,再border-radius设置50%就能做成一个中间是圆形显示部分底图的遮罩,div hover 之后设置缩放的倍数,例如transform: scale(4),加上div原先设置的过渡动画transition,就能把圆形显示四周遮罩放大,中间的圆形就会放大,可以显示全部的底图,如下所示:



Html: <div class=”img-circle”> <span></span> </div> 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%); }
关于不定高度的元素实现transition动画的内容,策轩营销今天先分享到这里,欢迎关注网站,今后将分享更多使用技巧,快速提升您的技术能力。

马上开始搜索推广,获得精准流量和客户

免费获取方案 →

一站式搜索营销服务专家

专注于降低企业获客成本

Copyright © 2020 北京企策轩网络科技有限公司 版权所有
京ICP备2020043336号-5
Copyright © 2020 北京企策轩网络科技有限公司 版权所有 | 京ICP备2020043336号-5 | 京公网安备11010802040216号