勋章
粉丝
技术能力
- 前端开发
- JavaScript
- Python
- SEO
-
前端开发
中级
能力说明：
掌握HTML5与CSS3的核心技术，掌握前端主流语言和开发框架JavaScript、jQuery和Ajax的基本知识，具备搭建动态交互网页的基本能力。
暂时未有相关云产品技术能力~
暂无个人介绍
-
发表了文章 2024-08-11
H5对话框元素<dialog> 讲解
元素定义对话框或窗口，如点击按钮弹出的对话框、警告提示等。通过 `open` 属性控制可见性，`showModal()` 方法展示模态框。支持基本样式调整，如背景颜色和边框。兼容性详情参见 MDN 文档。
-
发表了文章 2024-08-11
使用纯css制作类似轮播图效果
通过纯CSS实现流畅的页面切换效果，利用三个全屏大小的盒子放置于一个宽300vw的容器内。用户可通过点击底部按钮切换不同页面，每个按钮对应一个隐藏的单选按钮，选中时会触发容器的水平位移，从而展现不同的背景色页面。动画效果由`transition`属性完成，平滑过渡至下一个页面。此外，还提供了渐变色生成网站供参考，以丰富页面视觉效果。
-
发表了文章 2024-08-11
FLex布局详解
Flex布局通过`flex-direction`定义主轴方向，包括横向`row`、反向横向`row-reverse`、纵向`column`及反向纵向`column-reverse`。`justify-content`控制主轴上子元素的排列，如起始端`flex-start`、末端`flex-end`、居中`center`、等间距`space-around`或两端对齐`space-between`。在Y轴上设置这些同样有效。`flex-wrap: wrap`使子元素在需要时换行。`align-items: center`实现侧轴（交叉轴）上的居中对齐
-
发表了文章 2024-08-11
css来实现一个好玩的按钮
这段代码实现了一个具有独特悬停效果的按钮。通过定义按钮及其`:after`伪元素，并设置初始状态下的透明度和尺寸，当鼠标悬停在按钮上时，背景色平滑过渡至另一种颜色，产生视觉上的动态扩展效果。为避免覆盖文字，特地调整了伪元素的层级，确保交互过程中文字始终可见。整体效果流畅自然，增强了用户界面的互动性与美观度。
-
发表了文章 2024-08-11
了解 css中 backface-visibility 属性
`backface-visibility` 是一个CSS属性，用于3D转换时控制元素背面的可见性，以优化渲染性能。默认情况下，背面被隐藏以减少不必要的渲染。此属性有两值：`visible` 表示背面可见；`hidden`（默认值）则隐藏背面。 通过双面卡片案例演示了其用法：两个重叠盒子，一个显示图片，另一个显示文字且初始状态为背面朝外。鼠标悬停时，图片盒子翻转显示背面，文字盒子翻转显示正面，同时设置 `backface-visibility: hidden` 以确保背面不被渲染。 兼容性良好，广泛支持现代浏览器。
-
发表了文章 2024-08-11
CSS常用滤镜属性讲解
本文介绍了CSS滤镜的几种常用效果，包括高斯模糊、亮度和对比度调整、灰度化、图像反转、透明度调整、饱和度调整及复古滤镜等。例如，使用`blur(10px)`可使图像产生模糊效果，包裹层设置`overflow: hidden`可避免边缘模糊；`brightness(150%)`和`contrast(150%)`分别增强图像亮度和对比度；`grayscale(1)`将图像转为灰度；`invert(1)`实现图像颜色完全反转；`opacity(0.5)`调整图像半透明；`saturate(350%)`增加饱和度；`sepia(100%)`营造复古深褐色调；`hue-rotate(180deg)`改变
-
发表了文章 2024-08-11
Vue3 异步组件实现骨架屏效果
这是一个简单的自定义axios封装示例。`axios.ts`文件中定义了一个基本的GET请求方法，通过XMLHttpRequest发起网络请求，并返回解析后的响应体。在其他`.vue`组件中，通过导入此封装，利用定义好的数据接口类型`Data`，采用异步组件+顶层await的方式从本地`data.json`文件中获取数据。最后，在`app.vue`中通过Suspense和异步组件的方式展示数据加载过程。
-
发表了文章 2024-08-11
Go 语言 实现冒泡排序
冒泡排序是大家熟知的经典算法。在Go语言中实现它，关键在于理解其核心思想：通过不断比较并交换相邻元素，让序列中的最大值像泡泡一样“浮”至顶端。每一轮比较都能确定一个最大值的位置。外层循环控制排序轮数，内层循环负责比较与交换。随着每轮排序完成，未排序部分逐渐缩小，直至整个数组有序。以下是Go语言实现示例及说明。
-
发表了文章 2024-07-17
深入理解css中的link 和 @import
【7月更文挑战第3天】CSS中的link与@import有显著差异。link是HTML标签，用于并行加载CSS，支持动态插入，用途广泛，如加载图标。@import是CSS语法，加载顺序在页面解析后，不支持动态引入，但可在CSS中导入多个样式表。link在性能和兼容性上优于@import。优选link，@import适用于多文件组织样式。
-
发表了文章 2024-07-16
封装QueryString构造函数，实现stringify、parse方法
【7月更文挑战第2天】实现QueryString构造函数，包含`stringify`和`parse`方法。`stringify`将对象转换为查询字符串，如`?a=1&b=2&c=1,2`。第一种实现使用for循环和模板字符串，第二种实现利用ES6的`Object.keys`, `map`和`join`。`parse`方法将查询字符串转换回对象，处理数组情况。主要使用`split`方法拆分字符串并遍历处理。
-
发表了文章 2024-07-15
WebSocket 学习
WebSocket是用于创建低延迟、高效率双向通信的协议，适合实时数据传输如即时通讯和在线游戏。它通过一次性握手建立长期连接，允许服务器主动推送数据。WebSocket API包括WebSocket对象和事件处理程序，如onopen、onmessage、onerror和onclose。示例代码展示了如何创建WebSocket连接、发送和接收消息及处理各种事件。WebSocket服务器通常需要特定的框架支持，如Node.js中的`ws`库。使用WebSocket时，前端和后端都可以监听open、close、error和message事件来管理连接状态和数据交换。
-
发表了文章 2024-07-15
前端实现打字机的效果 -- typed库的使用
typed.js是一款轻量级JavaScript插件，模拟打字机效果，用于网页文本的动画输入。特点是易用、高度可配置，支持多种动画模式且无依赖。配置包括字符串、速度、显示延迟、循环选项等。安装可通过NPM或CDN。使用时在HTML中添加`<span>`标签，然后在JS中实例化Typed对象。丰富的回调函数可用于自定义行为。适用于展示性和个人博客网站，增加互动性。尝试不同配置，创建独特动态文本效果。
-
发表了文章 2024-07-15
学习css的clip-path属性
【7月更文挑战第1天】了解CSS `clip-path`属性，用于定义元素显示区域的裁剪形状，如圆形、椭圆、多边形、矩形及SVG路径。通过配合过渡和动画，可创建动态交互效果。例如，`clip-path: circle(radius at center);`用于创建圆形裁剪，`polygon`用于自定义多边形。还可以使用`path()`引用SVG路径数据。[资源推荐：bennettfeely.com/clippy/](https://bennettfeely.com/clippy/)，提供交互式工具测试不同形状。
-
发表了文章
2024-08-12
利用 Coze 搭建专属 AI 厨师助手
-
发表了文章
2024-08-12
一个小案例带你快速了解鸿蒙ArkUI的基本使用
-
发表了文章
2024-08-12
使用html,css,js 实现一个龙年春节祝福卡片效果
-
发表了文章
2024-08-12
原生实现环形进度条
-
发表了文章
2024-08-12
魔改react-calendar还原UI设计中的打卡日历效果
-
发表了文章
2024-08-12
图像裁剪库Cropper.js的学习使用
-
发表了文章
2024-08-12
ThreeJs Demo 之创建星空效果
-
发表了文章
2024-08-12
面试题分享之封装一个弹框组件
-
发表了文章
2024-08-12
Framer 使用滚动变体创建动画
-
发表了文章
2024-08-12
react壁纸网站项目开发中的一些思路总结
-
发表了文章
2024-08-12
react-masonry-css瀑布流的基本使用
-
发表了文章
2024-08-12
Framer 一些交互相关的动画效果
-
发表了文章
2024-08-12
Framer 滚动动画效果集合 (讲解)
-
发表了文章
2024-08-12
Framer快速搭建滚动动画网站(无代码)
-
发表了文章
2024-08-12
总结vue3中常用的组件间通信的方法
-
发表了文章
2024-08-12
巧用CSS实现折叠手风琴效果
-
发表了文章
2024-08-12
实现在vue中自定义主题色彩切换
-
发表了文章
2024-08-12
使用vitepress搭建自己的静态个人博客 || 个人知识库
-
发表了文章
2024-08-12
Element-ui Table表格导出功能的实现
-
发表了文章
2024-08-12
如何实现图片懒加载
