25 心形按钮 - 技术栈

效果演示

实现了一个心形的心形图案，当用户点击图案时，图案会旋转并缩小，同时背景颜色会变成白色。

Code

html 复制代码

<div class="love">
  <input id="switch" type="checkbox">
  <label class="love-heart" for="switch">
    <i class="left"></i>
    <i class="right"></i>
    <i class="bottom"></i>
    <div class="round"></div>
  </label>
</div>

css 复制代码

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #212121;
}

.love-heart:before,
#switch {
    display: none;
}

.love-heart,
.love-heart::after {
    border-color: hsl(231deg 28% 86%);
    border: 1px solid;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    width: 10px;
    height: 8px;
    border-bottom: 0
}

.round {
    position: absolute;
    z-index: 1;
    width: 8px;
    height: 8px;
    background: hsl(0deg 0% 100%);
    box-shadow: rgb(0 0 0 / 24%) 0px 0px 4px 0px;
    border-radius: 100%;
    left: 0px;
    bottom: -1px;
    transition: all .5s ease;
    animation: check-animation2 .5s forwards;
}

input:checked+label .round {
    transform: translate(0px, 0px);
    animation: check-animation .5s forwards;
    background-color: hsl(0deg 0% 100%);
}

@keyframes check-animation {
    0% {
        transform: translate(0px, 0px);
    }

    50% {
        transform: translate(0px, 7px);
    }

    100% {
        transform: translate(7px, 7px);
    }
}

@keyframes check-animation2 {
    0% {
        transform: translate(7px, 7px);
    }

    50% {
        transform: translate(0px, 7px);
    }

    100% {
        transform: translate(0px, 0px);
    }
}

.love-heart {
    box-sizing: border-box;
    position: relative;
    transform: rotate(-45deg) translate(-50%, -33px) scale(4);
    display: block;
    border-color: hsl(231deg 28% 86%);
    cursor: pointer;
    top: 0;
}

input:checked+.love-heart,
input:checked+.love-heart::after,
input:checked+.love-heart .bottom {
    border-color: hsl(347deg 81% 61%);
    box-shadow: inset 6px -5px 0px 2px hsl(347deg 99% 72%);
}

.love-heart::after,
.love-heart .bottom {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
    border-color: hsl(231deg 28% 86%);
}

.love-heart::after {
    right: -9px;
    transform: rotate(90deg);
    top: 7px;
}

.love-heart .bottom {
    width: 11px;
    height: 11px;
    border-left: 1px solid;
    border-bottom: 1px solid;
    border-color: hsl(231deg 28% 86%);
    left: -1px;
    top: 5px;
    border-radius: 0px 0px 0px 5px;
}

实现思路拆分

css 复制代码

cbody {
  height: 100vh; /* 设置页面高度为视口高度 */
  display: flex; /* 设置页面布局为弹性布局 */
  justify-content: center; /* 设置主轴对齐方式为居中对齐 */
  align-items: center; /* 设置交叉轴对齐方式为居中对齐 */
  background-color: #212121; /* 设置背景颜色为深灰色 */
}

这段代码设置了页面的基本样式，包括高度、布局、对齐方式和背景颜色。

css 复制代码

.love-heart:before,
#switch {
  display: none; /* 隐藏元素 */
}

这段代码隐藏了 .love-heart:before 和 #switch 两个元素。

css 复制代码

.love-heart,
.love-heart::after {
  border-color: hsl(231deg 28% 86%); /* 设置边框颜色为深黄色 */
  border: 1px solid; /* 设置边框为实线 */
  border-top-left-radius: 100px; /* 设置左上角圆角半径为 100px */
  border-top-right-radius: 100px; /* 设置右上角圆角半径为 100px */
  width: 10px; /* 设置宽度为 10px */
  height: 8px; /* 设置高度为 8px */
  border-bottom: 0 /* 隐藏底部边框 */
}

这段代码设置了 .love-heart 和 .love-heart::after 两个元素的样式，包括边框颜色、边框、圆角半径、宽度、高度和底部边框。

css 复制代码

