七夕礼物
(虽然过了,但是考虑到以后应该也会用到,所以提前写了一个动画)
接下来就是代码:
<!DOCTYPE html>
<html lang="zn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="tc">
<span id="wz">纯属娱乐</span>
<button id="qd">确定</button>
</div>
<div id="all">
<header>
<p id="one">七</p>
</header>
<main>
<p id="two">夕</p>
</main>
<footer>
<p id="three"></p>
</footer>
</div>
<script src="jq.js"></script>
<script src="script.js"></script>
</body>
</html>
这里面jq.js就是jQuery,网上一大堆,所以我就不放出来了
接下来就是css
* {
margin: 0;
padding: 0;
}
body {
background-color: pink;
}
a {
text-decoration: none;
color: inherit;
}
ul li {
list-style-type: none;
}
#tc {
position: absolute;
top: 35%;
left: 45%;
border: 1px solid black;
width: 150px;
height: 200px;
box-shadow: 0px 0px 25px black;
border-radius: 10px;
/* display: none; */
}
#wz {
font-weight: bold;
text-align: center;
margin-top: 20px;
margin-bottom: 50px;
display: block;
}
#qd {
width: 100px;
padding: 10px;
border: 1px solid black;
background: transparent;
margin-left: 25px;
box-shadow: 0px 0px 5px black;
border-radius: 8px;
}
#all {
display: none;
width: 80%;
/* border: 1px solid black; */
margin: 0 auto;
margin-top: 20px;
position: relative;
}
p {
font-size: 100px;
}
#one,
#two {
color: rgb(255, 40, 40);
float: left;
position: absolute;
}
#two {
left: 105px;
}
#three {
background-color: rgb(255, 40, 40);
width: 200px;
height: 5px;
position: absolute;
top: 130px;
}
最后是js
$(document).ready(function() {
$('#qd').click(function() {
$('#all').css('display', 'block');
$('#tc').css('display', 'none');
$('#one').stop().animate({
top: '50px',
left: '200px'
}, 1000);
$('#two').stop().animate({
top: '50px'
}, 1000);
$('#three').stop().animate({
top: '50px',
height: '8px',
left: '100px'
}, 1000);
});
});
ok,发给你的朋友吧