CSS特效十：信息提示框

今天来讲一个信息提示框，可以在上下左右四个方向展示，先给大家看看效果图（文末有彩蛋！！！）：

其中的重点就是一个尖角的展示：

我们可以用CSS 伪元素 ::after 及 content 属性为提示工具创建一个小箭头标志，箭头是由边框组成的，但组合起来后提示工具像个语音信息框。

在提示工具内定位箭头: top: 100% , 箭头将显示在提示工具的底部。left: 50% 用于居中对齐箭头。
注意：border-width 属性指定了箭头的大小。如果你修改它，也要修改 margin-left 值。这样箭头在能居中显示。
border-color 用于将内容转换为箭头。设置顶部边框为黑色，其他是透明的。如果设置了其他的也是黑色则会显示为一个黑色的四边形。

附上源码：


<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>信息提示框</title>
</head>
<style>.tooltip {/* 设置这个属性可以为下面的子元素作参考 */position: relative;display: inline-block;/* 设置底部的边框 */border-bottom: 1px dashed black;}.tooltip .tooltiptext {/* 隐藏该元素 */visibility: hidden;width: 120px;background-color: #555;color: #fff;text-align: center;border-radius: 6px;padding: 5px 0;position: absolute;/* 设置该元素在z轴处于优先显示的位置，因为其他元素没有设置z—index */z-index: 1;/* 超过了100%就是反向距离 */bottom: 125%;left: 50%;margin-left: -60px;opacity: 0;/* 延迟一秒再变为清晰度是1 */transition: opacity 1s;}/* 设置提示框的after属性，并添加一个尖角 */.tooltip .tooltiptext::after {content: "";position: absolute;top: 100%;left: 50%;margin-left: -5px;border-width: 5px;border-style: solid;border-color: #555 transparent transparent transparent;}/* hover的时候显示提示框 */.tooltip:hover .tooltiptext {visibility: visible;opacity: 1;}
</style><body><body style="text-align:center;"><h2>提示信息框</h2><p>鼠标移动到以下文本上:</p><div class="tooltip">来到我这里呀！<span class="tooltiptext">你还真来呀！</span></div></body>
</body></html>

彩蛋来了！！！

附上一段神奇的代码，效果自己运行观看：


<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>更漂亮的信息提示</title>
</head><style>.wrapper {text-transform: uppercase;background: #ececec;color: #555;cursor: help;font-family: "Gill Sans", Impact, sans-serif;font-size: 20px;margin: 100px 75px 10px 75px;padding: 15px 20px;position: relative;text-align: center;width: 200px;-webkit-transform: translateZ(0);/* webkit flicker fix */-webkit-font-smoothing: antialiased;/* webkit text rendering fix */}.wrapper .tooltip {background: #1496bb;bottom: 100%;color: #fff;display: block;left: -25px;margin-bottom: 15px;opacity: 0;padding: 20px;pointer-events: none;position: absolute;width: 100%;-webkit-transform: translateY(10px);-moz-transform: translateY(10px);-ms-transform: translateY(10px);-o-transform: translateY(10px);transform: translateY(10px);-webkit-transition: all .25s ease-out;-moz-transition: all .25s ease-out;-ms-transition: all .25s ease-out;-o-transition: all .25s ease-out;transition: all .25s ease-out;-webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);-moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);-ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);-o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);}/* This bridges the gap so you can mouse into the tooltip without it disappearing */.wrapper .tooltip:before {bottom: -20px;content: " ";display: block;height: 20px;left: 0;position: absolute;width: 100%;}/* CSS Triangles - see Trevor's post */.wrapper .tooltip:after {border-left: solid transparent 10px;border-right: solid transparent 10px;border-top: solid #1496bb 10px;bottom: -10px;content: " ";height: 0;left: 50%;margin-left: -13px;position: absolute;width: 0;}.wrapper:hover .tooltip {opacity: 1;pointer-events: auto;-webkit-transform: translateY(0px);-moz-transform: translateY(0px);-ms-transform: translateY(0px);-o-transform: translateY(0px);transform: translateY(0px);}/* IE can just show/hide with no transition */.lte8 .wrapper .tooltip {display: none;}.lte8 .wrapper:hover .tooltip {display: block;}
</style><body><div><div class="wrapper">I have a tooltip.<div class="tooltip">I am a tooltip!</div></div></div></body></html>

最后，喜欢的话，记得关注哦！

CSS特效十：信息提示框相关推荐

BootStrap笔记-信息提示框的使用
程序运行截图如下: 源码如下: <!DOCTYPE html> <html lang="en"> <head><meta charset= ...
1.2文字排版、颜色、表格、图像形状、Jumbotron、信息提示框、按钮、按钮组、徽章、加载效果、分页、列表组、卡片、下拉菜单、折叠
Bootstrap 5 默认设置 Bootstrap 5 默认的 font-size 为 16px, line-height 为 1.5. 此外,所有的 <p> 元素 margin-top ...
JS/CSS 各种操作信息提示效果
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 < ...
html css好看的提示框,div对话框,js+div+css实现好看的提示框效果(转)
div对话框,js+div+css实现好看的提示框效果(转) (2012-02-18 20:46:23) 标签: html div css 杂谈提示窗都越来越人性化了,呵呵,有的时候老板就和你要那么 ...
WEB前端网页设计-Bootstrap4 信息提示框
目录提示框添加链接关闭提示框提示框动画 Bootstrap 4 可以很容易实现信息提示框. 提示框可以使用 .alert 类, 后面加上 .alert-success, .alert-info, ...
爬虫训练场项目前端之 Bootstrap 信息提示框，按钮与按钮组，徽章，进度条
爬虫训练场项目前端之 Bootstrap 信息提示框,按钮与按钮组,徽章,进度条 Bootstrap5 信息提示框 Bootstrap 5 按钮和按钮组 Bootstrap 5 徽章进度条 Boot ...
DELMIA软件：文本信息提示框功能介绍与使用方法
目录概述文本信息创建修改文本信息增加文本信息删除文本信息仿真运行本文已经首发在个人微信公众号:工业机器人仿真与编程(微信号:IndRobSim),欢迎关注! 概述 DELMIA软件在机器 ...
Bootstrap 信息提示框
一.Bootstrap 信息提示框 1.1 基本信息提示框提示框可以使用 .alert 类, 后面加上 .alert-success, .alert-info, .alert-warning, .a ...
JavaScript特效之图片提示框
JavaScript特效之图片提示框今天分析一个图片提示框.我们经常会需要在鼠标以上一个按钮或者图片时就自动显示出一些提示信息.先来看看效果图: 实现思路: 首先创建3个需要弹出提醒的按钮,在写出对 ...

CSS特效十：信息提示框

CSS特效十：信息提示框相关推荐

最新文章

热门文章