纯css实现气泡效果

时间: 2018-10-18阅读: 1422标签: 效果

效果图:


 主要运用的是1.border 组成的直角三角形。2,before 和 after 伪元素 。3,z-index属性


css代码

div.bubble{
  position: absolute;
  margin: 0;
  padding: 0;
  color: #86181d;
  background-color: #ffdce0;
  border-color: #cea0a5;
  display:block;
  border:1px solid;
  border-radius: 4px;
  padding: 2px;
}
div.bubble::before{
  content: ' ';
  display: block;
  border-right:7px solid #ffdce0;
  border-left:7px solid  transparent;
  border-top:7px solid  transparent;
  border-bottom: 7px solid transparent;
  width: 0px;
  height: 0px;
  position: absolute;
  top:4px;
  left:-14px;
  z-index: 3;
}
div.bubble::after{
  content: ' ';
  display: block;
  border-right:8px solid #86181d;
  border-left:8px solid  transparent;
  border-top:8px solid  transparent;
  border-bottom: 8px solid transparent;
  width: 0px;
  height: 0px;
  position: absolute;
  top:3px;
  left:-16.5px;
  z-index: 2;
}


1. 将元素的长宽设置为0,并且将border的3条边设置为透明的,就会出现border颜色的直角三角形;

2. 利用伪元素after和before,可以不用另外创建子元素,这可以避免不必要的dom复杂性

3. 用两个border设置的三角形,一大一小,可以模拟边框的效果


原文地址:https://www.cnblogs.com/incredible-x/p/9807212.html  

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/1161

利用CSS变量实现炫酷的悬浮效果

最近,我从 Grover网站 上发现以一个好玩儿的悬停动画,这个动画是将鼠标移动到订阅按钮上移动光标,会跟随光标实现相应的彩色渐变。这个想法很简单,但是它能使这个按钮脱颖而出,人们一下子就注意到它了,增加了点击的概率。

纯css实现星级评分效果

纯css实现超酷炫的星级评分动画效果,实现思路:5个类型为radio的input,label标签修改样式背景图为星星,label标签给每个星星鼠标停留时加注名字,点击星星有放大旋转的动画

css实现中间文字,两边横线效果

vertical-align 属性设置元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。

css滚动视差之水波纹效果

核心属性: background-attachment;这个属性就牛逼了, 它可以定义背景图片是相对视口固定,还是随着视口滚动, 加上这个属性网页瞬间就从屌丝变成高大上。

CSS遮罩效果(模糊效果,阴影效果,毛玻璃效果)

一般遮罩加上透明度opacity就是阴影效果。阴影效果和一般遮罩一样,唯一不同的是设置.mask遮罩的背景色用rgba()表示,当然hsla()也是可以的。模糊效果(毛玻璃效果) 通过 filter来实现

css文字选中效果

文字选中效果,这个可能很少有人注意过。在默认状态先一般选中的文本颜色是白字蓝底的,不过可以通过CSS进行设置。::selection定义元素上的伪选择器,以便在选定元素时设置其中文本的样式。

css如何实现首字下沉效果?

在CSS中可以使用伪元素::first-letter来选中一段文本的首字,然后使用font-size属性设置首字大小,在通过float属性来将实现下沉效果。:first-letter 伪元素向文本的第一个字母添加特殊样式。

JavaScript 实现打字机效果,跑马灯效果

这篇文章在不使用任何插件的情况,以最简洁的原生javascript来实现打字机效果和跑马灯效果。打字效果即把一段话一个字一个字的显示出来。

一个简易的 LED 数字时钟Js实现方法

这个应该是已经有很多人做过的东西,我应该只是算手痒,想写一下,所以,花了点时间折腾了这个,顺便把 Dark Mode 的处理也加上了

CSS 搞怪的 text-decoration

今天在改一个项目的时候却遇到了一个莫名其妙的属性:text-decoration,这个属性,其实就只是用来把一段文字加上上横线、删除线或底线的属性罢了,通常会用在移除超链接的底线、或一些特殊强调的效果里头

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!