25 心形按钮

效果演示

14-心形按钮.gif

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

Code

<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>

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;
}

实现思路拆分

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

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

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

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

.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 两个元素的样式，包括边框颜色、边框、圆角半径、宽度、高度和底部边框。

.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 元素的样式，包括定位方式、堆叠顺序、宽度、高度、背景颜色、阴影效果、圆角半径、左边距、底部边距、过渡效果和动画效果。

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

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

@keyframes check-animation {0% {transform: translate(0px, 0px); /* 元素初始状态 */}50% {transform: translate(0px, 7px); /* 元素动画过程 */}100% {transform: translate(7px, 7px); /* 元素最终状态 */}
}

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

.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 元素的样式，包括盒模型、定位、旋转、缩放、显示、边框颜色、光标类型和上侧偏移量。

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 元素的样式，包括边框颜色和阴影效果。

.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 元素的样式，包括内容、显示方式、盒模型、定位、边框颜色。

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

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

.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 */
}