因为css3尚未形成标准,所以现行的浏览器对于css3支持不太一致,某些特性需要加上浏览器前缀   css属性的浏览器前缀 
 前缀渲染引擎使用该引擎的浏览器-khtml-KHTMLKonqueror-ms-TridentInternet Explorer-moz-Mozillafirefox-o-*Prestoopera  opera mobile-webkit-WebKitsafar            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2023-10-19 16:30:23
                            
                                181阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            考虑过使用antdesign的tooltip或者popover,但是发现并不适合我,我不希望点击外部关闭它就需要重新修改交互,并且还要重置样式等,索性自己上手撸一个。实现弹出框本文主要分享弹出框的实现,内部的按钮等样式不给出具体的样式1. 首先写一个基础的盒子实现样式,button等样式不在代码中体现。<div class="tooltip">
    <span>我是小v            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2023-07-15 18:30:34
                            
                                560阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            # jQuery气泡提示框效果及其CSS实现
气泡提示框是一种常见的用户界面元素,能够在用户与网页交互时提供额外的信息。这种提示框常用于表单输入、按钮提示或任何需要上下文信息的地方。本文将介绍如何使用jQuery结合CSS实现气泡提示框效果,并给出相应的示例代码。
## 1. 什么是气泡提示框?
气泡提示框就是一个小的弹出窗口,它通常在用户将鼠标悬停在某个元素上时出现。这种设计不仅可以提高用            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2024-10-11 08:22:36
                            
                                158阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            <div class="divide"></div> <div class="user-right"> 2020-01-06 11:12:40 wang</div> <div class="chat-right"> <span>wsw今天天气不错呦,一起去海边走走怎么样??</span> <div            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2021-08-10 11:55:27
                            
                                791阅读
                            
                                                        
                                点赞
                            
                                                                             
                 
                
                             
         
            
            
            
            气泡框(或者提示框)是网页中一种很常见的元素,大多用来展示提示信息,如下图所示:拆分来看,形如这种气泡框无外乎就是一个矩形框+一个指示方向的三角形小箭头,要制作出这样的气泡框,如果解决了三角形小箭头就容易了。一种方法就
是制作这样一个三角形箭头的图片,然后定位在矩形框上。但这种解决办法在后期更改气泡框会很不方便,可能每修改一次气泡框都要重新制作一个三角形小图标。
如果我们能够直接用HTML和CSS            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                            精选
                                                        
                            2016-01-11 11:34:24
                            
                                1234阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            html部分: <div id="scatter"> <div class="bubble_min bubble10"></div> <div class="bubble_min bubble12"></div> <div class="bubble_min bubble8"></div> <div ...            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2021-08-17 18:00:00
                            
                                1489阅读
                            
                                                                                    
                                2评论
                            
                                                 
                 
                
                             
         
            
            
            
            原文地址:  CSS Triangles 演示地址:CSS Triangles Demo 原文日期: 2013年8月5日翻译日期: 2013年8月9日本文两种实现方式: 使用或不使用 before 和 :after 伪元素(伪类,pseudo-elements)最近重新设计了我的网站,准备添加tooltips提示信息效果.实现很容易,但我想要让提示功能具有三角形的指            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2022-02-16 15:05:16
                            
                                966阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            原文地址: CSS Triangles 演示地址:CSS Triangles Demo 原文日期: 2013年8月5日 翻译日期: 2013年8月9日 本文两种实现方式: 使用或不使用 before 和 :after 伪元素(伪类,pseudo-elements)最近重新设计了我的...            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2013-08-09 10:34:00
                            
                                765阅读
                            
                                                                                    
                                2评论
                            
                                                 
                 
                
                             
         
            
            
            
            实现原理可以把该对话框拆解为带圆角的普通矩形+三角形, 三角形可以借助border属性实现, 其中三角形占位可以借助CSS3的before、after伪元素实现.1.1 不带边框的对话框// html
