学习制作时钟

代码路径：

C:\wamp\www\SmallProject\GlassClock

学习切换早晚状态

C:\wamp\www\SmallProject\dayNight_cut

学习计时器

C:\wamp\www\lz_brithday\test\timer

把背景放入

把时钟放入

步骤：

扣除单独代码 ok
把代码放入clock页面中 err
把背景放入SmallProject中再抄过来 ok

加入计时器

没有鼠标我要死了。。。现在8：21了。。

加入音效

加入护眼模式

其他

what原来真的还要考虑考虑浏览器适配问题
谷歌浏览器
从大佬代码学到：绝对位置的出现，不一定需要父元素先出现
这种风格的图最好做背景了，拉大也不会花
背景和修饰放一起错乱，目前最好way
背景和修饰分离（body为absolute 其他为relative和自己的absolute）
引用多个样式
< div class=“evn1 iconfont icon-igw-f-sun” >< /div >

成品

clock.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>FishCake_Clock</title><link rel="stylesheet" href="clock.css">
</head>
<body><div class="content"></div><div class="container"><div class="box"><div class="clock"><div class="hour"><div class="hr" id="hr"></div></div><div class="min"><div class="mn" id="mn"></div></div><div class="sec"><div class="sc" id="sc"></div></div></div></div></div><script>const deg = 6;const hr =document.querySelector('#hr');const mn =document.querySelector('#mn');const sc =document.querySelector('#sc');setInterval(() =>{let day = new Date();let hh = day.getHours() * 30;let mm = day.getMinutes() * deg;let ss = day.getSeconds() * deg;hr.style.transform = `rotateZ(${hh+(mm/12)}deg)`;mn.style.transform = `rotateZ(${(mm)}deg)`;sc.style.transform = `rotateZ(${(ss)}deg)`;})</script></body></html>

clock.css

*{margin: 0;padding: 0;box-sizing: border-box;
}
body{display: flex;justify-content: center;align-items: center;min-height: 100vh;
}.content{position: absolute;/* bottom: -6px; */width:100%;height:100%;background: url(1.jpg); background-repeat: no-repeat;background-position: center 0;/* margin:auto; */
}/* body::before{content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(45deg, #e91e63,#e91e63 50%,#ffc107 50%, #ffc107);
}
body::after{content: '';position: absolute;top: -20px;left: 0;width: 100%;height: 100%;background: linear-gradient(160deg, #03a9f4,#03a9f4 50%,transparent 50%, transparent);animation: animate 5s ease-in-out infinite;
} *//* 浮动特效 */
@keyframes animate{0%,100%{transform: translateY(10px);}50%{transform: translateY(-10px);}
}.container{position: relative;
}
.container::before{content: '';position: absolute;bottom: -80px;width: 100%;height: 60px;background: radial-gradient(rgba(0,0,0,0.2),transparent,transparent);border-radius: 50%;
}
.box{position: relative;z-index: 1;width: 300px;height: 300px;backdrop-filter: blur(25px);border-radius: 50%;border: 1px solid rgba(255,255,255,0.5);animation: animate 5s ease-in-out infinite;animation-delay: -2.5s;
}
.clock{position: absolute;top: 10px;left: 10px;right: 10px;bottom: 10px;display: flex;justify-content: center;align-items: center;background: radial-gradient(transparent, rgba(255,255,255,0.2)),url(clock.png);background-size: cover;border-radius: 50%;backdrop-filter: blur(25px);border: 1px solid rgba(255,255,255,0.5);border-bottom: none;border-right: none;box-shadow: -10px -10px 20px rgba(255,255,255,0.1),10px 10px 20px rgba(0,0,0,0.1),0px 40px 50px rgba(0,0,0,0.2);}
.clock::before{content: '';position: absolute;width: 15px;height: 15px;background: #fff;border-radius: 50%;z-index: 10000;
}
.hour,
.min,
.sec{position: absolute;
}
.hour, .hr{width: 160px;height: 160px;
}
.min, .mn{width: 190px;height: 190px;
}
.sec, .sc{width: 230px;height: 230px;
}
.hr, .mn, .sc{display: flex;justify-content: center;position: absolute;border-radius: 50%;
}
.hr::before{content: '';position: absolute;width: 8px;height: 80px;/* background: #ff105e; */background: #7087D8;z-index: 11;border-radius: 6px;
}
.mn::before{content: '';position: absolute;width: 4px;height: 90px;background: #ffffff;z-index: 12;border-radius: 6px;
}
.sc::before{content: '';position: absolute;width: 2px;height: 150px;background: #fff;z-index: 12;border-radius: 6px;
}

【web项目】前端生日礼物--clock篇相关推荐

做一个完整的Java Web项目太难了，因为这些你不会！
作者:元素侠Jason 链接:https://blog.csdn.net/JasonLiuLJX 最近自己做了几个Java Web项目,有公司的商业项目,也有个人做着玩的小项目,写篇文章记录总结一下收 ...
做一个完整的Java Web项目需要掌握的技能
转自: https://blog.csdn.net/JasonLiuLJX/article/details/51494048 ------------------------------------ ...
javaweb做什么能赚钱_做一个完整的Java Web项目需要掌握的技能
原文链接:http://blog.csdn.net/JasonLiuLJX/article/details/51494048 最近自己做了几个Java Web项目,有公司的商业项目,也有个人做着玩的小 ...
基于koajs的web项目构建-心得篇
2019独角兽企业重金招聘Python工程师标准>>> 根据基于koajs的web项目构建-入门篇所描述的,建立了项目的基本目录结构,接下来的工作便是编码,编译,测试,发布.做为 ...
web前端研发工具篇
web前端研发工具篇一.常见前端开发IDE 1.Visual Studio Code 2.hbuilder 3.sublime text3 4.WebStorm 5.Atom 6.Dreamweav ...
前端web项目使用electron和electron-builder生成桌面应用
背景需求推进技术探索,技术实现需求设计.刚开始本来是用 vue 做一个 web 项目,随着开发推进,产品要求做成桌面端应用... 想到了用 Electron 框架构建桌面应用程序,查了一下大多都是使 ...
PHP项目部署在tomcat,在Tomcat中部署Web项目的操作方法(必看篇)
在这里介绍在Tomcat中部署web项目的三种方式: 1.部署解包的webapp目录 2.打包的war文件 3.Manager Web应用程序一:部署解包的webapp目录将Web项目部署到Tom ...
本篇文档介绍如何手动在ECS实例上部署Java web项目
本篇文档介绍如何手动在ECS实例上部署Java web项目.适用于刚开始使用阿里云进行建站的个人用户. 项目配置 { .section} 本篇教程在示例步骤中使用了以下版本的软件.操作时,请您以实际软 ...
《从零构建前后分离的web项目》准备 - 前端了解过关了吗？
前端基础架构和硬核介绍技术栈的选择首先我们构建前端架构需要对前端生态圈有一切了解,并且最好带有一定的技术前瞻性,好的技术架构可能日后会方便的扩展,减少重构的次数,即使重构也不需要大动干戈,我通常选 ...

【web项目】前端生日礼物--clock篇

文章目录

学习制作时钟

学习切换早晚状态

学习计时器

把背景放入

把时钟放入

加入计时器

加入音效

加入护眼模式

其他

成品

【web项目】前端生日礼物--clock篇相关推荐

最新文章

热门文章