<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>爱心</title>
<style>
/* 每个色块的位置 */
#div1{
position: fixed;top: 0;left: 100px;width: 0;height: 0;border: 100px solid red;
border-radius: 100px;}
#div2{
position: fixed;top: 100px;left: 0;width: 0;height: 0;border: 100px solid red;
border-radius: 100px;}
#div3{
position: fixed;top: 100px;left: 100px;width: 0;height: 0;border: 100px solid red;
}
/* 爱心位置 */
#outer{
margin-left: 40%;
transform: rotate(45deg);
position: fixed; top: 0;left: 200px;
animation: love 1s infinite;
filter: drop-shadow(0px 0px 50px rgb(255,20,20) );
}
/* 设置动画 */
@keyframes love{
0%{transform: rotate(45deg) scale(0.8,0.8);opacity: 1;}
25%{transform: rotate(45deg) scale(1,1);opacity: 0.5;}
75%{transform: rotate(45deg) scale(1.2,1.2);opacity: 0.8;}
100%{transform: rotate(45deg) scale(0.8,0.8);opacity: 1;}
}
</style>
</head>
<body>
<div id="outer">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</div>
</body>
</html>
11-15
1378
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
11-06
“相关推荐”对你有帮助么?
-
非常没帮助
-
没帮助
-
一般
-
有帮助
-
非常有帮助
提交