<div class="bubble"></div>
// css
.bubble {
  width: 300px;
  height: 100px;
  border-r            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2021-02-03 20:37:05
                            
                                1227阅读
                            
                                                                                    
                                2评论
                            
                                                 
                 
                
                             
         
            
            
            
            欢迎关注前端早茶,与广东靓仔携手共同进阶 前端早茶专注前端,一起结伴同行,紧跟业界发展步伐~ 公众号作者:广东靓仔 气泡框(或者提示框)是网页中一种很常见的元素,大多用来展示提示信息,如下图所示: 拆分来看,形如这种气泡框无外乎就是一个矩形框+一个指示方向的三角形小箭头,要制作出这样的气泡框,如果解            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2022-05-12 21:33:03
                            
                                2272阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            气泡框(或者提示框)是网页中一种很常见的元素,大多用来展示提示信息,如下图所示:拆分来看,形如这种气泡框无外乎就是一个矩形框+一个指示方向的三角形小箭头,要制作出这样的气泡框,如果解决了三角形小箭头就容易了。一种方法就是制作这样一个三角形箭头的图片,然后定位在矩形框上。但这种解决办法在后期更改气泡框会很不方便,可能每修改一次气泡框都要重新制作一个三角形小图标。如果我们能够直接用HTML和CSS代码            
                
         
            
            
            
            <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Test</title> <style> .tip { position: relative; background-color: deepskyblue; margin: 2            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2021-08-04 15:29:25
                            
                                3473阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            文章目录用CSS画三角形气泡框正三角形的气泡框斜三角形的气泡框总结 在工作中,我们可能会遇到气泡框相关的需求,如下图: 这个气泡框我们可以使用纯CSS代码来实现。接下来跟我一起一步步实现吧!用CSS画三角形用CSS画个三角形,相信大家都很熟悉了吧。主要思路:将元素的的宽高设置为0;然后设置相应的边框即可实现。详细来讲就是给某一方向的边框添加宽度以及颜色,然后将其旁边两个方向(或一个)的边框设置高            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2024-01-21 02:27:31
                            
                                115阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            设计气泡悬浮框1.在网页设计中,气泡悬浮框常常用于页面中为某些对象显示提示信息,恰当地使用气泡悬浮框能够使网页布局更加完美,使网页看上去更漂亮、美观;2.一般而言,替换文本使用alt属性来呈现,说明性文本通过title属性来实现,这两个属性是HTML默认提供的功能,在网页设计中使用它们,容易引起用户的反感;3.在这种情况下,使用气泡悬浮框能够产生不一样的视觉体验。下面使用气泡悬浮框来设计网页中的替            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2024-07-01 22:03:57
                            
                                59阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            本篇文章介绍带边框的三角形与div形成的tooltip气泡。            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2012-07-22 21:51:00
                            
                                256阅读
                            
                                                                                    
                                2评论
                            
                                                 
                 
                
                             
         
            
            
            
            前提:气泡框或者提示框是网页很常见的,实现它的方式有很多,我们以前最常用的就是切图片 然后通过 "定位" 方式 定位到相应的位置,但是用这种方式维护很麻烦,比如设计师想改成另外一种或者另外一种颜色 那我们只有再次切图片等。下面我们来学习下使用html+css来实现这种效果!如下效果:  and  我们可以来分析下:要实现这种效果 无外乎就是一个矩形和一个小三角形 然后三角形定位            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2023-12-25 21:37:05
                            
                                105阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            最近做手机项目时候,需要实现一个类似iphone SMS效果的气泡效果。
这里分享下实现心得,
 
首先分析下iphone的气泡效果有一下特点
1. 圆角
2. 向下的外阴影
3. 上边和下边的内阴影
4. 上边内的一个内嵌的玻璃气泡的反光效果
 
首先定义一个容器,盒模型为display: inline-block,方便自            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                            精选
                                                        
                            2012-07-11 10:19:38
                            
                                501阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            最近,在 CodePen 上看到这样一个非常有意思的效果: 这个效果的核心难点在于气泡的一种            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2022-10-05 23:03:02
                            
                                137阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            最近,在 CodePen 上看到这样一个非常有意思的效果: 这            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2022-10-05 23:03:21
                            
                                164阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            前言气泡框作为社交聊天软件的基本功能,想必大家都了解怎么实现了。但是像国内巨头腾讯旗下的QQ气泡(尤其是动态的)我想应该是没有几个。这里就为大家提供一种类似QQ动态气泡的解决方案(还不完善)。首先用到了一个第三方Lottie, airbnb做的一个专门做动画的东西。专门研究过动画的应该都知道或了解。简单讲就是通过插件将AE中画的动画转换成json文件,然后按照特定规则转换到页面上通过CABaseA            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2023-08-28 15:44:33
                            
                                49阅读
                            
                                                                             
                 
                
                                
                    