注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

几行CSS3制作tip提示实例

jquery实例 fishcity 1934浏览

很多网站都会使用到tip提示功能,它们大多都是JS或是借助jquery插件实现的,今天我们来使用几行CSS3代码实现超酷的tip功能。当然使用CSS3,肯定是需要现代浏览器支持的,还有用IE6的亲们可以洗洗睡了。

jquery实例:css3制作tip提示

首先,咱们来建立html

如咱们需在鼠标移动到一个div上时显示提示信息,我们可以像下面这样构建html

<div class="help-tip">
    <p>This is the inline help tip! It can contain all kinds of HTML. Style it as you please.</p>
</div>

如下图,p元素为黑色背景的提示,而类名help-tip的div显示的就是问号标志。

CSS3制作tip提示实例

默认情况下提示内容隐藏,当鼠标悬浮于问号标志时才显示,提示的内容可以是文字,链接,图片,视频和其他类型的HTML。展示的方式使用CSS3动画平滑效果。

CSS

css是本实例的重头部分,亲们仔细看好了,这里常见的CSS就不多介绍了,不懂的请回去恶补下咯。

.help-tip{
    position: absolute;
    top: 18px;
    right: 18px;
    text-align: center;
    background-color: #BCDBEA;
    border-radius: 50%; /* 实现圆角*/
    width: 24px;
    height: 24px;
    font-size: 14px;
    line-height: 26px;
    cursor: default;
}

.help-tip:before{/* 在.hel-tip元素前加上内容*/
    content:'?';
    font-weight: bold;
    color:#fff;
}

.help-tip:hover p{/* 鼠标在help-tip悬浮时p的样式*/
    display:block;
    transform-origin: 100% 0%;/* 设置元素的运动的基点(参照点)*/

    -webkit-animation: fadeIn 0.3s ease-in-out; /* 0.3秒内缓冲淡出(参照点)*/
    animation: fadeIn 0.3s ease-in-out;

}

.help-tip p{	/* The tooltip */
    display: none;
    text-align: left;
    background-color: #1E2021;
    padding: 20px;
    width: 300px;
    position: absolute;
    border-radius: 3px;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    right: -4px;
    color: #FFF;
    font-size: 13px;
    line-height: 1.4;
}

.help-tip p:before{ /* 在p元素前加上内容*/
    position: absolute;
    content: '';
    width:0;
    height: 0;
    border:6px solid transparent;/* 用边框实现小三角形*/
    border-bottom-color:#1E2021;
    right:10px;
    top:-12px;
}

.help-tip p:after{ /* 在p元素后加上内容*/
    width:100%;
    height:40px;
    content:'';
    position: absolute;
    top:-40px;
    left:0;
}

/* CSS 动画,透明度从0变化到1,大小从0.6变形到1 */

@-webkit-keyframes fadeIn {
    0% { 
        opacity:0; 
        transform: scale(0.6);
    }

    100% {
        opacity:100%;
        transform: scale(1);
    }
}

@keyframes fadeIn {
    0% { opacity:0; }
    100% { opacity:100%; }
}

Chrome浏览器仍然需要关键帧动画的webkit前缀,所以我们提供两个版本。动画从元素从右上角开始变形(由于transform-origin 23行)并启动不透明。鼠标悬浮触发P元素显示。

必须要注意的是为了让问题标志在蓝色圆圈的中央显示,且让圆出现在div的右上方,包含容器必须设定position:relative。

转载请注明:jQ酷 » 几行CSS3制作tip提示实例

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。