前端
文章平均质量分 89
前端开发
dragonir
在读大学生
展开
-
前端实现很哇塞的浏览器端扫码功能
背景不久前我做了关于获取浏览器摄像头并扫码识别的功能,本文中梳理了涉及到知识点及具体代码实现,整理成此篇文章内容。本文主要介绍,通过使用基于 vue 技术栈的前端开发技术,在浏览器端调起摄像头 ????,并进行扫码识别功能,对识别到的二维码进行跳转或其他操作处理。本文内容分为背景介绍、实现效果、技术简介、代码实现、总结等部分组成。实现效果本实例中主要有两个页面首页和扫码页,具体实现效果如下图所示。首页:点击 SCAN QRCODE 按钮,进入到扫码页。扫码页:首次进入时,或弹出 获取摄像头访问原创 2021-10-14 10:26:54 · 2543 阅读 · 9 评论 -
使用three.js实现炫酷的酸性风格3D页面
背景近期学习了 WebGL 和 Three.js 的一些基础知识,于是想结合最近流行的酸性设计风格,装饰一下个人主页,同时总结一些学到的知识。本文内容主要介绍,通过使用 React + three.js 技术栈,加载 3D模型、添加 3D文字、增加动画、点击交互等,配合样式设计,实现充满设计感的 ???? 酸性风格页面。基础知识Three.jsThree.js 是一款基于原生 WebGL封装运行在浏览器中的 3D引擎,可以用它创建各种三维场景,包括了摄影机、光影、材质等各种对象。是一款使用非常广泛的原创 2021-09-28 23:05:20 · 955 阅读 · 0 评论 -
前端瓦片地图加载之塞尔达传说旷野之息
背景最近在 肝???? 塞尔达旷野之息,希望 2022年 新作发布前可以救出公主 ????。 同时公司有地图加载的需求,于是想以 旷野之息 地图为例,学习实践一下前端开发相关的地图知识,本文内容主要介绍通过使用瓦片地图加载原理,实现 塞尔达旷野之息 地图加载并添加交互锚点。基础知识瓦片地图 ????在游戏开发过程中,经常会遇到超过屏幕大小的地图,例如在即时战略游戏中,它使得玩家可以在地图中滚动游戏画面。这类游戏通常会有丰富的背景元素,如果直接使用背景图切换的方式,需要为每个不同的场景准备一张背景图,原创 2021-09-15 15:45:22 · 736 阅读 · 2 评论 -
两种纯CSS方式实现hover图片pop-out弹出效果
实现原理主要图形的组成元素由背景和前景图两个元素,以下示例代码中,背景元素使用伪元素 figure::before 表示, 前景元素使用 figure img 表示,当鼠标 hover 悬浮至 figure 元素时,背景元素产生变大效果,前景元素产生变大并向上移动效果,从而从视觉上实现弹出效果。背景元素 figure::before前景元素 figure img1. 使用 overflow: hidden 方式主体元素的 html 结构由一个 figure 元素包裹的 img 元素构成:&.原创 2021-10-21 07:46:12 · 1830 阅读 · 0 评论 -
使用CSS计数器美化有序列表
在web设计中,使用一种井井有条的方法来展示数据是十分重要的,这样用户就可以很清晰的理解网站所展示的数据结构和内容,使用有序列表就是实现数据有组织的展示的一种简单方法。如果你需要更加深入地控制有序列表数字的样式,你可能会觉得必须通过增加更多的 html DOM 结构或者通过 JavaScript 才能做到。幸运的是,使用 CSS计数器 可以更加容易的解决这个问题。在这篇教程中,我们将学习到什么是 CSS计数器 和一些使用案例。有序列表的问题当你写了一个如下的有序列表,浏览器会自动在列表项前面加上.原创 2021-10-20 09:21:55 · 335 阅读 · 0 评论 -
前端常用实用函数方法整理
背景本文内容是对前端常用实用函数的整理,主要内容包含:数组类、浏览器类、日期类、函数类、数学类、媒体类、节点类、对象类、字符串类、类型检测类、正则表达式类等。正文数组类arrayMaxarrayMinchunkcompactcountOccurrencesdeepFlattendifferencedistinctValuesOfArraydropElementseveryNthfilterNonUniqueflattenflattenDepthgroupByheadi原创 2021-10-08 09:18:01 · 514 阅读 · 1 评论