1.增加了动画。
2.添加了时钟功能。
3.增加第二屏的小飞机彩蛋。
4.依然吧CSS和JS嵌入了HTML。
<!DOCTYPE html><html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><title>HTML实现网站收藏夹功能</title><style type="text/css">*{margin: 0;padding: 0;box-sizing: border-box;}.con{display: flex;flex-direction: column;justify-content: center;align-items: center;height: 100vh;line-height: 70px;font-size: 17px;letter-spacing: 2px;}.wrapper{position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(200deg,#ec77ab,#7873f5);clip-path: circle(25px at calc(100% - 45px) 45px);transition: all 0.3s ease-in-out;}.menu-btn{position: absolute;right: 20px;top: 20px;z-index: 2;background: linear-gradient(200deg,#ec77ab,#7873f5);width: 50px;height: 50px;text-align: center;line-height: 50px;border-radius: 50%;color: #fff;font-size: 20px;cursor: pointer;transition: all 0.3s ease;}#menu_btn{display: none;}#menu_btn:checked ~ .wrapper{clip-path: circle(75%);}#menu_btn:checked ~ .menu-btn{color: #d576ba;background: #fff;}table {border-collapse:collapse;width:87%;}th {padding:20px 10px;line-height:20px;border:3px solid center;background:center;}td {padding:10px 10px;line-height:20px;border:3px solid white;text-align:center}dt{color: #ec77ab;font-size: 28px;font-weight: bold;letter-spacing: 17px;text-indent: 30px;}dd{width: 17vw;height: 50px;line-height: 50px;background-color: #fff;line-height:16px;font-size:15px;text-align:center;display: table-cell;vertical-align:middle;box-shadow: 0px 5px 15px rgba(0,0,0,0.25);border-radius: 20px;}a {text-decoration: none;}a:link{color: black;}a:visited{color: black;}a:hover{color: purple;}a:active{color: orange;}body{margin: 0;height: 100vh;display: flex;align-items: center;justify-content: center;background: linear-gradient(200deg,#a8edea,#fed6e3);}#plane{color: #fff;font-size: 50px;/* 绝对定位 */position: absolute;/* 弹性布局 水平+垂直居中 */display: flex;justify-content: center;align-items: center;}.heart{width: 280px;height: 220px;display: flex;justify-content: space-between;}.heart span{--c:plum;--h:50%;--t:25%;background-color: var(--c);width: 20px;border-radius: 10px;position: relative;height: var(--h);top: var(--t);animation: beating 1s infinite;}.heart span:nth-child(1),.heart span:nth-child(9){--c:lightcoral;--h:60px;--t:44px;}.heart span:nth-child(2),.heart span:nth-child(8){--c:lightskyblue;--h:120px;--t:12px;}.heart span:nth-child(3),.heart span:nth-child(7){--c:lightgreen;--h:160px;--t:0;}.heart span:nth-child(4),.heart span:nth-child(6){--c:gold;--h:180px;--t:16px;}.heart span:nth-child(5){--c:plum;--h:188px;--t:32px;}@keyframes beating{0%,30%{height: var(--h);top: var(--t);background-color: var(--c);filter: blur(0);}60%,70%{height: 50%;top: 25%;background-color: plum;filter: blur(5px);}}.clock{display: flex;}.clock p{width: 39px;font-size: 70px;color: #fff;text-align: center;font-weight: 700;text-shadow: 0 1px 0 #deafaf,0 2px 0 #bda8a8,0 3px 0 #d8a1a1,0 4px 0 #d59999,0 5px 0 #d29292,0 6px 0 #cf8b8b,0 7px 0 #cc8484,0 8px 0 #c97d7d,0 0 5px rgba(231,156,156,0.05),0 -1px 3px rgba(231,156,156,0.2),0 9px 9px rgba(231,156,156,0.3),0 12px 12px rgba(231,156,156,0.3),0 15px 15px rgba(231,156,156,0.3);}</style><script type="text/javascript">function myTime(){let time=new Date();let hh=time.getHours(); //时let mm=time.getMinutes(); //分let ss=time.getSeconds(); //秒// Math.floor() 向下取整document.getElementById("1").innerText=Math.floor(hh/10);document.getElementById("2").innerText=hh%10;document.getElementById("4").innerText=Math.floor(mm/10);document.getElementById("5").innerText=mm%10;document.getElementById("7").innerText=Math.floor(ss/10);document.getElementById("8").innerText=ss%10;}setInterval(myTime,1000);</script></head><body><input type="checkbox" id="menu_btn"><label class="menu-btn" for="menu_btn">㊙️</label><div class="con"><div class="clock"><p id="1">0</p><p id="2">0</p><p id="3">:</p><p id="4">0</p><p id="5">0</p><p id="6">:</p><p id="7">0</p><p id="8">0</p></div><br /><table><tr><th colspan="4"><dt>标签1</dt></th></tr><th><a href="#" title="说明1" target="_blank"><dd>网址1</dd></a></th> <th><a href="#" title="说明2" target="_blank"><dd>网址2</dd></a></th> <th><a href="#" title="说明3" target="_blank"><dd>网址3</dd></a></th> <th><a href="#" title="说明4" target="_blank"><dd>网址4</dd></a></th> </tr></th><tr><tr><th colspan="4"><dt>标签2</dt></th></tr><tr><th><a href="#" title="说明1" target="_blank"><dd>网址1</dd></a></th> <th><a href="#" title="说明2" target="_blank"><dd>网址2</dd></a></th> <th><a href="#" title="说明3" target="_blank"><dd>网址3</dd></a></th> <th><a href="#" title="说明4" target="_blank"><dd>网址4</dd></a></th> </tr><tr><th><a href="#" title="说明1" target="_blank"><dd>网址1</dd></a></th> <th><a href="#" title="说明2" target="_blank"><dd>网址2</dd></a></th> <th><a href="#" title="说明3" target="_blank"><dd>网址3</dd></a></th> <th><a href="#" title="说明4" target="_blank"><dd>网址4</dd></a></th> </tr><tr><th><a href="#" title="说明1" target="_blank"><dd>网址1</dd></a></th> <th><a href="#" title="说明2" target="_blank"><dd>网址2</dd></a></th> <th><a href="#" title="说明3" target="_blank"><dd>网址3</dd></a></th> <th><a href="#" title="说明4" target="_blank"><dd>网址4</dd></a></th> </tr></table></div><div class="wrapper"><div class="con"><div id="plane">✈️</div><script>let plane=document.getElementById('plane');let deg=0,ex=0,ey=0,vx=0,vy=0,count=0;window.addEventListener('mousemove',(e)=>{ex=e.x-plane.offsetLeft-plane.clientWidth/2;ey=e.y-plane.offsetTop-plane.clientHeight/2;deg=360*Math.atan(ey/ex)/(2*Math.PI)+45;if(ex<0){deg+=180;}count=0;})function draw(){plane.style.transform='rotate('+deg+'deg)';if(count<100){vx+=ex/100;vy+=ey/100;}plane.style.left=vx+'px';plane.style.top=vy+'px';count++;}setInterval(draw, 1);</script><div class="heart"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div><h1>账户信息</h1><table ><tr><td>账号</td><td>密码</td><td >备注</td></tr><tr><td>账号1</td><td>密码1</td><td >备注1</td></tr><tr><td>账号2</td><td>密码2</td><td >备注2</td></tr><tr><td>账号3</td><td>密码3</td><td >备注3</td></tr><tr><td>账号4</td><td>密码4</td><td >备注4</td></tr></table></div></div></body></html>
