CSS：冒泡提示

效果：
可以用来提示
代码
<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="Generator" content="EditPlus®">
		<meta name="Author" content="">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<title>冒泡提示</title>
		<style type="text/css">
			#tips {
				width: 200px;
				height: 100px;
				padding: 5px;
				border: 1px solid;
				border-radius: 10px;
				position: absolute;
				display: none;
				top: -130px;
				background: #D3D3D3;
			}
			
			#tips:before {
				content: "";
				width: 0;
				height: 0;
				border-top: 10px solid;
				border-bottom: 5px solid transparent;
				border-left: 10px solid;
				border-right: 16px solid transparent;
				position: absolute;
				left: 45%;
				top: 101%;
			}
			
			#tips:after {
				content: "";
				width: 0;
				height: 0;
				border-top: 9px solid #D3D3D3;
				border-bottom: 4px solid transparent;
				border-left: 9px solid #D3D3D3;
				border-right: 15px solid transparent;
				position: absolute;
				left: 45.5%;
				top: 100%;
			}
			
			a {
				position: absolute;
				top: 140px;
			}
			
			a:hover>#tips {
				display: block;
			}
			
			#tips2 {
				width: 200px;
				height: 100px;
				padding: 5px;
				border: 1px solid;
				border-radius: 30px;
				position: absolute;
				display: block;
				left: 400px;
				background: #D3D3D3;
			}
			
			#tips2:before {
				content: "";
				width: 50px;
				height: 50px;
				background: #D3D3D3;
				border: 1px solid;
				border-radius: 25px;
				position: absolute;
				left: 20%;
				top: 80%;
			}
			
			#tips2:after {
				content: "";
				width: 24px;
				height: 24px;
				background: #D3D3D3;
				border: 1px solid;
				border-radius: 12px;
				position: absolute;
				left: 15%;
				top: 110%;
			}
		</style>
	</head>

	<body>

		<a href="#">把鼠标移过来看看
			<div id="tips">你发现我了</div>
		</a>
		<div id="tips2">思考式气泡</div>
	</body>

</html>
猜你喜欢
