<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>是心动啊</title>
<style>
body {
background-color: pink;
}
.container {
padding-left: 300px;
padding-top: 0px;
box-sizing: border-box;
}
.container>div {
width: 100px;
height: 100px;
background-color: red;
opacity: 0.5;
margin: 25px 80px;
transform: rotate(45deg);
box-shadow: 0px 0px 30px red;
animation: heart 0.8s linear infinite;
display: inline-block;
}
@keyframes heart {
50% {
transform: rotate(45deg) scale(0.9);
}
80% {
transform: rotate(45deg) scale(0.8);
}
}
.container div:after {
content: "";
width: 100px;
height: 100px;
background-color: red;
box-shadow: 0px 0px 30px red;
position: relative;
display: inline-block;
border-radius: 50%;
top: -150px;
left: 0px;
}
.container div:before {
content: "";
width: 100px;
height: 100px;
background-color: red;
box-shadow: 0px 0px 30px red;
position: relative;
display: inline-block;
border-radius: 50%;
top: 0px;
left: -50px;
}
.container .four {
margin-left: 210px;
}
.container .last {
margin-left: 350px;
}
p {
font-family: "楷体";
margin-left: -300px;
color: rgb(164, 10, 36);
color:#216349;
}
</style>
</head>
<body>
<div class="container">
<p>南风知我意，吹梦到西洲</p>
<div></div>
<div></div>
<div></div><br>
<div class="four"></div>
<div></div><br>
<div class="last"></div>
</div>
</body>
</html>
589
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
