- 浏览: 1094862 次
文章分类
- 全部博客 (379)
- S2SH (16)
- stuts2 (0)
- java语言 (81)
- JSP (17)
- <html>元素 (11)
- javaweb (4)
- web容器 (3)
- ext (23)
- javaScript (48)
- ant (1)
- liferay (1)
- sql (9)
- css (42)
- 浏览器设置 (3)
- office_world (1)
- eclipse (4)
- 其它 (28)
- 操作系统 (5)
- android (6)
- Struts2 (11)
- RegEx (3)
- mysql (5)
- BigDATA (1)
- Node.js (1)
- Algorithm (10)
- Apache Spark (1)
- 数据库 (5)
- linux (2)
- git (1)
- Adobe (3)
- java语言,WebSocket (1)
- Maven (3)
- SHELL (1)
- XML (2)
- 数学 (2)
- Python (2)
- Java_mysql (1)
- ReactJS (6)
- 养生 (4)
- Docker (1)
- Protocols (3)
- java8 (2)
- 书籍 (1)
- Gradle (2)
- AngularJS (5)
- SpringMVC (2)
- SOAP (1)
- BootstrapCSS (1)
- HTTP协议 (1)
- OAuth2 (1)
最新评论
-
Lixh1986:
Java并发编程:自己动手写一把可重入锁https://blo ...
Java之多线程之Lock与Condition -
Lixh1986:
http://win.51apps.com.cn/https: ...
temp -
ztwsl:
不错,支持很好
HttpServletRequest和ServletRequest的区别 -
guodongkai:
谢谢您能将知识精华汇编总结,让初学者们从原理中学会和提高。
javaScript之function定义 -
kangwen23:
谢谢了,顶顶
struts2中的ValueStack学习
效果图:
注意以下要点:
1、提示框的箭头效果,且箭头随位置变动。
2、提示框的关闭按钮,且提示框内容高度随意。
3、阴影效果
测试网址:
https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_box-shadow
代码:
转载请注明,
原文出处:http://lixh1986.iteye.com/blog/2387980
-
注意以下要点:
1、提示框的箭头效果,且箭头随位置变动。
2、提示框的关闭按钮,且提示框内容高度随意。
3、阴影效果
测试网址:
https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_box-shadow
代码:
<!DOCTYPE HTML> <HTML> <HEAD> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script> $(function(){ function showTip(flag){ var tip = $("div.tool-tip-content-wrapper, div.tool-tip-info-border"); if(flag) tip.show(); else tip.hide(); } $("span.tool-tip-info").on("click",function(){ showTip(true); }); $("div.tip-content-btn").on("click",function(){ showTip(false); }); }); </script> <style> .tool-tip-info-border{ display:none; } .tool-tip-info-border-b{ border-top-color: #fff; border-left-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-style: dashed dashed solid; border-width: 8px; position: absolute; top: -12px; left: -2px; z-index:2000; height: 0; width: 0; } .tool-tip-info-border-a{ border-top-color: #aaa; border-left-color: transparent; border-right-color: transparent; border-bottom-color:transparent; border-style: dashed dashed solid; border-width: 8px; position: absolute; top: -11px; left: -2px; z-index:2000; height: 0; width: 0; } .tool-tip-content { background: #fff; border: 1px solid #ccc; border-color: rgba(0,0,0,.2); -webkit-box-shadow: 0 2px 10px rgba(0,0,0,.2); box-shadow: 0 2px 10px rgba(0,0,0,.2); outline: none; overflow: hidden; position: absolute; left: 0px; bottom: 7px; -webkit-animation: gb__a .2s; animation: gb__a .2s; -webkit-border-radius: 2px; border-radius: 2px; -webkit-user-select: text; width:360px; height:auto; padding:15px; font: 13px 'Lato',sans-serif; color:rgb(51,51,51); box-sizing: border-box; } .tool-tip-info{ position:relative; display:inline-block; width:13px; height:13px; text-align:center; line-height:13px; border: 1px solid #407bae; border-radius:10px; color:#407bae; font: 12px 'Lato',sans-serif; cursor:pointer; } .tip-content-btn{ position:absolute; top:2px; right:2px; width:13px; height:13px; cursor:pointer; } .tip-content-btn:before{ position:absolute; top:1px; left:3px; width:1px; height:15px; background-color:#888; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); content:""; } .tip-content-btn:hover:before{ background-color:#333; } .tip-content-btn:after{ position:absolute; top:1px; left:3px; width:1px; height:15px; background-color:#888; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); content:""; } .tip-content-btn:hover:after{ background-color:#333; } .tool-tip-content-wrapper{ position:relative !important; height:0px; display:none; z-index:1000; } </style> </HEAD> <BODY> <p>Paragraph A</p> <p>Paragraph B</p> <p>Paragraph C</p> <p>Paragraph D</p> <p>Paragraph E</p> <p>Paragraph F</p> <p>Paragraph G</p> <div class="tool-tip-content-wrapper"> <div class="tool-tip-content"> <div class="tip-content-msg"> Providing your last name adds another layer of security and keeps your World Of Tester profile protected. </div> <div class="tip-content-btn"></div> </div> </div> <div> Last Name: <span class="tool-tip-info"> <span>i</span> <div class="tool-tip-info-border"> <div class="tool-tip-info-border-a"></div> <div class="tool-tip-info-border-b"></div> </div> </span> </div> <hr/> <!--======== TEST CODE ONLY :::::::: Test Begin =========== --> <p>Paragraph A</p> <p>Paragraph B</p> <p>Paragraph C</p> <p>Paragraph D</p> <p>Paragraph E</p> <p>Paragraph F</p> <p>Paragraph G</p> <div class="tool-tip-content-wrapper"> <div class="tool-tip-content"> <div class="tip-content-msg"> Providing your last name adds another layer of security and keeps your World Of Tester profile protected. Providing your last name adds another layer of security and keeps your World Of Tester profile protected. Providing your last name adds another layer of security and keeps your World Of Tester profile protected. Providing your last name adds another layer of security and keeps your World Of Tester profile protected. </div> <div class="tip-content-btn"></div> </div> </div> <div> Longer - Last Name: <span class="tool-tip-info"> <span>i</span> <div class="tool-tip-info-border"> <div class="tool-tip-info-border-a"></div> <div class="tool-tip-info-border-b"></div> </div> </span> </div> <!--======== TEST CODE ONLY :::::::: Test End =========== --> <BODY> </HTML>
转载请注明,
原文出处:http://lixh1986.iteye.com/blog/2387980
-
发表评论
-
Flex之 justify-content 和 flex-direction 的应用
2021-12-23 19:39 312flex 简介: 采用Flex布局的元素,被称为Flex容 ... -
CSS之页面元素飞入效果
2020-04-18 17:50 678效果预览: - https://www.runoob.com ... -
CSS之垂直居中
2020-04-02 10:00 348css里面用text-align:center ... -
Sass之&引用父选择器
2018-08-08 11:29 8249Sass之&引用父选择器 描述: 您可以使用&字符选 ... -
HTML5之canvas之粒子效果
2018-01-26 10:32 1439效果图: JavaScript 代码实现: & ... -
CSS之导航栏设计之 ul 之 li 标签排成一行
2019-06-04 11:11 2305在HTML页面元素设计中, 把具有相同一类功能的列表用 li ... -
HTML5/CSS3鼠标滑过图片滤镜动画效果
2017-12-21 10:54 1286HTML5/CSS3鼠标滑过图片滤镜动画效果 以前我们用CS ... -
Responsive Web Design(自响应式网页设计)
2017-05-28 22:43 1205Responsive Web Design(自响 ... -
css 之 linear-gradient 之 进度条(progress bar)
2017-05-25 18:14 2131CSS 的 linear-gradient() 函数会创建 ... -
在 css 中使用 @font-face
2017-05-24 14:15 524@font-face 允许用户使用自定义的字体。在css中定义 ... -
jQuery之mouseover,mouseover,mouseout,mouseleave
2017-03-14 10:20 627Jquery mouseenter() vs mouseove ... -
css:flex布局
2017-03-13 17:43 862A Complete Guide to Flexbox htt ... -
网站页面配色
2017-01-05 10:12 655导航栏,菜单栏 左侧菜单 导航,底部,选择列表 ... -
BootstrapCSS之Select
2016-10-18 17:00 1046效果图: 代码: <!-- Inclu ... -
CSS样式之带边框的 Anchor(超链接)
2016-10-08 15:19 2880效果图: HTML: <a c ... -
bootstrap css之响应式导航栏
2016-08-29 16:58 16720- 使用 Twitter Bootstrap 3 创建响应式导 ... -
CSS之 white-space : pre
2016-06-15 10:21 954在 github 的代码浏览页面,可以看到这样的 css 样式 ... -
CSS - li 元素显示在一行____ a 元素没有下横线
2016-05-27 20:44 2181原文链接: http://www.w3schools.com/ ... -
CSS - table 圆角 border radius
2016-04-29 12:08 4537效果: 代码: <!DOCTYPE htm ... -
[css - hr ] border color 横线高度和颜色
2016-04-28 10:59 3695如果设定 hr 的 border,会发现其高度会比不设置高2倍 ...
相关推荐
css border实现Bubble提示框的方法是利用border属性来实现两个三角叠加,实现箭头的方法
firefox下没有问题,IE下显示不正常,CSS厉害的可以修改一下。
css圆角提示框是一款纯HTML CSS实现的圆角提示框效果,兼容所有浏览器。 css圆角提示框演示图:
javascript+css 实现QQ空间信息提示框
css实现Bubble提示框效果
CSS3提示框Tooltip动画是一款利用CSS3实现的提示框Tooltip动画。当鼠标移到图标按钮上时,就会在按钮正上方弹出一个Tooltip提示框,并且伴有淡入淡出的效果。
纯CSS实现tips帮助提示框代码,鼠标悬停在问号上,出现提示框。提示框有纯文字,html代码,图片三种形式。
HTML5+CSS3内置功能按钮提示框是一款功能的HTML5+CSS3弹出提示框,带有小图标,而且可以关闭提示框,可以内置一些功能按钮,比如确定和取消。
点击弹出提示框,可以用在PHP上,JS+CSS
气泡提示框牵扯到的技术有:JS响应鼠标的事件、纯CSS制作三角形,附截图及示例代码,感兴趣的朋友可以参考下
纯CSS实现的鼠标触及显示边框和描述的图片特效
使用原生原生css,button组件实现,可自定义程度高,可作为模态框、提示框等。界面效果好,适用于移动端网页、小程序的友好提示
纯CSS3实现的一组带提示框的ICON图标
毕业设计要做一个提示框:当鼠标放在某个链接上时,下边显示有提示功能的窗体。如下: 具体代码实现如下: CSS: 复制代码代码如下: .rhsyyhqDIV{ position:absolute; top:555px; left:200px; font-size: 9pt; ...
HTML5 css3制作的智能手机风格的弹出提示框,这些提示框一种有四种类型:1、操作成功、2、误提示、3、正在加载、4、通用提示。鼠标点击对应的演示按钮,即可显示出提示效果,每个提示框中的内容都具有动画效果。这些...
应用移动H5领域。CSS3 实现Loading加载,页面遮罩层的应用。
JS+CSS3实现动感弹窗提示框插件.zip
聊天内容需要用到气泡修饰,纯CSS开发的气泡式提示框,我们都熟悉使用CSS来生成页面上丰富的样式
之前我们已经分享过一款HTML5/CSS3分步提示框Tooltip ,不过这款...今天我们要分享一款利用CSS3实现的提示框Tooltip动画。当鼠标移到图标按钮上时,就会在按钮正上方弹出一个Tooltip提示框,并且伴有淡入淡出的效果。