提示框效果

位置可以随意调动写的比较懒。
<!DOCTYPE html>
<html>
<head>
	<title>鼠标移上效果</title>
	<meta charset="utf-8">
	<style type="text/css">

		body,html{
			margin:0;
			padding: 0;
			background: #000000;
		}
		.contact {
			width: 100%;
			height: 100px;
			display: flex;
			justify-content: center;
			align-items: center;
			border-right: 1px solid #525252;
			color: #ffffff;
		}
		.contact span{
			cursor: pointer;
			margin: 0 30px;
			display: flex;
		}

		.contact .icon-qq,
		.contact .icon-wx{
			position: relative;
			display: flex;
		}

		.contact .icon-qq:hover .contact-qq{
			opacity:1;
			visibility: visible;
		}
		.contact-qq{
			width: 200px;
			line-height: 40px;
			position: absolute;
			top: 167%;
			color: #333;
			left: 0;
			font-weight: 300;
			letter-spacing: 1px;
			transition: all .4s ease-in-out;
			display: flex;
			justify-content: space-around;
			align-items: center;
			-webkit-border-radius: 4px;
			-moz-border-radius: 4px;
			border-radius: 4px;
			box-shadow: 0 0 10px #ddd;
			opacity: 0;
			visibility: hidden;
			background: #ffffff;
		}


		.contact-qq:after{
			content: '';
			display:block;
			width:0;
			height:0;
			border-width:0 10px 10px;
			border-style:solid;
			border-color:transparent transparent #ffffff;
			position:absolute;
			top:-10px;
			left:15%;/* 三角形居中显示 */
			/*transform: rotateZ(180deg);*/
		}

		.contact-qq:before{
			content: '';
			display:block;
			width:0;
			height:0;
			border-width:0 10px 10px;
			border-style:solid;
			border-color:transparent transparent #ffffff;
			position:absolute;
			top:-11px;
			left:15%;
			/*transform: rotateZ(180deg);*/
		}

		.contact .icon-qq .contact-qq p,
		.contact .icon-wx .contact-wx p{
			width: 100%;
			height: 100%;
		}

		.contact-wx{
			left: -64px;
			top: 180%;
		}
		.contact-wx:before,
		.contact-wx:after{
			left: 95px;
		}

		.contact .icon-wx:hover .contact-wx{
			opacity:1;
			visibility: visible;
		}
	</style>
</head>
<body>
<div class="contact">
			<div class="icon-qq">
				<span>001</span>
				<div class="contact-qq">
					<p>你好</p>
				</div>
			</div>
			<div class="icon-wx">
				<span>002</span>
				<div class="contact-qq contact-wx">
					<p>你好</p>
				</div>
			</div>
		</div>
</body>
</html>
提示框 效果

猜你喜欢
