CSS小技巧（一）

作者: 菜菜的小阿允 | 来源:发表于2021-04-13 16:16 被阅读0次

笔记1
CSS小技巧（一）
CSS小技巧
css小技巧
css小技巧
css小技巧
CSS小技巧
CSS小技巧
css小技巧
CSS小技巧

一、使用 CSS 实现三角形的技巧

1、使用 border 绘制三角形：利用了高宽为零的容器及透明的 border 实现

div {
  width: 0px;
  height: 0px;
  margin: auto;
}

.normal {
   border-top: 50px solid yellowgreen;
   border-bottom: 50px solid deeppink;
   border-left: 50px solid bisque;
   border-right: 50px solid chocolate;
}

.top {
  border: 50px solid transparent;
  border-bottom: 50px solid deeppink;
}

.left {
  border: 50px solid transparent;
  border-right: 50px solid deeppink;
}

.bottom {
  border: 50px solid transparent;
  border-top: 50px solid deeppink;
}

.right {
  border: 50px solid transparent;
  border-bottom: 50px solid deeppink;
}

<div class='normal'></div>
<div class='top'></div>
<div class='bottom'></div>
<div class='left'></div>
<div class='right'></div>

2、使用 linear-gradient 绘制三角形：它的原理就是实现一个 45° 的渐变

div {
  width: 100px;
  height: 100px;
  margin: auto;
}
.normal {
  background: linear-gradient(45deg, deeppink, yellowgreen);
}

.gradient{
  background: linear-gradient(45deg, deeppink, deeppink 50%, yellowgreen 50%, yellowgreen 100%);
}

.rotate {
  background: linear-gradient(45deg, deeppink, deeppink 50%, transparent 50%, transparent 100%);
}

.top {
  background: linear-gradient(45deg, deeppink, deeppink 50%, transparent 50%, transparent 100%);
  transform: rotate(135deg);
}

.left {
  background: linear-gradient(45deg, deeppink, deeppink 50%, transparent 50%, transparent 1px);
  transform: rotate(45deg);
}

.bottom {
  background: linear-gradient(45deg, deeppink, deeppink 50%, transparent 50%, transparent 1px);
  transform: rotate(-45deg);
}

.right {
  background: linear-gradient(45deg, deeppink, deeppink 50%, transparent 50%, transparent 1px);
  transform: rotate(-135deg);
}
<div class='normal'></div>
<div class='top'></div>
<div class='bottom'></div>
<div class='left'></div>
<div class='right'></div>

3、使用 conic-gradient 绘制三角形：角向渐变 conic-gradient 也可以用于实现三角形。方法在于，角向渐变的圆心点是可以设置的，我们将角向渐变的圆心点设置于 50% 0，也就是 center top，容器最上方的中间，再进行角向渐变，渐变到一定的角度范围内，都是三角形图形。
假设我们有一个 200px x 100px 高宽的容器，设置其角向渐变圆心点为 50% 0，并且，设置它从 90° 开始画角向渐变图，示意图如下：

可以看到，在初始的时候，角向渐变图形没有到第二条边的之前，都是三角形，我们选取适合的角度，非常容易的可以得到一个三角形：

div {
    width: 200px;
    height: 100px;
    margin: auto;
}
.normal {
    background: conic-gradient(from 90deg at 50% 0, deeppink 0, deeppink 45deg, transparent 45.1deg);
}

.acute {
    background: conic-gradient(from 90deg at 50% 0, transparent 0, transparent 45deg, deeppink 45.1deg, deeppink 135deg, transparent 1deg);
}
<div class="normal"></div>
<div class="acute"></div>

上述代码中的 deeppink 45deg, transparent 45.1deg 多出来的 0.1deg 是为了简单消除渐变产生的锯齿的影响，这样，我们通过 conic-gradient，也轻松的得到了一个三角形。同理，再配合旋转 rotate 或者 scale，我们也能得到各种角度，不同大小的三角形。
4、transform: rotate 配合 overflow: hidden 绘制三角形
设置图形的旋转中心在左下角 left bottom，进行旋转，配合 overflow: hidden

.triangle {
    position: relative;
    background: unset;
    overflow: hidden;
    
    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: deeppink;
        transform-origin: left bottom;
        transform: rotate(45deg);
        z-index: -1;
    }
}
<div class="triangle"></div>

5、使用 clip-path 绘制三角形：clip-path CSS 属性可以将一个容器裁剪成任何我们想要的样子，通过 3 个坐标点，实现一个多边形，多余的空间则会被裁减掉

div {
    width: 100px;
    height: 100px;
    margin: auto;
}
.triangle {
    background: deeppink;
    clip-path: polygon(0 0, 100% 0, 0 100%, 0 0);
}
<div class="triangle"></div>

6、利用字符绘制三角形
下面列出一些三角形形状的字符的十进制 Unicode 表示码

◄ : &#9668; 
► : &#9658; 
▼ : &#9660; 
▲ : &#9650;
⊿ : &#8895;
△ : &#9651;

我们使用 ▼ 实现一个三角形 ▼，代码如下：

