弹窗样式

发表于 2020-10-19 17:33:30   |   下载附件   |   字体:
弹窗样式tipscss弹窗样式弹窗尖角样式带阴影arrow

html

<span class="helper">
	<img src="">
	<!-- 提示开始 -->
	<div class="tips">
		<div class="tips-box">
			<div class="tips-arrow"></div>
			<div class="tips-content">
				<p><em>人气:</em>截止当前累计获得的人气,包含个人主页浏览量+发表的总结阅读数+发表的资料(资料包)浏览数+发布的微课学习数+主播的直播间参与数</p>
				<p><em>点赞:</em>截止当前累计获得的点赞量,包含发表的总结获赞+发表的回答获赞+发表的资料(资料包)获赞+总结评论获赞+辩论赛观点获赞</p>
				<p><em>粉丝:</em>当前订阅的粉丝用户量</p>
				<p><em>收益(茅豆):</em>截止当前累计获得用户赞赏的茅豆数量</p>
				<p><em>近一周:</em>最近7日(含今日)增加的数据量</p>
				<div class="tips-arrow"></div>
			</div>
		</div>
	</div>
	<!-- 提示结束 -->
</span>


CSS:

.helper {
	float: left;
	position: relative;
	padding: 4px 0 0 0;
	display: inline-block;
	img { display: block; }
	.tips {
		position: absolute;
		left: -145px;
		top: 20px;
		z-index: 9999;
		display: none;
		.tips-box {
			.clearfix();
			position: relative;
			.tips-arrow {
				position: absolute;
			    display: block;
			    left: 145px;
			    top: 0;
			    width: 0;
			    height: 0;
			    background: #fff;
			    border: 5px solid #fff;
			    -webkit-transform: rotate(45deg);
			    transform: rotate(45deg);  
				box-shadow: 0px 0px 10px 0px rgba(102, 102, 102, 0.2);
			}
			.tips-content {
				position: absolute;
				left: 0;
				top: 5px;
				width: 260px;
				padding: 0px 15px;
				background: #fff;
				border-radius: 3px;
				box-shadow: 0px 0px 10px 0px rgba(102, 102, 102, 0.2);
				p {
					margin: 15px auto;
					color: #666;
					.font(n,12px,20px);
					em {
						color: #333;
						font-weight: bold;
					}
				}
				.tips-arrow {
					box-shadow: none;
					top: -5px;
				}
			}		
		}
	}
}