css3鼠标果果变手型代码_CSS3 鼠标悬停心形图案时变大成心跳效果的动效

CSS

语言：

CSSSCSS

确定

body {

background: radial-gradient(#200, #700);

}

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

}

.container {

position: absolute;

width: 11em;

height: 11em;

top: calc(50% - 5.5em);

left: calc(50% - 5.5em);

transition: 1s ease;

}

.container:hover {

transform: scale(1.5);

}