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

最新推荐文章于 2023-04-13 09:27:19 发布
最新推荐文章于 2023-04-13 09:27:19 发布
阅读量176 收藏
点赞数 1
文章标签： css html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010171729/article/details/129233328
版权

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>

大墨叔叔
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS+DIV：实现炫酷网页样式与布局
爱技术 爱生活
08-01 1万+
虽然之前也接触过HTML和CSS，也做过一段时间的项目，使用过CSS和DIV，但是终究没有体会到这两者融会贯通后，所能达到的效果，远远超乎我的想象。         其实很多写过前端页面的人都知道DIV和CSS其实特别简单，但是要想实现需求中的或者自己心中想象的效果，也决非易事。这里面有很多的技巧，如果你不熟悉和精通，那么你做出的页面将会达不到预期的效果，有时候会特别的难看。
HTML5+CSS3兼容收藏夹
dingyuduan的专栏
01-07 391
CSS3选择器兼容IE6~8: Selectivizr 使用方法： 最好选择使用Selectivizr站点列出的兼容程序库应用到页面（如：mootools, NWMathcer） 注意： Selectivizr只适用于外部样式表中的CSS，对内联合内部的CSS无效。
html 收藏网站 功能实现,网站常用的收藏网站实现代码
weixin_39734184的博客
06-18 2998
浏览网站我们经常可以在网站的左上角或者右上角的地方看到“收藏本站、网站收藏、加入收藏”，等字眼，点击后可以收藏到本网站。那这个功能是怎么实现的呢，很简单，一段js就好了，一起来看看。1.在html加入以下这段js://定义加入收藏夹函数function join_favorite(siteUrl, siteName){//捕获加入收藏过程中的异常try {//判断浏览器是否支持doc...
html5 加入收藏夹,设为首页、添加到收藏夹代码
weixin_42515687的博客
06-19 1647
打开页面,我们通常都会发现,页面中经常使用这样的功能：设为首页,添加到收藏夹！前者的含义是：将当前打开的页面设置为浏览器的首页,当浏览器启动时,自行打开该页面！后者的含义是：将当前打开的页面添加到收藏夹,将其网址保存起来,方便今后访问,这极大的方便了很多网友,如果我们上网发现哪个网站比较好,想收藏起来,但是域名又难记,这个时候,将其添加到收藏夹,是最有效的方法了！收藏夹还可以建立文件夹,可以很方便...
网页制作 HTML设为首页和加入收藏_动力节点Java学院整理
01-22 637
网页制作 HTML设为首页和加入收藏_动力节点Java学院整理 IE浏览器下如何实现"设为首页"，"加入收藏"的功能 解决思路： 将指定URL设为首页的功能主要是依靠IE默认行为homePage的setHomePage方法，而将指定URL加入收藏夹的实现则是external对象的AddFavorite方法。 具体步骤： 设为首页 设为首页 加入收藏： 加入收藏 请使用IE浏览器进行测试。 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家...
Javascript或HTML代码该怎么进行压缩美化?
没有开通的博客
02-21 1583
​ 正文: 关于关于代码的规范，对于一个程序员来说肯定不陌生，因为代码如果写的很乱，是很难去阅读的，也很难看懂代码底层的逻辑是怎么写的，自己本身就很难看明白，对于其他人来说那简直就是天书，所以在通常情况下iyuanmas，都要保证代码的规范性。 所以今天就给大家写一篇原创代码格式化教程，帮助大家能够快速将自己的代码进行美化，我们需要借助一个网站工具就可以了->www.tuimgs.com/jsgeshi.html。 第一步: 打开工具之后，能够看到上面这样一个页面，然后在复制我们...
美食网站js+html+css
01-03
【美食网站js+html+css】是一个以JavaScript、HTML和CSS为核心技术的项目，旨在创建一个展示美食的网站。这个项目提供了完整的源代码，包括HTML结构文件、CSS样式表和JavaScript脚本，以及用于视觉呈现的网站图片。...
基于Html+css+js实现的静态购物网站
06-30
2.添加并设计网站导航栏(导航栏目内容和样式自定)，链接为空链接； 3.添加并设计商品轮播图，图片、位置、大小等自定义; 4.设计商品分类展示效果(样式自定义)，每件商品必须有：商品名称、图片、价格内容；商品数目...
HTML+CSS+JS构建的电商网站页面（源码）
07-14
在本项目中，"HTML+CSS+JS构建的电商网站页面（源码）"是一个针对初学者和学生设计的Web前端开发实践项目。这个项目利用HTML、CSS和JavaScript这三种核心技术来创建一个基本的电商网站界面，是学习前端开发的重要...
html+css+js网页设计源代码.zip
05-31
在这个"html+css+js网页设计源代码.zip"中，`catcatcat-master`可能是一个项目目录，暗示着这个网页设计是以猫为主题。HTML文件通常会包含各种元素，如`<head>`（头部信息）、`<body>`（主体内容）、`<header>`...
大学简单html+css+js项目(古诗demo)
qq_53203517的博客
03-14 428
宣传中国传统文化。比较传统诗词网站，新增背诵功能，更有趣味性。
HTML+CSS+JS网页设计期末课程大作业—— 绿色化妆品HTML+CSS+JavaScript
HTML网页设计
08-10 2292
💄美妆介绍、👜美妆分享、👒 品牌化妆品官网网站 、等网站的设计与制作。🏷️ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设......
基于HTML+CSS+JS制作商城（web前端网页制作课作业）---手机主题 7页
而风不止
11-24 548
D
dreamweaver网页大作业 我的家乡——南京玄武湖旅游攻略(4页) 学生网页设计作业源码
QQ_____365392777的博客
08-10 2632
1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑
HTML+CSS+JS网页设计期末课程大作业 京剧文化水墨风书画
而风不止
11-14 2万+
网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业，茶文化网站 | 中华传统文化题材 | 京剧文化水墨风书画 | 中国民间年画文化艺术网站 | HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为。
项目实战（一）HTML5+CSS3+JS完成前端网站的制作
热门推荐
weixin_46244909的博客
10-13 2万+
制作首页HTML框架： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="X-UA-Compatible" content="ie=edg"> <meta name ="description" conte
HTML静态网页作业——我的家乡安庆
QQ_____365392777的博客
08-11 3161
1网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了Logo（源文件）所需的知识点。......
网页中小飞机跟随鼠标
最新发布
weixin_72647214的博客
04-13 115
html+css+js
HTML+CSS网站开发入门指南
网站开发是指使用HTML、CSS、JavaScript等技术来创建一个功能丰富、外观生动的网站的过程。网站开发需要了解网站的构成，包括域名、网站空间、网站源程序等。通过学习HTML、CSS和JavaScript等技术，我们可以创建一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值