zoukankan      html  css  js  c++  java
  • 贴心小技能——纯CSS实现的帮助提示

    1. 新技能传授---哒哒哒哒

    我们经常会接到这样的小需求,鼠标放在某个位置实现一段小提示。

    你还在用js实现这样一个小功能,你就太out了,来看看我们用纯CSS打造的帮助提示。

    2. html

    <div class="help-tip">
    	<p>臣妾在这里!<a href='xxx'>来嘛!</a></p>
    </div>
    

    .help-tip是包含一个带问号的小圆圈效果
    p元素里的内容是要显示的提示内容。它默认是不显示的,当鼠标滑向问号时,通过CSS才能展示提示信息

    3. css

    .help-tip{
    		position: relative;
    		text-align: center;
    		background-color: #BCDBEA;
    		border-radius: 50%;
    		 24px;
    		height: 24px;
    		display: inline-block;
    		font-size: 14px;
    		line-height: 26px;
    		cursor: default;
    	}
    
    	.help-tip:before{
    		content:'?';
    		font-weight: bold;
    		color:#fff;
    	}
    
    	.help-tip:hover p{
    		display:block;
    		transform-origin: 100% 0%;
    		-webkit-animation: fadeIn 0.3s ease-in-out;
    		animation: fadeIn 0.3s ease-in-out;
    
    	}
    
    	.help-tip p{
    		display: none;
    		position: absolute;	
    		right: -4px;
    		/*在元素的左边还是右边*/
    		/*left:-4px;*/
    		
    		padding: 20px;
    		 200px;
    		border-radius: 3px;
    		box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    		background-color: #1E2021;
    		text-align: left;
    		color: #FFF;
    		font-size: 13px;
    		line-height: 1.4;
    	}
    	/*小三角的实现*/
    	.help-tip p:before{
    		position: absolute;
    		content: '';
    		0;
    		height: 0;
    		border:6px solid transparent;
    		border-bottom-color:#1E2021;
    		right:10px;
    		top:-12px;
    	}
    
    	.help-tip p:after{
    		100%;
    		height:40px;
    		content:'';
    		position: absolute;
    		top:-40px;
    		left:0;
    	}
    
    	@-webkit-keyframes fadeIn {
    		0% { 
    			opacity:0; 
    			transform: scale(0.6);
    		}
    
    		100% {
    			opacity:100%;
    			transform: scale(1);
    		}
    	}
    
    	@keyframes fadeIn {
    		0% { opacity:0; }
    		100% { opacity:100%; }
    	}
    

    4. 实现原理

    1. 提示的显示,用很普通的css效果,即.help-tip hover时,让p元素display =block;
    2. 小三角的实现,使用了:before伪类创建。
    3. 代码中还用了css3动画效果,透明度变化等实现tip的显示效果
    4. 兼容性:ie8+ 及其它浏览器都兼容
      注意:ie8下没有圆角效果及闪现果的动画效果,但能保证基本的提示功能,赞一个
  • 相关阅读:
    codevs1842 递归第一次
    codevs1501 二叉树最大宽度和高度
    (noi.openjudge.cn) 1.5编程基础之循环控制T36——T45
    (noi.openjudge.cn) 1.7编程基础之字符串T21——T30
    (noi.openjudge.cn) 1.9编程基础之顺序查找T06——T15
    (noi.openjudge.cn) 1.9编程基础之顺序查找T01——T05
    (noi.openjudge.cn) 1.7编程基础之字符串T31——T35
    (noi.openjudge.cn) 1.8编程基础之多维数组T21——T25
    Objective-C/C++混编编译器设置
    UITableView使用指南
  • 原文地址:https://www.cnblogs.com/summer_shao/p/4493213.html
Copyright © 2011-2022 走看看