CSS 常用样式

 

---

会话尖角气泡：

在线demo       （效果图）     

<div class="bubble">泡内文字</div>

.bubble{
  color: #fff;
  text-align: center;
  line-height: 100px;
  width: 100px;
  height: 100px;
  border-radius: 10px;
  border: 2px solid #000;
  background: green;
  position: relative;
}
.bubble:before{
  content: "";          /* 必须 否则不显示 */
  width: 20%;           /* 尖角大小 宽 */
  height: 20%;          /* 尖角大小 高 */
  position: absolute;
  left: 40%;            /* 50% - 宽度一半 */
  top: 90%;             /* 100% - 宽度一半 */
  background: inherit;
  border-bottom: inherit;
  border-right: inherit;
  transform: rotate(45deg);
}

---

 图像改色(filter)：

效果图：           

 

img {
  filter: blur(1px);                       /* 失焦 */
  filter: brightness(150%);                /* 亮度 */
  filter: contrast(50%);                   /* 对比度 */
  filter: drop-shadow(140px 0 0 green);    /* 阴影 */
  filter: hue-rotate(180deg);              /* 色相旋转 */
  filter: invert(100%);                    /* 反转 */
  filter: grayscale(100%);                 /* 灰度 */
  filter: sepia(100%);                     /* 棕褐色(度) */
}

多说一句，关于 "filter: drop-shadow()" 修改图片颜色，需要特殊技巧，详见 在线demo ，或 别家博主的文章 。如效果图所示， "filter" 对边框文字同样生效。

---

3D按钮：

效果图如下：            在线demo

 主要利用边框颜色和背景色的色差达到3D效果，按下的颜色为原色的相反值。可以尝试其他颜色以达到不同效果。

<button class="btn">按钮</button>
<button class="btn btnActive">按下</button>

.btn {
  height: 30px;
  width: 100px;
    border-width: 4px;
    border-style: solid;
    border-color: #777 #333 #444 #777;  /* 重点代码 */
    background: #555;  /* 重点代码 */
    color: #ddd;
}
.btnActive {
    border-color: #777 #aaa #aaa #777;    /* 重点代码 */
    background: #999;
    color: #111;
}

---

闪烁呼吸灯 边框 动画：

效果图：        在线demo

<div class="circle">
  <span class="circle-content">这是内容</span>
</div>

/** 圆直径   边框宽度均为 12%
* $circle-diameter: 100px;
* $circle-bg-color: rgba(58, 150, 225, 0.4);
*/
.circle {
  position: relative;
  background: #c1bd57;
  width: $circle-diameter;
  height: $circle-diameter;
  border-radius: 100%;
  text-align: center;
  line-height: $circle-diameter;
  background: $circle-bg-color;
  margin: 10%;
}
.circle::after {
  content: '';
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: 100%;
  opacity: 0.4;
  animation: twinkling 2.1s infinite ease-in-out;
}
.circle::before {
  content: '';
  display: inline-block;
  position: absolute;
  top: -6%;
  left: -6%;
  z-index: -2;
  width: 112%;
  height: 112%;
  background: inherit;
  border-radius: 100%;
  opacity: 0.2;
  animation: twinkling 2.1s infinite ease-in-out;
}
/* 动画 */
@keyframes twinkling {
  0% {
    opacity: 0.2;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.12);
  }
  100% {
    opacity: 0.2;
    transform: scale(1);
  }
}

---