限时优惠活动
亲爱的苦力吧用户，我们为了回馈新老用户一直以来的鼎力支持，即日起（2025-02-06至2025-03-06）凡是购买苦力吧VIP/充值K币的新老用户，都直接可获得买一送一的优惠馈赠。例如：购买一个月的VIP会员可直接获得两个月的VIP会员；充值100K币可直接获得200K币，以此类推！有任何疑问可联系在线客服，感谢各位用户对苦力吧素材的信任与厚爱，我们将一如既往的给大家上新更多优质的素材源码，祝大家开工大吉、工作顺利、心想事成。
  1. 首页
  2. 网页特效
  3. 其它&杂项

9种不同的CSS聊天消息语音气泡特效代码

所属分类： 网页特效-其它&杂项    2023-12-16 11:36:22

 51K  3  查看评论 (3)
9种不同的CSS聊天消息语音气泡特效代码 ie兼容6
 查看演示  登录后下载 温馨提示
登录会员即可享受免费下载  我要建站

9种不同的CSS聊天消息语音气泡特效代码（共2个文件）

    • index.html

使用方法

  • code
  • source
  1. .cd__main{

  2.    background: linear-gradient(to right, #36d1dc, #5b86e5) !important;

  3. }

  4. 

  5. /* General CSS Setup */

  6. body{

  7.   background-color: lightblue;

  8.   font-family: "Ubuntu-Italic", "Lucida Sans", helvetica, sans;

  9. }

  10. 

  11. /* container */

  12. .container {

  13.   padding: 5% 5%;

  14. }

  15. 

  16. /* CSS talk bubble */

  17. .talk-bubble {

  18.     margin: 40px;

  19.   display: inline-block;

  20.   position: relative;

  21.     width: 200px;

  22.     height: auto;

  23.     background-color: lightyellow;

  24. }

  25. .border{

  26.   border: 8px solid #666;

  27. }

  28. .round{

  29.   border-radius: 30px;

  30.     -webkit-border-radius: 30px;

  31.     -moz-border-radius: 30px;

  32. 

  33. }

  34. 

  35. /* Right triangle placed top left flush. */

  36. .tri-right.border.left-top:before {

  37.     content: ' ';

  38.     position: absolute;

  39.     width: 0;

  40.     height: 0;

  41.   left: -40px;

  42.     right: auto;

  43.   top: -8px;

  44.     bottom: auto;

  45.     border: 32px solid;

  46.     border-color: #666 transparent transparent transparent;

  47. }

  48. .tri-right.left-top:after{

  49.     content: ' ';

  50.     position: absolute;

  51.     width: 0;

  52.     height: 0;

  53.   left: -20px;

  54.     right: auto;

  55.   top: 0px;

  56.     bottom: auto;

  57.     border: 22px solid;

  58.     border-color: lightyellow transparent transparent transparent;

  59. }

  60. 

  61. /* Right triangle, left side slightly down */

  62. .tri-right.border.left-in:before {

  63.     content: ' ';

  64.     position: absolute;

  65.     width: 0;

  66.     height: 0;

  67.   left: -40px;

  68.     right: auto;

  69.   top: 30px;

  70.     bottom: auto;

  71.     border: 20px solid;

  72.     border-color: #666 #666 transparent transparent;

  73. }

  74. .tri-right.left-in:after{

  75.     content: ' ';

  76.     position: absolute;

  77.     width: 0;

  78.     height: 0;

  79.   left: -20px;

  80.     right: auto;

  81.   top: 38px;

  82.     bottom: auto;

  83.     border: 12px solid;

  84.     border-color: lightyellow lightyellow transparent transparent;

  85. }

  86. 

  87. /*Right triangle, placed bottom left side slightly in*/

  88. .tri-right.border.btm-left:before {

  89.     content: ' ';

  90.     position: absolute;

  91.     width: 0;

  92.     height: 0;

  93.     left: -8px;

  94.   right: auto;

  95.   top: auto;

  96.     bottom: -40px;

  97.     border: 32px solid;

  98.     border-color: transparent transparent transparent #666;

  99. }

  100. .tri-right.btm-left:after{

  101.     content: ' ';

  102.     position: absolute;

  103.     width: 0;

  104.     height: 0;

  105.     left: 0px;

  106.   right: auto;

  107.   top: auto;

  108.     bottom: -20px;

  109.     border: 22px solid;

  110.     border-color: transparent transparent transparent lightyellow;

  111. }

  112. 

  113. /*Right triangle, placed bottom left side slightly in*/

  114. .tri-right.border.btm-left-in:before {

  115.     content: ' ';

  116.     position: absolute;

  117.     width: 0;

  118.     height: 0;

  119.     left: 30px;

  120.   right: auto;

  121.   top: auto;

  122.     bottom: -40px;

  123.     border: 20px solid;

  124.     border-color: #666 transparent transparent #666;

  125. }

  126. .tri-right.btm-left-in:after{

  127.     content: ' ';

  128.     position: absolute;

  129.     width: 0;

  130.     height: 0;

  131.     left: 38px;

  132.   right: auto;

  133.   top: auto;

  134.     bottom: -20px;

  135.     border: 12px solid;

  136.     border-color: lightyellow transparent transparent lightyellow;

  137. }

  138. 

  139. /*Right triangle, placed bottom right side slightly in*/

  140. .tri-right.border.btm-right-in:before {

  141.     content: ' ';

  142.     position: absolute;

  143.     width: 0;

  144.     height: 0;

  145.   left: auto;

  146.     right: 30px;

  147.     bottom: -40px;

  148.     border: 20px solid;

  149.     border-color: #666 #666 transparent transparent;

  150. }

  151. .tri-right.btm-right-in:after{

  152.     content: ' ';

  153.     position: absolute;

  154.     width: 0;

  155.     height: 0;

  156.   left: auto;

  157.     right: 38px;

  158.     bottom: -20px;

  159.     border: 12px solid;

  160.     border-color: lightyellow lightyellow transparent transparent;

  161. }

  162. /*

  163.     left: -8px;

  164.   right: auto;

  165.   top: auto;

  166.     bottom: -40px;

  167.     border: 32px solid;

  168.     border-color: transparent transparent transparent #666;

  169.     left: 0px;

  170.   right: auto;

  171.   top: auto;

  172.     bottom: -20px;

  173.     border: 22px solid;

  174.     border-color: transparent transparent transparent lightyellow;

  175. 

  176. /*Right triangle, placed bottom right side slightly in*/

  177. .tri-right.border.btm-right:before {

  178.     content: ' ';

  179.     position: absolute;

  180.     width: 0;

  181.     height: 0;

  182.   left: auto;

  183.     right: -8px;

  184.     bottom: -40px;

  185.     border: 20px solid;

  186.     border-color: #666 #666 transparent transparent;

  187. }

  188. .tri-right.btm-right:after{

  189.     content: ' ';

  190.     position: absolute;

  191.     width: 0;

  192.     height: 0;

  193.   left: auto;

  194.     right: 0px;

  195.     bottom: -20px;

  196.     border: 12px solid;

  197.     border-color: lightyellow lightyellow transparent transparent;

  198. }

  199. 

  200. /* Right triangle, right side slightly down*/

  201. .tri-right.border.right-in:before {

  202.     content: ' ';

  203.     position: absolute;

  204.     width: 0;

  205.     height: 0;

  206.   left: auto;

  207.     right: -40px;

  208.   top: 30px;

  209.     bottom: auto;

  210.     border: 20px solid;

  211.     border-color: #666 transparent transparent #666;

  212. }

  213. .tri-right.right-in:after{

  214.     content: ' ';

  215.     position: absolute;

  216.     width: 0;

  217.     height: 0;

  218.   left: auto;

  219.     right: -20px;

  220.   top: 38px;

  221.     bottom: auto;

  222.     border: 12px solid;

  223.     border-color: lightyellow transparent transparent lightyellow;

  224. }

  225. 

  226. /* Right triangle placed top right flush. */

  227. .tri-right.border.right-top:before {

  228.     content: ' ';

  229.     position: absolute;

  230.     width: 0;

  231.     height: 0;

  232.   left: auto;

  233.     right: -40px;

  234.   top: -8px;

  235.     bottom: auto;

  236.     border: 32px solid;

  237.     border-color: #666 transparent transparent transparent;

  238. }

  239. .tri-right.right-top:after{

  240.     content: ' ';

  241.     position: absolute;

  242.     width: 0;

  243.     height: 0;

  244.   left: auto;

  245.     right: -20px;

  246.   top: 0px;

  247.     bottom: auto;

  248.     border: 20px solid;

  249.     border-color: lightyellow transparent transparent transparent;

  250. }

  251. 

  252. /* talk bubble contents */

  253. .talktext{

  254.   padding: 1em;

  255.     text-align: left;

  256.   line-height: 1.5em;

  257. }

  258. .talktext p{

  259.   /* remove webkit p margins */

  260.   -webkit-margin-before: 0em;

  261.   -webkit-margin-after: 0em;

  262. }

.cd__main{
   background: linear-gradient(to right, #36d1dc, #5b86e5) !important;
}

/* General CSS Setup */
body{
  background-color: lightblue;
  font-family: "Ubuntu-Italic", "Lucida Sans", helvetica, sans;
}

/* container */
.container {
  padding: 5% 5%;
}

/* CSS talk bubble */
.talk-bubble {
    margin: 40px;
  display: inline-block;
  position: relative;
    width: 200px;
    height: auto;
    background-color: lightyellow;
}
.border{
  border: 8px solid #666;
}
.round{
  border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;

}

/* Right triangle placed top left flush. */
.tri-right.border.left-top:before {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
  left: -40px;
    right: auto;
  top: -8px;
    bottom: auto;
    border: 32px solid;
    border-color: #666 transparent transparent transparent;
}
.tri-right.left-top:after{
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
  left: -20px;
    right: auto;
  top: 0px;
    bottom: auto;
    border: 22px solid;
    border-color: lightyellow transparent transparent transparent;
}

/* Right triangle, left side slightly down */
.tri-right.border.left-in:before {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
  left: -40px;
    right: auto;
  top: 30px;
    bottom: auto;
    border: 20px solid;
    border-color: #666 #666 transparent transparent;
}
.tri-right.left-in:after{
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
  left: -20px;
    right: auto;
  top: 38px;
    bottom: auto;
    border: 12px solid;
    border-color: lightyellow lightyellow transparent transparent;
}

/*Right triangle, placed bottom left side slightly in*/
.tri-right.border.btm-left:before {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: -8px;
  right: auto;
  top: auto;
    bottom: -40px;
    border: 32px solid;
    border-color: transparent transparent transparent #666;
}
.tri-right.btm-left:after{
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: 0px;
  right: auto;
  top: auto;
    bottom: -20px;
    border: 22px solid;
    border-color: transparent transparent transparent lightyellow;
}

/*Right triangle, placed bottom left side slightly in*/
.tri-right.border.btm-left-in:before {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: 30px;
  right: auto;
  top: auto;
    bottom: -40px;
    border: 20px solid;
    border-color: #666 transparent transparent #666;
}
.tri-right.btm-left-in:after{
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: 38px;
  right: auto;
  top: auto;
    bottom: -20px;
    border: 12px solid;
    border-color: lightyellow transparent transparent lightyellow;
}

/*Right triangle, placed bottom right side slightly in*/
.tri-right.border.btm-right-in:before {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
  left: auto;
    right: 30px;
    bottom: -40px;
    border: 20px solid;
    border-color: #666 #666 transparent transparent;
}
.tri-right.btm-right-in:after{
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
  left: auto;
    right: 38px;
    bottom: -20px;
    border: 12px solid;
    border-color: lightyellow lightyellow transparent transparent;
}
/*
    left: -8px;
  right: auto;
  top: auto;
    bottom: -40px;
    border: 32px solid;
    border-color: transparent transparent transparent #666;
    left: 0px;
  right: auto;
  top: auto;
    bottom: -20px;
    border: 22px solid;
    border-color: transparent transparent transparent lightyellow;

/*Right triangle, placed bottom right side slightly in*/
.tri-right.border.btm-right:before {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
  left: auto;
    right: -8px;
    bottom: -40px;
    border: 20px solid;
    border-color: #666 #666 transparent transparent;
}
.tri-right.btm-right:after{
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
  left: auto;
    right: 0px;
    bottom: -20px;
    border: 12px solid;
    border-color: lightyellow lightyellow transparent transparent;
}

/* Right triangle, right side slightly down*/
.tri-right.border.right-in:before {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
  left: auto;
    right: -40px;
  top: 30px;
    bottom: auto;
    border: 20px solid;
    border-color: #666 transparent transparent #666;
}
.tri-right.right-in:after{
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
  left: auto;
    right: -20px;
  top: 38px;
    bottom: auto;
    border: 12px solid;
    border-color: lightyellow transparent transparent lightyellow;
}

/* Right triangle placed top right flush. */
.tri-right.border.right-top:before {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
  left: auto;
    right: -40px;
  top: -8px;
    bottom: auto;
    border: 32px solid;
    border-color: #666 transparent transparent transparent;
}
.tri-right.right-top:after{
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
  left: auto;
    right: -20px;
  top: 0px;
    bottom: auto;
    border: 20px solid;
    border-color: lightyellow transparent transparent transparent;
}

/* talk bubble contents */
.talktext{
  padding: 1em;
    text-align: left;
  line-height: 1.5em;
}
.talktext p{
  /* remove webkit p margins */
  -webkit-margin-before: 0em;
  -webkit-margin-after: 0em;
}

站长提示：
1. 苦力吧素材官方QQ群：950875342
2. 平台上所有素材资源，需注册登录会员方能正常下载。
3. 会员用户积极反馈网站、素材资源BUG或错误问题，每次奖励2K币。
4. PHP源码类素材，如需协助安装调试，或你有二次开发需求，可联系苦力吧客服。
5. 付费素材资源，需充值后方能下载，如有任何疑问可直接联系苦力吧客服
标签： 聊天气泡对话语音消息
相关资源 / 其它&杂项
查看更多

基于CSS3手机移动端单页触摸滑动特效代码

 page.js是一个单页模拟触屏滑动插件，用于在单页网站和单页web网页上实现基于CSS3的平滑页面转换效果，带点击按钮抖动特效。
  其它&杂项
 6622  0

jquery页面加载完所有img图片后再执行代码特效

 一款图片成功加载后再执行插件，可在页面DOM中的所有图片（含img或背景图片）成功加载后运行代码。
  其它&杂项
 5381  0

jquery基于bootstrap可自由切换的暗亮模式

 一款响应式页面白天黑夜模式插件，鼠标点击切换按钮，可自由切换到白天（白色背景）夜晚（黑色背景）模式，超实用。
  其它&杂项
 8434  0

jquery轻量级浮动置顶粘性侧边栏插件

 一个超小的jQuery粘性侧边栏插件，页面滚动条滚动时侧边栏模块始终浮动可见，置于顶部，很实用。
  其它&杂项
 4382  0

评论数(3) 回复有机会获得K币 用户协议

    gutou8880
    2024-05-16 21:13:17
    铁头de科技0
    2024-01-18 14:22:53
    跳动的灵魂0
    2023-12-22 15:09:26
😀
  • 😀
  • 😊
  • 😂
  • 😍
  • 😑
  • 😷
  • 😵
  • 😛
  • 😣
  • 😱
  • 😋
  • 😎
  • 😵
  • 😕
  • 😶
  • 😚
  • 😜
  • 😭
发表评论