HTML、JS、CSS 实现果冻按钮效果 代码解读

HTML、JS、CSS实现果冻按钮效果

效果图：


参考代码仍然是yuanchuan前辈的codePen项目果冻按钮
下面开始解读

HTML：

<div id="boxes">
    <div style="--color: #f44336"></div>
    <div style="--color: #e91e63"></div>
    <div style="--color: #9c27b0"></div>
    <div style="--color: #2196f3"></div>
    <div style="--color: #4caf50"></div>
    <div style="--color: #ff9800"></div>
  </div>

作为示例按钮，在#boxes的Div下加入六个div，并且在样式中加入一个color变量，分别为六个按钮增加一个十六进制颜色值。

在变量名前加--，即声明一个变量，在取变量时，用var()读取，

var()函数还可以使用第二个参数，表示变量的默认值，当该变量不存在时，使用默认值。

css变量详细教程参照

CSS：

html, body {
    
  height: 100%; 
  margin: 0;
}

body, #boxes div {
    
  display: flex;
  align-items: center; 
  justify-content: center;
}

body:after {
   
  z-index: -1;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all .5s ease;
  background: var(--bg-color, #f44336);
  opacity: .1;
}

#boxes {
   
  counter-reset