纯CSS3进行hover时显示带箭头的tips提示动画效果

效果图:当鼠标放在ps,ai上显示对应的内容.

流程分析:鼠标移动显示提示,鼠标在父层(内有显示和隐藏层)时,隐藏层进行动画显示.区别于日常的hover,我们用尽量少的html和css代码达到理想的状态.

这里边有个很容易被带到沟里的一个小地方,经常有人问怎么做出三角形?其实那不过是个旋转了45°的正方形.

html:

<div class='box'>
<a href='' class='box_title'>滑动层</a>
<div class='box_content'>内容层</div>
</div>

css:

/*三角形*/
.box>.box_content:before {
	position: absolute;
	top: -4px;
	left: calc(50% - 5px);
	width: 10px;
	height: 10px;
	background: #fff;
	box-shadow: -2px -2px 0 -1px #c4c4c4;
	content: "";
	transform: rotate(45deg)
}
/*自适应居中*/
.box>.box_content {
	position: absolute;
	top: 100%;
	left: 50%;
	z-index: 3;
	visibility: hidden;
	padding: 10px;
	height: auto;
	min-height: 12px;
	border-radius: 4px;
	background: #fff;
	box-shadow: 0 2px 8px rgba(0,0,0,.3);
	color: #6f6f6f;
	font-size: 12px;
	opacity: 0;
	transition: visibility 0s linear .2s,opacity .2s linear 0s;
	transform: translateX(-50%);
	backface-visibility: visible!important;
	backface-visibility: hidden;
}
/*hover效果*/
.box:hover>.box_content {
	visibility: visible;
	opacity: 1;
	transition: visibility 0s linear 0s,opacity .4s linear;
	animation: fade-top;
	animation-duration: .4s;
	-webkit-animation: fade-top .4s;
}
/*hover动画*/
@keyframes fade-top {
	0% {
		opacity: .1;
		top: 120%
	}

	100% {
		opacity: 1;
		top: 100%
	}
}

@-webkit-keyframes fade-top {
	0% {
		opacity: .1;
		top: 120%
	}

	100% {
		opacity: 1;
		top: 100%
	}
}