描述

项目	描述
开发语言	HTML、JavaScript、CSS
库	dyCalendarJS、vanilla-tilt
Edge	108.0.1462.54 (正式版本) (64 位)

该项目中需要使用到的库有：

dyCalendarJS
vanilla-tilt.js 是 JavaScript 中的一个平滑的 3D 倾斜库。
vanilla-tilt
dyCalendarJS 是一个用于创建日历的 JavaScript 库，您可以在博客和网站中免费使用它。

如果你在观看本篇文章前并没有对这两个库进行了解，欢迎移步至我的另外两篇文章进行学习：

JavaScript 库之 vanilla-tilt（一个平滑的 3D 倾斜库）
JavaScript 库之 dyCalendarJS（日历）

项目

该项目文件中我已对代码进行了注释。如遇不懂的地方，请尝试查看相关注释。

效果

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>毛玻璃-倾斜-日历</title><!-- 导入自定义 CSS 文件 --><link rel="stylesheet" href="./index.css"><!-- 导入 dycalendar.css --><link rel="stylesheet" href="../dycalendar.min.css">
</head>
<body><div id="calendar" class="dycalendar-container"></div><!-- 导入 dycalendar.js --><script src="../dycalendar.min.js"></script><!-- 导入 vanilla-tilt.js --><script src="../vanilla-tilt.js"></script><script>// 绘制日历dycalendar.draw({target: '#calendar',   // 指定用于创建日历的 HTML 容器type: 'month',   // 设置日历的类型prevnextbutton: 'show',   // 显示 "<" 及 ">" 按钮highlighttoday: true   // 高亮显示当前日期})// 为目标元素添加倾斜效果VanillaTilt.init(document.querySelector('#calendar'), {target: '#calendar',   // 指定需要添加倾斜效果的目标元素scale: 0.8,   // 鼠标悬停于目标元素上时，目标元素的放缩倍数glare: true,   // 是否设置反光效果'max-glare': 0.6   // 设置反光效果的强度})</script>
</body>
</html>

index.css

*{/* 去除元素默认的内外边距 */margin: 0px;padding: 0px;/* 设置边框时将压缩内容区域，而不会向外扩张。也就是说，为某个元素设置边框并不会改变其宽高。*/box-sizing: border-box;
}body{/* 显示区域的最小高度为显示窗口的高度 */min-height: 100vh;/* 设置该元素内部元素居中显示 */display: flex;justify-content: center;align-items: center;/* 设置该元素的背景颜色 */background-color: #161623;
}body::before{/* 若需要正常使用伪元素，必须为其设置 content 属性 */content: '';width: 400px;height: 400px;/* 设置颜色渐变效果 */background: linear-gradient(#ffc107,#e91e63);/* 设置边框圆角，当该属性的值为 50% 时元素边框将显示为一个圆 */border-radius: 50%;/* 为该元素设置绝对定位，阻止该元素遮挡日历（定位元素可以设置 z-index 来调节显示顺序，z-index 的值越高，显示优先级越大）。*/position: absolute;top: 10%;left: 20%;z-index: -1;
}body::after{content: '';width: 300px;height: 300px;position: absolute;background: linear-gradient(#2196f3,#31ff38);border-radius: 50%;top: 45%;left: 55%;z-index: -1;
}#calendar{/* 设置日历的宽高 */width: 400px;height: 400px;color: #fff;/* 设置日历的背景元素，为产生毛玻璃效果，这里将背景颜色设置为白色，将透明度设置为 0.1（透明度的取值范围为 0~1，取值越接近 1 ，颜色越不透明）。*/background-color: rgb(255, 255, 255, 0.1);/* 设置 blur 过滤器，该过滤器可以将背景模糊化，参数中的像素值设定越高，显示得越是模糊。*/backdrop-filter: blur(50px);/* 分别设置日历的四条边框，使日历显示得更为立体 */border-top: 1px solid rgb(255, 255, 255, 0.5);border-left: 1px solid rgb(255, 255, 255, 0.5);border-right: 1px solid rgb(255, 255, 255, 0.2);border-bottom: 1px solid rgb(255, 255, 255, 0.2);border-radius: 5px;/* 设置日历的内边距 */padding: 0px 20px;/* 设置日历周边的阴影效果，box-shadow 接收的值（如下）分别为阴影的 X 偏移量、阴影的 Y 偏移量、扩散半径、阴影颜色。*/box-shadow: 5px 10px 10px rgb(0, 0, 0, 0.1);
}/*
这里存在许多在 HTML 文件中没有看到的类名，这是因为这些标签
是 dyCalendarJS 通过 JavaScript 动态创建的元素，如果有需要对
日历中的某些元素的样式进行改变，可以通过浏览器的 检查 功能来查看
JavaScript 创建的元素并对其样式进行适当的修改。
*//*
有些元素需要通过修改传递给 dycalendar.draw() 的配置对象中的
部分属性才能够被发现。
*//* 设置日历的头部部分的样式 */
#calendar .dycalendar-header{margin-top: 60px;font-size: 20px;
}/*设置日历 "<" 及 ">" 按钮的样式，应用该样式时请将 传递给 dycalendar.draw() 的配置对象中的 prevnextbutton 属性的值设置为 true 。*/
#calendar .dycalendar-header .prev-btn,
#calendar .dycalendar-header .next-btn{width: 40px;height: 30px;background-color: rgb(255, 255, 255, 0.15);/* 设置文本对其方式及行高以使 ">" 及 "<" 居中显示 */text-align: center;line-height: 30px;/* 设置上下方向的外边距为 0px，设置左右方向的外边距为 5px */margin: 0px 5px;
}#calendar .dycalendar-body table{width: 100%;height: 100%;margin-top: 50px;
}/* tr:nth-child(1) 选择 table 标签中的第一个 tr 元素 */
/* 设置日历中星期（星期几）标识的样式 */
#calendar .dycalendar-body table tr:nth-child(1) td{background-color: rgb(255, 255, 255, 0.15);margin-bottom: 20px;
}#calendar .dycalendar-body table td{border-radius: 3px;/* 设置鼠标悬停时的指针样式 */cursor: pointer;
}/*
:hover 伪类选择器用于设置鼠标悬停在指定元素时，
某个元素的样式
*/
#calendar .dycalendar-today-date,
#calendar .dycalendar-body table td:hover{color: #000;/* 使用 !important 提升该属性在多个设置了该属性的选择器中的权重*/background-color: #fff !important;
}

