CSS：画爱心

• 来自： https://github.com/haizlin/fe-interview/issues/300

<div class="heart"></div>

普通版：

利用 rotate 和 translate 进行位置的调整。

.heart {
  position: relative;
  width: 100px;
  height: 90px;
}

.heart:before,
.heart:after {
  position: absolute;
  content: "";
  left: 50px;
  top: 0;
  width: 50px;
  height: 80px;
  background: red;
  border-radius: 50px 50px 0 0;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}

.heart:after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}

• 效果图：https://codepen.io/foreverZ133/pen/XLpJdK

CSS3 transform-origin 属性

镂空图：

.heart {
      position: relative;
      width: 100px;
      height: 100px;
      background: red;
}

.heart::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: url(https://bennettcodes.com/dev/a-heart-of-many-moods/images/heart-outline.png) center/100% 100%; // 覆盖镂空的心形图
  filter: invert(1); // 覆盖图转为白色
}

• 效果图：https://codepen.io/foreverZ133/pen/RzKNZB
  
  

box-shadow：

.heart {
  position: absolute;
  top: calc(50% - .5em);
  left: calc(50% - .5em);
  width: 1em;
  height: 1em;
  background: red;
  box-shadow:
    /* Outline */
    black 0 5em, black 0 -4em, black 1em -5em, black 2em -5em, black 3em -5em, black 4em -4em, black 5em -3em, black 5em -2em, black 5em -1em, black 5em 0, black 4em 1em, black 3em 2em, black 2em 3em, black 1em 4em, black -1em 4em, black -2em 3em, black -3em 2em, black -4em 1em, black -5em 0em, black -5em -1em, black -5em -2em, black -5em -3em, black -4em -4em, black -3em -5em, black -2em -5em, black -1em -5em,
    /* Shade */
    darkred 0 4em, darkred 1em 3em, darkred 2em 2em, darkred 3em 1em, darkred 4em 0, darkred 4em -1em, darkred 4em -2em, darkred 4em -3em,
    /* Shine */
    white -3em -2em, white -2em -3em,
    /* Fill */
    red 0 1em, red 0 2em, red 0 3em, red 1em 2em, red 1em 1em, red 2em 1em, red 1em 0, red 2em 0, red 3em 0, red 0 -1em, red 1em -1em, red 2em -1em, red 3em -1em, red 0 -2em, red 1em -2em, red 2em -2em, red 3em -2em, red 0 -3em, red 1em -3em, red 2em -3em, red 3em -3em, red 1em -4em, red 2em -4em, red 3em -4em, red -1em 3em, red -1em 2em, red -2em 2em, red -1em 1em, red -2em 1em, red -3em 1em, red -1em 0, red -2em 0, red -3em 0, red -4em 0, red -1em -1em, red -2em -1em, red -3em -1em, red -4em -1em, red -1em -2em, red -2em -2em, red -4em -2em, red -1em -3em, red -3em -3em, red -4em -3em, red -1em -4em, red -2em -4em, red -3em -4em;
    }

• 效果图：https://wow.techbrood.com/fiddle/27194
  
  

SVG 💗 爱心点赞效果

<div class="wishlist-heart-group">
    <input name="product-333" id="product-333" data-product-id="333" type="checkbox" />
    <label for="product-333">
        <svg xmlns:dc="https://purl.org/dc/elements/1.1/" xmlns:cc="https://creativecommons.org/ns#" xmlns:rdf="https://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="https://www.w3.org/2000/svg" xmlns="https://www.w3.org/2000/svg" xmlns:sodipodi="https://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
        xmlns:inkscape="https://www.inkscape.org/namespaces/inkscape" version="1.1" x="0px" y="0px" viewBox="0 0 100 100">
            <g transform="translate(0,-952.36218)">
                <path style="color:#000000;enable-background:accumulate;" d="m 34.166665,972.36218 c -11.41955,0 -19.16666,8.91891 -19.16666,20.27029 0,19.45943 15,27.56753 35,39.72973 20.00001,-12.1622 34.99999,-20.2703 34.99999,-39.72973 0,-11.35137 -7.7471,-20.27029 -19.16665,-20.27029 -7.35014,0 -13.39148,4.05405 -15.83334,6.48647 -2.44185,-2.43241 -8.48319,-6.48647 -15.83334,-6.48647 z"
                fill="transparent" id="heart-path" stroke="#F8332A" stroke-width="5" marker="none" visibility="visible" display="inline" overflow="visible" />
            </g>
        </svg>
    </label>
</div>

.wishlist-heart-group {
    display: inline-block;
    width: 40px;
    height: 40px;
    position: relative;
}
.wishlist-heart-group input[type="checkbox"] {
    position: absolute;
    left: -999999px;
    top: -999999px;
}
.wishlist-heart-group input[type="checkbox"] + label svg {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
.wishlist-heart-group input[type="checkbox"]:checked + label svg {
    -webkit-animation: wishlist-heart-wiggle 400ms 50ms forwards ease-in-out;
    animation: wishlist-heart-wiggle 400ms 50ms forwards ease-in-out;
}
.wishlist-heart-group input[type="checkbox"]:checked + label svg #heart-path {
    -webkit-animation: wishlist-heart-add 300ms forwards;
    animation: wishlist-heart-add 300ms forwards;
}
.wishlist-heart-group input[type="checkbox"] + label svg #heart-path {
    -webkit-transition: fill 200ms;
    transition: fill 200ms;
}
.wishlist-heart-group label {
    display: inline-block;
    width: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
}
@-webkit-keyframes wishlist-heart-wiggle {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    25% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg);
    }
    75% {
        -webkit-transform: rotate(8deg);
        transform: rotate(8deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}
@keyframes wishlist-heart-wiggle {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    25% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg);
    }
    75% {
        -webkit-transform: rotate(8deg);
        transform: rotate(8deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}
@-webkit-keyframes wishlist-heart-add {
    0% {
        stroke-width: 5;
    }
    50% {
        stroke-width: 20;
    }
    100% {
        stroke-width: 5;
        fill: #f8332a;
    }
}
@keyframes wishlist-heart-add {
    0% {
        stroke-width: 5;
    }
    50% {
        stroke-width: 20;
    }
    100% {
        stroke-width: 5;
        fill: #f8332a;
    }
}
body {
    height: 100vh;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

• 效果图：https://wow.techbrood.com/fiddle/36760