/* 整个烂活 能快乐就行*/
这不对象快生日了嘛，作为初学前端的小白，就想着如何用所学给对象露一手，于是就有了如下思考
示爱爱心
表达爱意，就得用爱心嘛！那咱就：
<style>
body {
background: url(IMAGE/Love.jpg) ;
}
</style>
反正外行人看不懂，花花绿绿往那一摆，吹就完事，一看就觉得老牛了
咱好歹也不能让别人觉得写代码的都是直男对吧？
于是我采前人经验，佐以自己所学所思所想，弄了个这个出来：
你看，浪漫不就来了吗？
背景与音乐
<audio src="BGM/Forever.mp3" loop autoplay="autoplay"></audio>
<video src="IMAGE/cleared_1.mp4" class="background" loop autoplay="auto"></video>
要弄咱就弄好的。 背景？动态的！什么星星呀，宇宙啊，怎么炫酷怎么选。 音乐？浪漫的！什么明星啊，感动啊，怎么幸福怎么选。 再调一下背景居于底部显示和铺满
.background {
position: fixed;
top: 0;
left: 0;
z-index: -10;
}
拿捏。
爱心制作
爱心咱就多花点功夫，先弄几个盒子出来。
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>`
咱就不直接给盒子添加属性了，直接在动画中添加好就行
{
animation: move 6s linear infinite;
}
@keyframes move1 {
0% {
width: 60px;
height: 200px;
border-radius: 20px;
background-color: #add8e6;
}
50% {
width: 60px;
height: 150px;
background-color: #eb3b00;
transform: translateY(-20px);
}
100% {
width: 60px;
height: 200px;
border-radius: 20px;
background-color: #add8e6;
}
}
就是让高度和Y轴位置变换了一下，在设定好颜色就OK啦
最后加点东西到CSS里完善一下
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
width: 1000px;
height: 650px;
margin: 30px 400px;
}
.box a {
float: left;
margin-top: 200px;
margin-right: 50px;
}
完美。
咱还可以让每个小方框点开又是一个全新的页面，这p1.html弄个相册，p2.html弄个别的什么的，这不就妥妥的拿捏住了？
前端界情圣，不过如此。
不说了，发给对象去了。
————————————分界线——————————————
谢谢大家，对象说我是直男，已经分手了。 :>
完整源码
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>生日快乐！！！</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.background {
position: fixed;
top: 0;
left: 0;
z-index: -10;
}
.box {
width: 1000px;
height: 650px;
margin: 30px 400px;
}
.box a {
float: left;
margin-top: 200px;
margin-right: 50px;
}
.box a:nth-child(1) {
animation: move1 6s linear infinite;
}
.box a:nth-child(2) {
animation: move2 6s linear infinite;
}
.box a:nth-child(3) {
animation: move3 6s linear infinite;
}
.box a:nth-child(4) {
animation: move4 6s linear infinite;
}
.box a:nth-child(5) {
animation: move5 6s linear infinite;
}
.box a:nth-child(6) {
animation: move6 6s linear infinite;
}
.box a:nth-child(7) {
animation: move7 6s linear infinite;
}
@keyframes move1 {
0% {
width: 60px;
height: 200px;
border-radius: 20px;
background-color: #add8e6;
}
50% {
width: 60px;
height: 150px;
background-color: #eb3b00;
transform: translateY(-20px);
}
100% {
width: 60px;
height: 200px;
border-radius: 20px;
background-color: #add8e6;
}
}
@keyframes move2 {
0% {
width: 60px;
height: 200px;
border-radius: 20px;
background-color: #add8e6;
}
50% {
width: 60px;
height: 280px;
background-color: #f17e05;
transform: translateY(-80px);
}
100% {
width: 60px;
height: 200px;
border-radius: 20px;
background-color: #add8e6;
}
}
@keyframes move3 {
0% {
width: 60px;
height: 200px;
border-radius: 20px;
background-color: #add8e6;
}
50% {
width: 60px;
height: 400px;
background-color: #f4f500;
transform: translateY(-100px);
}
100% {
width: 60px;
height: 200px;
border-radius: 20px;
background-color: #add8e6;
}
}
@keyframes move4 {
0% {
width: 60px;
height: 200px;
border-radius: 20px;
background-color: #add8e6;
}
50% {
width: 60px;
height: 450px;
background-color: #19a058;
transform: translateY(-70px);
}
100% {
width: 60px;
height: 200px;
border-radius: 20px;
background-color: #add8e6;
}
}
@keyframes move5 {
0% {
width: 60px;
height: 200px;
border-radius: 20px;
background-color: #add8e6;
}
50% {
width: 60px;
height: 400px;
background-color: #379de0;
transform: translateY(-100px);
}
100% {
width: 60px;
height: 200px;
border-radius: 20px;
background-color: #add8e6;
}
}
@keyframes move6 {
0% {
width: 60px;
height: 200px;
border-radius: 20px;
background-color: #add8e6;
}
50% {
width: 60px;
height: 280px;
background-color: #2a27e6;
transform: translateY(-80px);
}
100% {
width: 60px;
height: 200px;
border-radius: 20px;
background-color: #add8e6;
}
}
@keyframes move7 {
0% {
width: 60px;
height: 200px;
border-radius: 20px;
background-color: #add8e6;
}
50% {
width: 60px;
height: 150px;
background-color: #9421f4;
transform: translateY(-20px);
}
100% {
width: 60px;
height: 200px;
border-radius: 20px;
background-color: #add8e6;
}
}
</style>
</head>
<body>
<audio src="BGM/Forever.mp3" loop autoplay="autoplay"></audio>
<div class="box">
<a href="p1.html" target="_black" class="p1"></a>
<a href="p2.html" target="_black" class="p2"></a>
<a href="p3.html" target="_black" class="p3"></a>
<a href="p4.html" target="_black" class="p4"></a>
<a href="p5.html" target="_black" class="p5"></a>
<a href="p6.html" target="_black" class="p6"></a>
<a href="p7.html" target="_black" class="p7"></a>
</div>
<video src="IMAGE/cleared_1.mp4" class="background" loop autoplay="auto"></video>
</body>
</html>
