七夕礼物
（虽然过了，但是考虑到以后应该也会用到，所以提前写了一个动画）
接下来就是代码：
<!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>
12345678910111213141516171819202122232425262728293031这里面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; }
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879最后是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); }); });
123456789101112131415161718ok，发给你的朋友吧
