html跳动爱心代码,html+css实现跳动爱心❥(^_-)-Go语言中文社区

跳动爱心主要用了些css3的动画效果@keyframe，实现后的效果如下图(截图效果比较差)。代码再往下滑。

1.html代码

跳动爱心

2.css代码

*{

margin:0;

padding:0;

}

#background{

position:relative;

width:520px;

height:500px;

background:pink;

margin:30px auto;

}

.love{

width:300px;

height:300px;

background:#d5083b;

box-shadow:0px 0px 40px -4px #d5083b;

}

.love-left{

position:absolute;

top:0px;

left:0px;

border-radius:150px;

/*渐变色 渐变开始位置、渐变开始颜色、渐变结束颜色*/

background:linear-gradient(to left right,#ee0a44 0%,#d5083b 40%);

/*box-shadow:-15px -13px 40px -4px #d5083b;*/

/*box-shadow:0px 0px 40px -4px #d5083b;*/

/*background:red;*/

transform:scale(1);

animation:heart-beat 0.6s ease infinite;

z-index:3;

}

.love-right{

position:absolute;

top:0px;

right:0px;

border-radius:150px;

background:linear-gradient(to right left,#ee0a44 0%,#d5083b 50%);

/*background:red;*/

transform:scale(1);

animation:heart-beat 0.6s ease infinite;

z-index:2;

}

.love-bottom{

position:absolute;

top:109px;

left:110px;

transform:rotate(45deg) scale(1);

background:linear-gradient(to left top,#ee0a44 0%,#d5083b 40%);

/*background:red;*/

animation:heart-beat 0.6s ease infinite;

z-index:1;

}

@keyframes heart-beat{

0%{

transform:rotate(45deg) scale(1);

box-shadow:0px 0px 40px -4px #d5083b;

}

50%{

transform:rotate(45deg) scale(1.1);

box-shadow:5px 5px 40px 10px #d5083b;

}

100%{

transform:rotate(45deg) scale(1);

box-shadow:0px 0px 40px -4px #d5083b;

}

}

跳动爱心主要用了些css3的动画效果@keyframe，实现后的效果如下图(截图效果比较差)。