.round {
  position: absolute; /* 设置元素的定位方式为绝对定位 */
  z-index: 1; /* 设置元素的堆叠顺序为最高 */
  width: 8px; /* 设置元素的宽度为 8px */
  height: 8px; /* 设置元素的高度为 8px */
  background: hsl(0deg 0% 100%); /* 设置元素的背景颜色为白色 */
  box-shadow: rgb(0 0 0 / 24%) 0px 0px 4px 0px; /* 设置元素的阴影效果 */
  border-radius: 100%; /* 设置元素的圆角半径为 100% */
  left: 0px; /* 设置元素的左边距为 0px */
  bottom: -1px; /* 设置元素的底部边距为 -1px */
  transition: all.5s ease; /* 设置元素的过渡效果 */
  animation: check-animation2.5s forwards; /* 设置元素的动画效果 */
}

这段代码设置了 .round 元素的样式，包括定位方式、堆叠顺序、宽度、高度、背景颜色、阴影效果、圆角半径、左边距、底部边距、过渡效果和动画效果。

css 复制代码

input:checked+label.round {
  transform: translate(0px, 0px); /* 移动元素 */
  animation: check-animation.5s forwards; /* 执行动画 */
  background-color: hsl(0deg 0% 100%); /* 设置背景颜色为白色 */
}

这段代码设置了 :checked 状态下的 .round 元素的样式，包括移动元素、执行动画和背景颜色。

css 复制代码

@keyframes check-animation {
  0% {
    transform: translate(0px, 0px); /* 元素初始状态 */
  }

  50% {
    transform: translate(0px, 7px); /* 元素动画过程 */
  }

  100% {
    transform: translate(7px, 7px); /* 元素最终状态 */
  }
}

这段代码定义了一个名为 check-animation 的动画效果，包括元素的初始状态、动画过程和最终状态。

css 复制代码

.love-heart {
  box-sizing: border-box; /* 设置盒模型为 border-box */
  position: relative; /* 设置定位为相对定位 */
  transform: rotate(-45deg) translate(-50%, -33px) scale(4); /* 旋转 -45 度，平移 -50% -33px，缩放 4 倍 */
  display: block; /* 设置显示为块级元素 */
  border-color: hsl(231deg 28% 86%); /* 边框颜色 */
  cursor: pointer; /* 光标类型为指针 */
  top: 0; /* 上侧偏移量为 0 */
}

这段代码设置了 .love-heart 元素的样式，包括盒模型、定位、旋转、缩放、显示、边框颜色、光标类型和上侧偏移量。

css 复制代码

input:checked+.love-heart,
input:checked+.love-heart::after,
input:checked+.love-heart.bottom {
  border-color: hsl(347deg 81% 61%); /* 边框颜色 */
  box-shadow: inset 6px -5px 0px 2px hsl(347deg 99% 72%); /* 阴影效果 */
}

这段代码设置了 :checked 状态下的 .love-heart 元素和 .love-heart::after 元素的样式，包括边框颜色和阴影效果。

css 复制代码

.love-heart::after,
.love-heart.bottom {
  content: ""; /* 内容为空 */
  display: block; /* 显示为块级元素 */
  box-sizing: border-box; /* 设置盒模型为 border-box */
  position: absolute; /* 定位为绝对定位 */
  border-color: hsl(231deg 28% 86%); /* 边框颜色 */
}

这段代码设置了 .love-heart::after 和 .love-heart.bottom 元素的样式，包括内容、显示方式、盒模型、定位、边框颜色。

css 复制代码

.love-heart::after {
  right: -9px; /* 右侧偏移量 */
  transform: rotate(90deg); /* 旋转 90 度 */
  top: 7px; /* 上侧偏移量 */
}

这段代码设置了 .love-heart::after 元素的样式，包括右侧偏移量、旋转角度和上侧偏移量。

css 复制代码

.love-heart.bottom {
  width: 11px; /* 宽度为 11px */
  height: 11px; /* 高度为 11px */
  border-left: 1px solid; /* 左侧边框为实线 */
  border-bottom: 1px solid; /* 下侧边框为实线 */
  border-color: hsl(231deg 28% 86%); /* 边框颜色 */
  left: -1px; /* 左侧偏移量 */
  top: 5px; /* 上侧偏移量 */
  border-radius: 0px 0px 0px 5px; /* 左上角圆角半径为 0px，右上角圆角半径为 5px */
}

这段代码设置了 .love-heart.bottom 元素的样式，包括宽度、高度、左侧边框、下侧边框、边框颜色、左侧偏移量、上侧偏移量和圆角半径。