展会信息港展会大全

css3提示框效果测试实例 android软件开发教程
来源:互联网   发布日期:2016-03-25 16:06:28   浏览:1768次  

导读:这里不需要javascript来支持了使用纯css3就可以完美的实现了tips提示框效果,但本效果只支持高级浏览器,如有chrome,firefox,safari,ie9+这些浏览器了。cs...

这里不需要javascript来支持了使用纯css3就可以完美的实现了tips提示框效果,但本效果只支持高级浏览器,如有chrome,firefox,safari,ie9+这些浏览器了。

css代码

代码如下

复制代码

/**

* CSS3 Tips

*

* A stylesheet for creating tooltips without using anything other than CSS3.

*

* created by c.bavota

* released under GPL v2

*

* November 6th, 2013

*/

[data-tips] {

position: relative;

text-decoration: none;

}

[data-tips]:after,

[data-tips]:before {

position: absolute;

z-index: 100;

opacity: 0;

}

[data-tips]:after {

content: attr(data-tips);

height: 25px;

line-height: 25px;

padding: 0 10px;

font-size: 12px;

text-align: center;

color: #fff;

background: #222;

border-radius: 5px;

text-shadow: 0 0 5px #000;

-moz-box-shadow: 0 0 5px rgba(0,0,0,0.3);

-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3);

box-shadow: 0 0 5px rgba(0,0,0,0.3);

white-space: nowrap;

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

box-sizing: border-box;

}

[data-tips]:before {

content: "";

width: 0;

height: 0;

border-width: 6px;

border-style: solid;

}

[data-tips]:hover:after,

[data-tips]:hover:before {

opacity: 1;

}

/* Top tips */

[data-tips].top-tip:after,

[data-tips].top-tip:before {

-webkit-transition: bottom 0.25s ease-in-out, opacity 0.25s ease-in-out;

-moz-transition: bottom 0.25s ease-in-out, opacity 0.25s ease-in-out;

transition: bottom 0.25s ease-in-out, opacity 0.25s ease-in-out;

bottom: 90%;

left: -9999px;

margin-bottom: 12px;

}

[data-tips].top-tip:before {

border-color: #222 transparent transparent transparent;

margin-bottom: 0;

}

[data-tips].top-tip:hover:after,

[data-tips].top-tip:hover:before {

bottom: 100%;

left: 0;

}

[data-tips].top-tip:hover:before {

left: 15px;

}

/* Bottom tip */

[data-tips].bottom-tip:after,

[data-tips].bottom-tip:before {

-webkit-transition: top 0.25s ease-in-out, opacity 0.25s ease-in-out;

-moz-transition: top 0.25s ease-in-out, opacity 0.25s ease-in-out;

transition: top 0.25s ease-in-out, opacity 0.25s ease-in-out;

top: 90%;

left: -9999px;

margin-top: 12px;

}

[data-tips].bottom-tip:before {

border-color: transparent transparent #222 transparent;

margin-top: 0;

}

[data-tips].bottom-tip:hover:after,

[data-tips].bottom-tip:hover:before {

top: 100%;

left: 0;

}

[data-tips].bottom-tip:hover:before {

left: 15px;

}

/* Left tip */

[data-tips].left-tip:after,

[data-tips].left-tip:before {

-webkit-transition: left 0.25s ease-in-out, opacity 0.25s ease-in-out;

-moz-transition: left 0.25s ease-in-out, opacity 0.25s ease-in-out;

transition: left 0.25s ease-in-out, opacity 0.25s ease-in-out;

top: -9999px;

left: 96%;

margin-left: 12px;

}

[data-tips].left-tip:before {

border-color: transparent #222 transparent transparent;

margin-left: 0;

}

[data-tips].left-tip:hover:after,

[data-tips].left-tip:hover:before {

left: 100%;

top: 0;

}

[data-tips].left-tip:hover:before {

top: 7px;

}

/* Right tip */

[data-tips].right-tip:after,

[data-tips].right-tip:before {

-webkit-transition: right 0.25s ease-in-out, opacity 0.25s ease-in-out;

-moz-transition: right 0.25s ease-in-out, opacity 0.25s ease-in-out;

transition: right 0.25s ease-in-out, opacity 0.25s ease-in-out;

top: -9999px;

right: 96%;

margin-right: 12px;

}

[data-tips].right-tip:before {

border-color: transparent transparent transparent #222;

margin-right: 0;

}

[data-tips].right-tip:hover:after,

[data-tips].right-tip:hover:before {

right: 100%;

top: 0;

}

[data-tips].right-tip:hover:before {

top: 7px;

}

一旦你添加了上面的css3代码之后,你就可以创建你的工具提示了

HTML代码

代码如下

复制代码

<a href="http://www.111cn.net" class="top-tip" data-tips="Go to bavotasan.com">bavotasan.com</a>

你所需要的就是添加data-tip=""参数到任何你需要的HTML元素,同时设置工具提示的方面的class

效果如下

赞助本站

人工智能实验室

相关热词: 开发 编程 android

AiLab云推荐
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港