python跳动的爱心,C3-简单实现一颗可以跳动的爱心哦~

myHeart

*{

margin: 0;

padding: 0;

}

.heart{

position:absolute;

left: 50%;

top:50%;

margin-left: -150px;

margin-top: -135px;

width: 300px;

height:270px;

background: transparent;

/*box-shadow: 2px 2px 5px #000;*/

filter:drop-shadow(0px 0px 20px rgb(255,20,20));

animation: test 1s linear infinite;

}

.heart:before,

.heart:after{

content: "";

position: absolute;

left: 150px;

width: 150px;

height: 240px;

background: rgb(255,0,0);

border-radius: 150px 150px 0 0;

transform:rotate(-45deg);

transform-origin: 0 100%;

}

.heart:after{

left: 0;

transform:rotate(45deg);

transform-origin: 100% 100%;

}

@keyframes test{

0%{

transform: scale(0.8,0.8);

opacity: 1;

}

25%{

transform: scale(1,1);

opacity: 0.8;

}

100%{

transform: scale(0.8,0.8);

opacity: 1;

}

}