思路:
1.制作爱心:
制作爱心步骤可参考上篇昨日发的文章。
2.添加动画使其跳动:
使用animation属性添加动画使其跳动。
源码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keyword" content="爱心跳动">
<meta name="description" content="爱心跳动">
<title>爱心跳动特效</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
body{
background-color: #000000;
}
.box{
width: 400px;
height: 400px;
margin-top: 60px;
margin-left: auto;
margin-right: auto;
animation: move 1s infinite alternate;
/*动画名称 运动时间 运动次数infinite表示无限次 alternate往返效果相同*/
}
@keyframes move {
100%{
transform: scale(1.2);/*变大1.2倍*/
}
}
.box .left, .box .right{
width: 150px;
height: 240px;
background-color: red;
border-radius: 75px 75px 0 0;
float: left;
position: relative;/*相对大div定位*/
left: 153px;
box-shadow: 0 0 40px red;/*设置阴影效果,其值分别表示水平偏移量,竖直偏移量,阴影大小,颜色*/
}
.box .left{
transform: rotate(45deg) ;
}
.box .right{
transform: rotate(-45deg);
margin-left: -213px;
}
p{
font-size: 50px;
text-align: center;
color: red;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
<p><span>2019 Fighting!</span></p>
</body>
</html>
效果展示: