关于HTML中div从display:none到display:block透明度渐增显示的实现

在编写前端页面的过程中，经常会遇到将鼠标移至链接或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透明度渐增显示的实现；其他显示效果，例如从不同方向移进等，均与之类似，只需要改变动画效果部分，就不在此演示了！