爱心动画练习
Posted mxblogs
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了爱心动画练习相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="简介">
<meta name=" keywords" content="关键字">
<title>love</title>
<style>
body
background-color: #000;
*
margin: 0;
padding: 0
.love
width: 205px;
height: 205px;
margin: 100px auto;
animation: love 1s infinite alternate;
@keyframes love
0%
transform: scale(1);
100%
transform: scale(1.5);
.left
width: 150px;
height: 228px;
background-color: red;
float: left;
border-radius: 150px 150px 0 0;
transform: rotate(-45deg);
box-shadow: 0px 0px 200px red;
.right
width: 150px;
height: 228px;
background-color: red;
float: left;
border-radius: 150px 150px 0 0;
transform: rotate(45deg);
margin-left: -95px;
box-shadow: 0px 0px 300px red;
</style>
</head>
<body>
<div class="love">
<div class="left"></div>
<div class="right"></div>
</div>
<p style="color: white; text-align: center; font-size: 50px;"></p>
</body>
</html>
以上是关于爱心动画练习的主要内容，如果未能解决你的问题，请参考以下文章