<html>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=1, user-scalable=no"/>
<title>篱凰原创</title>
<head>
<style>
*{
padding: 0;
margin: 0;
}
body{
background-color: pink;
}
@keyframes move{
0%{transform: rotateZ(-135deg) scale(1);}
50%{transform: rotateZ(-135deg) scale(0.8);}
100%{transform: rotateZ(-135deg) scale(1.1);}
}
@keyframes love{
0%{transform: scale(1);}
50%{transform: scale(0.8);}
100%{transform: scale(1.1);}
}
#xin{
width: 200px;
height: 200px;
margin: 200px auto;
background-color: red;
transform: rotateZ(-135deg);
animation: move 1s infinite alternate;
box-shadow: 0 0 100px 0 #FF0000;
z-index: -60;
}
#xin:before{
content: "";
width: 200px;
height: 200px;
position: absolute;
border-radius: 50%;
background-color: red;
left: 100px;
box-shadow: 0 0 100px 0 #FF0000;
}
#xin:after{
content: "";
width: 200px;
height: 200px;
position: absolute;
border-radius: 50%;
background-color: red;
top: 100px;
box-shadow: 0 0 100px 0 #FF0000;
}
#zi{
text-align: center;
font-family: 方正雅体;
width: 200px;
height: 50px;
color: yellow;
margin:-370px auto;
animation: love 1s infinite alternate;
z-index: 60;
}
#xia{
width: 300px;
height: 300px;
font-family: 仿宋;
color: yellow;
font-size: 20px;
margin:600px auto;
}
</style>
</head>
<body>
<div id="xin"></div>
<pre id="zi">I LOVE YOU
往后余生，风雪是你。
-----cat</pre>
<pre id="xia">如果季节更替，树叶落地，银色满际
没能走回原地，我再做个梦给你
梦见我们相遇，没有话题，满眼笑意
真的再见到你，再次拥抱你在怀里
</pre>
</body>
<script>
au=document.getElementById("au")
function lp(){
au.play()
}
setTimeout("lp()",1)
</script>
</html>
