HTML+CSS+JS 美化单机网站收藏夹

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>

HTML+CSS+JS 美化单机网站收藏夹相关推荐

html页面美化代码时间,CSS+JS美化过漂亮的日历控件
CSS+JS美化过漂亮的日历控件 - www.webdm.cn var months = new Array("一", "二", "三",& ...
html+css+js制作简单网站首页
一个简单的网站主页主要由html+css+js制作 1.图片展示这是首页的上半部分,主要内容有:顶部标头.顶部导航栏.图片轮播图. ```css <!DOCTYPE html> < ...
国外可以在线测试java|c++|asp.net|css|js代码的网站
目录 1.在线测试python 2.在线测试linux 3.在线测试C++ 4.在线测试html+css+javascript 5.在线测试Java 6.在线测试php 7.在线创建Asp.net应用 ...
HTML/CSS/Js/Jquery/PHP网站0基础开发到大神系列【飞鸽学院】
课程介绍简介 html,css,javascript,jquery,php+mysql,网站0基础开发涵盖前端到后端成就你的大神之路学习目标 php高级开发工程师,具有一定的项目经验,能进入企业 ...
桌面运维工程师的网站收藏夹
1.IT运维网[365Master.com,IT运维管理第一站] http://www.365master.com/ IT运维网为信息化系统的长期管理者.维护者.建设者与企业信息化领导.业内 ...
基于html+css+js的美食网站
首页index.html 首页页面效果: 首页代码: <html> <head> <meta charset="utf-8"> <titl ...
HTML5期末大作业：HTML+CSS+JS制作鲜花网站(学生网页设计作业源码)
11 个对开发有帮助的 JS 技巧，进收藏夹当小词典吧！
作者:Orkhan Jafarov 译者:前端小智来源: dev 点赞再看,微信搜索**[大迁世界],B站关注[前端小智]**这个没有大厂背景,但有着一股向上积极心态人.本文 GitHub http ...
如何制作web期末网页设计 HTML+CSS+JS茶叶文化网站制作

HTML+CSS+JS 美化单机网站收藏夹

HTML+CSS+JS 美化单机网站收藏夹相关推荐

最新文章

热门文章

HTML+CSS+JS 美化 单机网站收藏夹

HTML+CSS+JS 美化 单机网站收藏夹相关推荐

最新文章

热门文章

HTML+CSS+JS 美化单机网站收藏夹

HTML+CSS+JS 美化单机网站收藏夹相关推荐