HTML5 带未读提示的聊天应用的图标

Messages Logo。点击图标，左上角的红色小圆圈提示消息数字会减少。

message

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2031
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    background: #d8d8d8;
}
p {
    font-family: sans-serif;
    color: #fff;
    text-align: center;
    font-size: 30px;
    padding-top: 19px;
}
#bluebubble {
    margin: 0 auto;
    position: relative;
    top: 30px;
    width: 150px;
    height: 130px;
    border-radius: 50%;
    background: linear-gradient(#09e4ff, #4666fe);
}
#pointyend {
    width: 60px;
    height: 40px;
    position: relative;
    top: 100px;
    left: -5px;
    border-radius: 50%;
    background: #4666fe;
    z-index: -1;
}
#curve {
    width: 60px;
    height: 60px;
    position: relative;
    top: -10px;
    left: -20px;
    background: #d8d8d8;
    border-radius: 50%;
}
#whitebubble {
    width: 90px;
    height: 80px;
    position: relative;
    border-radius: 50%;
    top: 30px;
    left: 60px;
    background: linear-gradient(#e1e3e4, #a5a8ac);
}
#dot,
#dotdot,
#dotdotdot {
    position: relative;
    top: 33px;
    left: 16px;
    z-index: 30;
    width: 14px;
    height: 14px;
    background: #545454;
    border-radius: 50%;
}
#dotdot {
    top: 0px;
    left: 21px;
}
#dotdotdot {
    top: -14px;
    left: 42px;
}
#pointyend2 {
    width: 35px;
    height: 26px;
    position: relative;
    top: 42px;
    left: 60px;
    border-radius: 50%;
    background: #a9acb0;
    z-index: -2;
    transform: rotate(-15deg);
}
#curve2 {
    width: 30px;
    height: 30px;
    position: relative;
    left: 10px;
    background: #d8d8d8;
    border-radius: 50%;
    z-index: -1;
}
#circle {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    position: relative;
    top: -165px;
    left: 100px;
    background: #f30808;
    box-shadow: 0px 0px 5px #404040;
}

HTML

Messages Logo。点击图标，左上角的红色小圆圈提示消息数字会减少。

message

编辑器支持Emmet

快捷键

Messages Logo。点击图标，左上角的红色小圆圈提示消息数字会减少。

message

HTML5 动态留言板 | 留言墙

消息通知徽章柔性气泡动画（带数字的消息提示图标）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：