61,112
社区成员
发帖
与我相关
我的任务
分享下面是利用HTML做的心的先变大再缩小的效果。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
html{
height: 100%;background-color:pink;
}
.heart{
position:relative;width:200px;height:200px;margin:50%;animation: move 1s infinite alternate;
}
.heart:before,.heart:after
{
content: '' ;position:absolute;left:0;top:0;width:100px;height:160px;background:red;border-radius:50px 50px 0px 0px;
}
.heart:before{
content: '';transform:rotate(-45deg);
}
.heart:after{
content: '';transform: translateX(43px) rotate(45deg);
}
.heart p{
position: absolute;left: 0;top:30px;
}
@keyframes move{
0%{transform:scale(0);}
10%{transform:scale(0.3);}
20%{transform:scale(0.6);}
30%{transform:scale(0.9);}
40%{transform:scale(1.2);}
50%{transform:scale(1.5);}
60%{transform:scale(1.8);}
70%{transform:scale(2.1);}
80%{transform:scale(2.4);}
90%{transform:scale(2.7);}
100%{transform:scale(3);}
}
</style>
</head>
<body>
<div class="heart">
<p style="text-align:center;color:#ffffff; ">LOVE</p>
</body>
</html>
...全文
请发表友善的回复…
发表回复
爆炸君 @ 2019-04-03
- 打赏
- 举报
哎！没人，难受，不爽！
