css伪元素实现tootip提示框
先看效果
废话不说,直接上图(请把鼠标移到我的头像上),看看今天要做的是什么:
实现原理
这些提示框原理都是一样的,且只需一个div标签就能实现,当然也有笨方法,比如用多个标签相互重叠、遮盖,或者干脆用图片,也能实现,但那样就没有讨论的意义了。今天要说的是用css的伪元素实现:before 和 :after 。伪元素顾名思义就是html标签中不存在的元素,是用css“虚拟”出来的。这样对一个div标签来说就活生生的多出了两个(伪)元素。一个在前,一个在后。控制这两个伪元素的大小、位置、边框、圆角、层级就能实现多种多样的效果。
先说说圆角
border-radius是css3最常用的属性之一了,有了它再也不要用图片实现圆角了,其参数个数和margin,padding类似,可分别给出1、2、3、4个参数值:
一个值:控制四个拐角。
两个值:第一个值控制 左上,右下。第二个值控制 右上,左下。
三个值:第一个值控制 左上。第二个值控制 右上 和 左下。第三个值控制右下。
四个值:按顺时针方向分别控制 左上,右上,右下,左下。
用以上方法控制四个拐角的弧度可实现基本的圆角,对于一个正方行来说把圆角设大了可形成一个圆圈,如下一个长宽为100px的div:
圆角为10px时: 圆角为40px时:
圆角为50px时(长宽的一半):
对于一个长100px,宽200px的矩形来说,效果如下:
圆角为10px时:
圆角为40px时:
圆角为50px时:
那么问题来了,怎样画出一个椭圆?
怎样实现椭圆?
由上图可看出,圆角之所以能形成是由两个圆角半径决定的:垂直半径和水平半径。当两者相等,且都为50px时就形成了一个圆,当两者不等时就形成了椭圆,代码写法为:
效果:
控制伪元素
圆角,圆形,椭圆实现好后,其余效果就靠伪元素来实现了,先说一说第一个效果图中的三角形吧,其重要的一步就是设置指定的边框颜色为透明,如 border-top-color:transparent。看代码:
效果:
代码:效果:
三角形出现后,剩下的就是调整其位置,让它与主体连接,这样简单的提示框就实现了。要想出现白色效果那就用另一个伪元素 :after,设置其边框(三角形)颜色为白色,盖在紫色三角形上,位置往后移动几个像素就形成了紫色边框效果:
怎样实现边框更圆滑的提示窗?
三角形提示窗略显生硬,下面说的是更有美感的提示窗,原理是相同的,其核心是控制伪元素4个边框的长度不等、圆角也不等,“揉捻”出奇奇怪怪的形状,然后相互组合、遮盖,比如以下伪元素形状:
代码:
然后用另一个伪元素:after遮盖:
小提示1:如果想做出更复杂的效果,或许div的两个伪元素已经不够用了,那就添加<p>标签,控制使用<p>的两个伪元素,这样又多了两个千奇百怪的图形,应该够用啦:
<div>
<p>你在想什么?</p>
</div>
小提示2:留意代码中的 content:''; 试试以下unicode码属性值:
content:"\25c1";
content: "\25a8";
content:"\0027";
content:"\00a0";
更多特殊符号,点击Unicode字符列表。
(完)
css伪元素实现tootip提示框的更多相关文章
- css伪元素用法大全
本文主要讲解css伪元素的用法,有需要的朋友可以阅读此文.本文讲解的伪元素有:before,after. 什么是伪元素(Pseudo element)? 伪元素不是真正的元素,不存在与文档之中,所以j ...
- CSS——伪元素
CSS伪元素 伪元素的语法: selector:pseudo-element {property:value;} 作 用 添加特殊样式 :first-line 伪元素 "first-l ...
- jQuery如何改变css伪元素样式
首先我们看一下css伪元素是什么: CSS 伪元素用于向某些选择器设置特殊效果. 伪元素有哪些: :first-line 伪元素:"first-line" 伪元素用于向文本的首行设 ...
- 使用纯CSS实现带箭头的提示框
爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6187323.html 1.全部代码 <!DOCTYPE html> < ...
- css 伪元素分享!!!
最近接触到的css 伪元素觉得还算不错 分享下: 1.清楚内盒浮动设置: ;} .back_list ul:after{;visibility: hidden;}/*清楚内盒浮动设置*/ 2.伪元素a ...
- CSS伪类与CSS伪元素的区别及由来
关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因 ...
- (六)CSS伪元素
CSS伪元素用于向某些选择器设置特殊效果. 伪元素的用法和伪类相似: selector:pseudo-element {property:value;} CSS类也可以与伪元素配合使用: select ...
- CSS 伪元素
CSS伪元素是用来添加一些选择器的特殊效果. 语法 伪元素的语法: selector:pseudo-element {property:value;} CSS类也可以使用伪元素: selector.c ...
- css伪元素
CSS 伪元素用于向某些选择器设置特殊效果. 1.:first-line 伪元素 "first-line" 伪元素用于向文本的首行设置特殊样式.注意:"first-li ...
随机推荐
- SharePoint Server 2013开发之旅(二):使用在线的开发人员网站进行SharePoint App开发
上一篇我已经介绍了新版本的SharePoint Server提供了四种主要的开发场景,其中一个全新的App开发模型让我们眼前一亮.这一篇我将介绍如何在线进行SharePoint App开发. 谈到Sh ...
- spring aop源码实现分析
1. 先分析Advice before执行Cglib2AopProxy的intercept方法: /** * General purpose AOP callback. Used when the t ...
- [转载]UML用例图总结
前言 用例图主要用来描述“用户.需求.系统功能单元”之间的关系.它展示一个外部用户能够观察到的系统功能模型图.用例图多用于静态建模阶段(主要是业务建模和需求建模),帮助开发团队以一种可视化的方式理解系 ...
- 讲讲Handler+Looper+MessageQueue 关系
Handler+Looper+MessageQueue这三者的关系其实就是Android的消息机制.这块内容相比开发人员都不陌生,在面试中,或者日常开发中都会碰到,今天就来讲这三者的关系. 概述: H ...
- js单击输入框后弹出提示信息效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- C# 线程系列三 定时器线程
上一篇文章我们讲诉了自定义线程执行器和任务处理器 我们继续来讲解自定义线程的定时执行器,我们在很多场景下需要做到某些状态或者数据进行更新,如果事情很多很杂,很时候时候会创建很多不同的定时器那么势必会照 ...
- OpenJudge4980:拯救行动//stl优先队列
总时间限制: 10000ms 内存限制: 65536kB 描述 公主被恶人抓走,被关押在牢房的某个地方.牢房用N*M (N, M <= 200)的矩阵来表示.矩阵中的每项可以代表道路(@). ...
- 关于Html与css的一些解释
一.简单介绍 1.html,是hyper text markup language的缩写,中文为“超文本标记语言”. 2.html不是编程语言而是一种标记语言. 二.标签与元素 1.html标签:如& ...
- LeetCode - Binary Tree Level Order Traversal II
题目: Given a binary tree, return the bottom-up level order traversal of its nodes' values. (ie, from ...
- java继承的对象中构造函数的调用顺序
建立两个继承关系的对象 public class Machine { public String machieNameString; public Machine() { System.out.pri ...