- 1Python之贪吃蛇代码实现_python贪吃蛇最简单代码
- 2安全软件开发入门（教程）_软件安全接触点模型将
- 3【Wiley】“很多大咖在此期刊发表，效率很高，有希望冲1区“！IF开分7+，录用率达70%_advanced intelligent systems分区
- 4Flink 从1.7 到1.12版本升级汇总_velocity 1.7升级2.3
- 5别再问我 Python 怎么操作 Word 了！_python word
- 6oracle中treat函数,Oracle 函数概览
- 7Android开发-自定义View-AndroidStudio(六)ViewPager再体验_android studio viewpager
- 8Arduino提高篇（十六）六轴姿态MPU6050_arduino 6050
- 9MySQL之创建高性能的索引(十二)
- 10perl高级排序学习，<=>操作符，飞船操作符_perl <=>
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，实现后的效果如下图(截图效果比较差)。
