在编写前端页面的过程中,经常会遇到将鼠标移至链接或li上时显示div的需求。如图:
而在这过程中,为了有更好的用户体验,通常要求弹出的div显示过程是渐进的。此时可以采用以下步骤来实现:
(1)在HTML中编写页面代码,并在CSS中设置要弹出的div显示display:none;
<a href="javascript:''">
<span><i class="fa fa-android"></i></span>
<img src="img/footer-appdownload.png" alt="安卓下载" class="disNone"/>
<!-- -->
</a>
.disNone{
display: none;
}
(2)CSS实现透明度渐增动画效果。
/*动画效果*/
@-webkit-keyframes fadeIn {
0% {
opacity: 0; /*初始状态 透明度为0*/
}
20%{
opacity: .2;
}
50% {
opacity: .5; /*中间状态 透明度为0.5*/
}
70%{
opacity: .7;
}
100% {
opacity: 1; /*结尾状态 透明度为1*/
}
}
(3)编写CSS样式,使鼠标悬浮在链接上时,弹出的div的display:block;并调用之前写好的动画效果,此时需要特别注意弹出div的显示位置。
.footer .footerArea .footerRight ul li a:hover .disNone{
display: block;
position: absolute;
margin-left: -10px;
margin-top:-200px;
z-index: 99;
/*调用动画效果*/
-webkit-animation-name: fadeIn; /*动画名称*/
-webkit-animation-duration: 3s; /*动画持续时间*/
-webkit-animation-iteration-count: 1; /*动画次数*/
-webkit-animation-delay: 0s; /*延迟时间*/
}
以上,便实现了div从display:none到display:block透明度渐增显示的实现;其他显示效果,例如从不同方向移进等,均与之类似,只需要改变动画效果部分,就不在此演示了!