html怎么设置心形按钮,CSS心型开关

css

.heart-switch {

--duration: .45s;

--stroke: #D1D6EE;

--stroke-active: #ec4472;

--fill: #fff;

--fill-active: #ec638e;

--shadow: rgba(0, 9, 61, 0.25);

cursor: pointer;

position: relative;

-webkit-transform: scale(var(--s, 1)) translateZ(0);

transform: scale(var(--s, 1)) translateZ(0);

transition: -webkit-transform .2s;

transition: transform .2s;

transition: transform .2s, -webkit-transform .2s;

-webkit-tap-highlight-color: transparent;

}

.heart-switch:active {

--s: .95;

}

.heart-switch input {

-webkit-appearance: none;

-moz-appearance: none;

position: absolute;

outline: none;

border: none;

pointer-events: none;

z-index: 1;

margin: 0;

padding: 0;

left: 1px;

top: 1px;

width: 18px;

height: 18px;

border-radius: 50%;

background: #fff;

box-shadow: 0 1px 3px 0 var(--shadow);

}

.heart-switch input + svg {

width: 36px;

height: 25px;

fill: var(--fill);

stroke: var(--stroke);

stroke-width: 1px;

stroke-linejoin: round;

display: block;

transition: stroke var(--duration), fill var(--duration);

}

.heart-switch input:not(:checked) {

-webkit-animation: uncheck var(--duration) linear forwards;

animation: uncheck var(--duration) linear forwards;

}

.heart-switch input:checked {

-webkit-animation: check var(--duration) linear forwards;

animation: check var(--duration) linear forwards;

}

.heart-switch input:checked + svg {

--fill: var(--fill-active);

--stroke: var(--stroke-active);

}

@-webkit-keyframes uncheck {

0% {

-webkit-transform: rotate(-30deg) translateX(13.5px) translateY(8px);

transform: rotate(-30deg) translateX(13.5px) translateY(8px);

}

50% {

-webkit-transform: rotate(30deg) translateX(9px);

transform: rotate(30deg) translateX(9px);

}

75% {

-webkit-transform: rotate(30deg) translateX(4.5px) scaleX(1.1);

transform: rotate(30deg) translateX(4.5px) scaleX(1.1);

}

100% {

-webkit-transform: rotate(30deg);

transform: rotate(30deg);

}

}

@keyframes uncheck {

0% {

-webkit-transform: rotate(-30deg) translateX(13.5px) translateY(8px);

transform: rotate(-30deg) translateX(13.5px) translateY(8px);

}

50% {

-webkit-transform: rotate(30deg) translateX(9px);

transform: rotate(30deg) translateX(9px);

}

75% {

-webkit-transform: rotate(30deg) translateX(4.5px) scaleX(1.1);

transform: rotate(30deg) translateX(4.5px) scaleX(1.1);

}

100% {

-webkit-transform: rotate(30deg);

transform: rotate(30deg);

}

}

@-webkit-keyframes check {

0% {

-webkit-transform: rotate(30deg);

transform: rotate(30deg);

}

25% {

-webkit-transform: rotate(30deg) translateX(4.5px) scaleX(1.1);

transform: rotate(30deg) translateX(4.5px) scaleX(1.1);

}

50% {

-webkit-transform: rotate(30deg) translateX(9px);

transform: rotate(30deg) translateX(9px);

}

100% {

-webkit-transform: rotate(-30deg) translateX(13.5px) translateY(8px);

transform: rotate(-30deg) translateX(13.5px) translateY(8px);

}

}

@keyframes check {

0% {

-webkit-transform: rotate(30deg);

transform: rotate(30deg);

}

25% {

-webkit-transform: rotate(30deg) translateX(4.5px) scaleX(1.1);

transform: rotate(30deg) translateX(4.5px) scaleX(1.1);

}

50% {

-webkit-transform: rotate(30deg) translateX(9px);

transform: rotate(30deg) translateX(9px);

}

100% {

-webkit-transform: rotate(-30deg) translateX(13.5px) translateY(8px);

transform: rotate(-30deg) translateX(13.5px) translateY(8px);

}

}

html {

box-sizing: border-box;

-webkit-font-smoothing: antialiased;

}

* {

box-sizing: inherit;

}

*:before, *:after {

box-sizing: inherit;

}

body {

min-height: 100vh;

display: flex;

font-family: 'Roboto', Arial;

justify-content: center;

align-items: center;

flex-direction: column;

background-color: #2D2D2D;

}