html一段文字弹窗提示代码,css3提示文字弹窗代码
不需要额外的javascript代码,你可以通过使用css3样式来创建一个类似的效果。
Css代码
[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;
}
/* Right tip */
[data-tips].right-tip:after,
[data-tips].right-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].right-tip:before {
border-color: transparent #222 transparent transparent;
margin-left: 0;
}
[data-tips].right-tip:hover:after,
[data-tips].right-tip:hover:before {
left: 100%;
top: 0;
}
[data-tips].right-tip:hover:before {
top: 7px;
}
/* Left tip */
[data-tips].left-tip:after,
[data-tips].left-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].left-tip:before {
border-color: transparent transparent transparent #222;
margin-right: 0;
}
[data-tips].left-tip:hover:after,
[data-tips].left-tip:hover:before {
right: 100%;
top: 0;
}
[data-tips].left-tip:hover:before {
top: 7px;
}
HTML代码
bavotasan.com
html一段文字弹窗提示代码,css3提示文字弹窗代码相关推荐
- html语言闪烁特效代码,css3 实现文字闪烁效果的三种方式示例代码
1.通过改变透明度来实现文字的渐变闪烁,效果图: 文字闪烁 星星之火可以燎原 .myclass{ letter-spacing:5px;/*字间距*/ color: red; font-weight: ...
- html文字加描边效果,CSS3实现文字描边效果
以前想实现文字描边效果只能用PS制作图片,现在我们可以用CSS3就可以实现文字描边效果其实,不用图片还可以文字描边哦,下面看青岛星网的实现方式. CSS3实现文字描边效果,这里主要用到text-sha ...
- css网页边框样式代码,css3边框样式(示例代码)
我们在设计网页样式的时候,经常会用到边框,那么css中的边框具体有哪些样式呢,下面我们来看. 首先,在css中设置border的时候,我们一般给给出三个值,线条样式,线条粗细,线条颜色. 以上的三个值 ...
- html 文字 跑马灯效果,CSS3 长文字跑马灯效果
raw js + css3 transition 跑马灯测试.跑马灯测试.跑马灯测试. @keyframes kf-marque-animation { 0% { transform: transla ...
- css中文字闪烁这么实现,css3实现文字闪烁,改变透明度
智慧大石 CSS3的animation即可: hello world
- css3小鸟飞翔案例代码+css3西游记动画案例代码
小鸟飞翔案例代码: 在这里插入代码片<!DOCTYPE html> <html lang="en"> <head><meta charse ...
- html5 火焰效果图,css3火焰文字特效
这是一款效果非常炫酷的css3火焰文字特效.该css3火焰文字特效仅用10行代码就可以实现,效果特别炫酷. 使用方法 HTML结构 使用任意元素来包裹要实现火焰文字特效的文字. jQuery之家 CS ...
- 怎么在html中加入特效文字,如何使用HTML5+css3实现粒子效果文字动画特效(附完整代码)...
我们在浏览web网页的时候会发现现在的网页做的越来越美观,很多动画特效做的越来越炫酷,这离不开HTML5和css3的深入开发.今天我们要来分享一款基于HTML5和css3的文字特效--粒子效果文字动画 ...
- css3 卡片亮光_利用css3实现文字亮光特效的代码
这篇文章主要介绍了关于利用css3实现文字亮光特效的代码,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 以前分享过很多css3实现的字体特效,今天给大家分享一款纯css3实现的文字亮光 ...
最新文章
- 喜欢到底是什么样子呢
- RxSwift中Observable的各种创建方法
- 渐渐淡去的emacs
- 精益生产理论学习总结(一)
- 零基础学习编程会遇到的坑
- 汉语词性对照表[北大标准/中科院标准]
- 计算机系统如何恢复出厂设置路由器,斐讯p.to怎么恢复出厂设置?-斐讯路由器设置...
- 自动驾驶-YOLOV5目标检测
- el-row文字换行后实现整行自动撑开
- (三)市场调查大赛系列——抽样调查的误差分析和质量控制
- Castor学习笔记(一)
- GIS专业就业之职业态度——转:职场人必看 十句话让您在职场少奋斗30年
- 荣耀android手机怎么截图,华为荣耀畅玩5C怎么截图/截屏方法教程
- Android运行项目时提示:No signature of method: build_*.android() is applicable for argument types
- 医学图像处理及三维重建技术 - 相关软件
- html--div+css样式布局(div+span)
- No Reference Video Quality Assessment with authentic distor-tions using 3-D Deep Convolutional Neura
- 在LinuxMint19上安装搜狗拼音输入法
- 手持式频谱分析仪的分类和区别
- RocketMQ是什么?
热门文章
- java系统属性_java 系统属性
- 【IT】一些有用的链接和操作
- 罗永浩回应“调侃”俞敏洪转行做直播;苹果3月9日举行春季发布会;CentOS推出新车载Linux发行版 | 极客头条...
- 程序员只能吃“青春饭”?C 认证带你破局!
- 技术突破寻找新思路,互联网内容的风控与风口
- 用几个最简单的例子带你入门 Python 爬虫
- 杜甫在线演唱《奇迹再现》、兵马俑真人还原……用AI技术打破次元壁的大谷来参加腾讯全球数字生态大会啦!...
- 程序员“放弃” Python!?发生了啥?
- 迁移学习实战 | 快速训练残差网络 ResNet-101,完成图像分类与预测,精度高达 98%!...
- @程序员,区块链开发平台避坑指南!