@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&family=Dela+Gothic+One&family=New+Tegomin&family=Train+One&family=ZCOOL+QingKe+HuangYou&display=swap');
div {
    font-size: 100px;
    color: deeppink;
}
<div class="normal">&#9660; </div>

需要注意的是，使用字符表示三角形与当前设定的字体是强相关的，不同的字体绘制出的同一个字符是不一样的，所以如果你想使用字符三角形，确保用户的浏览器安装了你指定的字体，否则，不要使用这种方式

二、纯 CSS 实现霓虹灯光

要实现的效果：在鼠标移入按钮的时候，会产生类似霓虹灯光的效果；在鼠标移出按钮的时候，会有一束光沿着固定的轨迹（按钮外围）运动，如下图：

1、霓虹灯光的实现：霓虹灯光的实现可以用多重阴影来做。给按钮加三层阴影，从内到外每层阴影的模糊半径递增，这样多个阴影叠加在一起，就可以形成一个类似霓虹灯光的效果。代码如下：

body {
 background: #050901;   
}
.light {
  width: fit-content;
  padding: 25px 30px;
  color: #03e9f4;
  font-size: 24px;
  text-transform: uppercase;
  transition: 0.5s;
  letter-spacing: 4px;
  cursor: pointer;
}
.light:hover {
  background-color: #03e9f4;
  color: #050801;
  box-shadow: 0 0 5px #03e9f4,
              0 0 25px #03e9f4,
              0 0 50px #03e9f4,
              0 0 200px #03e9f4;
}
 <div class="light">
    Neon Button
 </div>

2、运动光束的实现：虽然看起来只有一个光束沿着按钮的边缘运动，但实际上这是四个光束沿着不同方向运动之后叠加的效果。它们运动的方向分别是：从左往右、从上往下、从右往左、从下往上。

四个光束分别对应 div.light 的四个子 div，初始位置分别是在按钮的最左侧、最上方、最右侧和最下方，并按照固定的方向做重复的运动
每个光束的高度或宽度都很小（只有 2px），并且都有一个从透明色到霓虹色的渐变，因此外表会有一个收束的效果（即看上去不是一条完整的线条）
为了确保我们看到的是一个顺时针方向的运动，四个光束的运动实际上是有序的，首先是按钮上方的光束开始运动，在一段时间后，右侧的光束运动，在一段时间后，下方的光束运动，在一段时间后，左侧的光束运动。光束和光束之间的运动有一个延迟，以上方和右侧的光束为例，如果它们同时开始运动，由于右侧的运动距离小于上方的运动距离，就会导致这两个光束错过相交的时机，我们看到的就会是断开的、不连贯的光束。既然右侧光束的运动距离比较短，为了让上方光束可以“追上”它，我们就得让右侧光束“延迟出发”，因此要给它一个动画延迟；同理，剩余两个光束也要有一个动画延迟。多个动画延迟之间大概相差 0.25 秒即可。
只需要显示按钮边缘的光束就够了，因此给 div.light 设置一个溢出隐藏

.light {
  position: relative;
  padding: 25px 30px;
  color: #03e9f4;
  font-size: 24px;
  text-transform: uppercase;
  transition: 0.5s;
  letter-spacing: 4px;
  cursor: pointer;
  overflow: hidden;
}
.light:hover {
  background-color: #03e9f4;
  color: #050801;
  box-shadow: 0 0 5px #03e9f4,
              0 0 25px #03e9f4,
              0 0 50px #03e9f4,
              0 0 200px #03e9f4;
}
.light div {
  position: absolute;
}
.light div:nth-child(1){
  width: 100%;
  height: 2px;
  top: 0;
  left: -100%;
  background: linear-gradient(to right,transparent,#03e9f4);
  animation: animate1 1s linear infinite;
}
.light div:nth-child(2){
  width: 2px;
  height: 100%;
  top: -100%;
  right: 0;
  background: linear-gradient(to bottom,transparent,#03e9f4);
  animation: animate2 1s linear infinite;
  animation-delay: 0.25s;
}
.light div:nth-child(3){
  width: 100%;
  height: 2px;
  bottom: 0;
  right: -100%;
  background: linear-gradient(to left,transparent,#03e9f4);
  animation: animate3 1s linear infinite;
  animation-delay: 0.5s;
}
.light div:nth-child(4){
  width: 2px;
  height: 100%;
  bottom: -100%;
  left: 0;
  background: linear-gradient(to top,transparent,#03e9f4);
  animation: animate4 1s linear infinite;
  animation-delay: 0.75s;
}
@keyframes animate1 {
  0% {
    left: -100%;
  }
  50%,100% {
    left: 100%;
  }
}
@keyframes animate2 {
  0% {
    top: -100%;
  }
  50%,100% {
    top: 100%;
  }
}
@keyframes animate3 {
  0% {
    right: -100%;
  }
  50%,100% {
    right: 100%;
  }
}
@keyframes animate4 {
  0% {
    bottom: -100%;
  }
  50%,100% {
    bottom: 100%;
  }
}

<div class="light">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    Neon Button
</div>