前端艺术之毛玻璃-倾斜-日历相关推荐

前端常用插件之calender日历控件
前端常用插件之calender日历控件最近,发现一个插件--简单好用的页面日历控件,个人觉得有必要与大家分享一下,它就是calender日历控件. 准备环境: Bootstrap文件:bootstr ...
前端练手案例之日历（原生）一
介绍用原生三件套从零到一实现以下日历模块,样式如图目前具备以下功能展示当前年月日,并对当前日其展示激活状态点击上一月下一月进行跳转完成骨架搭建首先先对,整体样式进行构思(对于毫无艺术细胞 ...
前端学习02：jQuery 日历
引言:学习前端已经接近1个月了,先后经历了1周的 html+css, 2周的"JavaScript 从入门到下跪",期间还看了vue+webpack.然鹅,Mentor Brigh ...
前端|利用js实现在日历中的签到效果
欢迎点击「算法与编程之美」↑关注我们! 本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章. 欢迎加入团队圈子!与作者面对面!直接点击! 效果介绍日历在手 ...
html asp 日历_全球第一本《2021世界艺术日历》，正式发售！
原标题:全球第一本<2021世界艺术日历>,正式发售! 艺术,人类精神文明的美丽结晶. 作为一名资深艺术爱好者,多希望每天都能和名画为伴,接受各个时期艺术佳作的熏陶. 记得2020年的开 ...
毛玻璃之前世今生之filter与backdrop-filter
前言: 大家好,我是Aben,这里是"Coding会客厅",这个主题我将会用自己的理解介绍前端艺术,用尽量有趣的语言与生动的例子介绍更多前端方面的所见所闻,也欢迎各位新老朋友提 ...
如何解决网页中console的显示内容出现undefined和null_如何优雅地处理前端异常？...
前端一直是距离用户最近的一层,随着产品的日益完善,我们会更加注重用户体验,而前端异常却如鲠在喉,甚是烦人. 一.为什么要处理异常? 异常是不可控的,会影响最终的呈现结果,但是我们有充分的理由去做这样的 ...
毛玻璃效果(CSS)实现
前端小demo_day02_毛玻璃效果(CSS)实现写在前面前端练习的第二天,今天实现了一个毛玻璃的css效果,重要属性backdrop-filter一起来看看吧! 效果展示需求来源依旧是一个 ...
4线电子围栏安装示意图_知识积累｜周界防护-脉冲电子围栏的安装
如今人们对于住宅需求早已今非昔比,不但需要足够大的空间,而且对于住宅所处位置是否交通便利,环境如何,光照情况都有要求,但是最关注的问题还是住宅的安全问题.如今的社会科技发达,不法分子的手段也层出不穷, ...

前端艺术之毛玻璃-倾斜-日历

前端艺术之毛玻璃-倾斜-日历

描述

项目

效果

index.html

index.css

前端艺术之毛玻璃-倾斜-日历相关推荐

最新文章

热门文章