【基础】小程序实现聊天气泡样式

newsning 发布于2019-08-30 15:55 / 2650人阅读

wxml文件


        点击邀请你的另一半~

wxss文件

.invite {
  /* display: none; */
  width: 250rpx;
  font-size: 25rpx;
  height: 50rpx;
  line-height: 50rpx;
  padding-left: 20rpx;
  position: relative;
  margin: 120rpx auto 0 35rpx;
  background-color: #FFF0F5;
  border: 1px solid #FFB5C5;
  border-radius: 5px;
}
.invite:after {
  content: "";
  width: 20rpx;
  height: 20rpx;
  position: absolute;
  top: -11rpx;
  left: 20rpx;
  transform: rotate(45deg);
  background-color: #FFF0F5;
  border: 1px #FFB5C5;
  border-style: solid none none solid ;
}

云服务器 GPU云服务器小程序即时聊天聊天气泡小程序聊天api 小程序聊天sdk

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117363.html

CSS3 巧妙实现聊天气泡

摘要：想必大家都知道，这里不赘述，聊一聊其他实现方法。这里的三角形部分可以使用正方形代替，实现同样效果，方法就是旋转小正方形使其一部分露在外面。 showImg(https://segmentfault.com/img/bVEcKn?w=4136&h=1956); 前一阵子敢玩的 Mobile 页改版完成了，就之前的页面风格更加扁平化，从暗色系为主背景转到亮色背景，去掉更多的阴影，给用户简约...

bang590 2019-08-29 11:26 评论0 收藏0
CSS3 聊天气泡框以及 inherit、currentColor 关键字

摘要：效果如上图所示，主要用到的伪类，以及圆角边框属性。的属性的使用然后通过定位到合适的位置。实现气泡框结果也很简单，就一个。的关键字与之类似的还有一个新的颜色属性。实际上，这是中有史以来第一个变量，虽然功能很有限，但它真的是个变量。 showImg(https://segmentfault.com/img/remote/1460000010869212);效果如上图所示，主要用到CSS3的...

kel 2019-08-29 11:02 评论0 收藏0
CSS3 聊天气泡框以及 inherit、currentColor 关键字

摘要：效果如上图所示，主要用到的伪类，以及圆角边框属性。的属性的使用然后通过定位到合适的位置。实现气泡框结果也很简单，就一个。的关键字与之类似的还有一个新的颜色属性。实际上，这是中有史以来第一个变量，虽然功能很有限，但它真的是个变量。 showImg(https://segmentfault.com/img/remote/1460000010869212);效果如上图所示，主要用到CSS3的...

_ipo 2019-08-01 15:30 评论0 收藏0
SegmentFault 技术周刊 Vol.38 - 神奇的 CSS

摘要：层叠即表示允许以多种方式来描述样式，一个元素可以被渲染呈现出多种样式。可以让属性的变化过程持续一段时间，而不是立即生效。比如，将元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用后，将按一个曲线速率变化。 showImg(https://segmentfault.com/img/bVZwyL?w=900&h=385); CSS 的全称是 Cascading Style Sheet...

elliott_hu 2019-08-29 13:56 评论0 收藏0