纯css实现气泡效果

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

效果图:


 主要运用的是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

Js实现时钟效果

在JavaScript中,有一个内置对象Date,它重要的一个作用就是实现了时间的时刻更新,通过代码来创造一个实实在在的时间表。

CSS3的过渡效果,使用transition实现鼠标移入/移出效果

在css中使用伪类虽然实现了样式的改变,但由于没有过渡效果会显得很生硬。以前如果要实现过渡,就需要借助第三方的js框架来实现。现在只需要使用CSS3的过渡(transition)功能,就可以从一组样式平滑的切换到另一组样式。

多种方式实现吸顶效果

还是前两天的那个唱歌中间页,上线前发现滚动时候体验不好。因为之前没有做吸顶效果,搜索内容然后滚下去,没有找到内容需要再手动划上来。

CSS如何在页面加载时创建淡入效果?

想要使用CSS在页面加载上创建淡入效果,可以使用css的animation属性或transition属性在页面加载时创建淡入效果。下面就来通过示例来介绍一下。通过2个关键帧来定义CSS动画:一个不透明度设置为0,另一个不透明度设置为1。

用纯css模拟下雪的效果

下雪效果只是一类效果的名称,可以是红包雨等一些自由落体的运动效果,本文就是用纯css模拟下雪的效果,更多效果大家可以自行发挥。

vue实现标签3D云效果

主要介绍了vue实现标签云效果的方法,结合实例形式详细分析了vue标签云的实现技巧与相关操作注意事项,需要的朋友可以参考下

CSS实现雨滴动画效果

今天我们要实现的是雨滴效果,不过实现雨滴前,我们先把毛玻璃的效果弄出来,没有玻璃窗,雨都进屋了,还有啥好敲打的。其实就是给一张图片,做了个模糊化的效果,看起来像毛玻璃的效果

CSS实现文字下面波浪线动画效果

就是使用径向渐变绘制我们的波浪线效果,一个波浪线循环段是有一个朝上的半个圆弧和一个朝下的半个圆弧组合而成的。所以,我们只要使用径向渐变绘制圆弧

css按钮交互效果

是利用了:active和box-shadow两个特性来实现的。希望通过这个简单效果,能让更多的朋友喜欢上css。首先来说一下:active,就是当用户按住一个a标签的时候的意思,鼠标点击下去但没有松开的时候就这样样子啦。

ES6前后实现排它的两种写法

排它思想:清除其它所有的没有选中元素的样式, 只设置当前选中元素的样式

点击更多...

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