随笔分类 - 前端特效合集
记录一些自己制作或学习的前端页面效果
摘要：🧑💻 写在开头 点赞 + 收藏 学会🤣🤣🤣 需求简介 轮播图是我们前端开发中的一个常见需求，在项目开发中，我们可以使用element、ant等UI库实现。某些场景，为了一个简单的功能安装一个库是没必要的，我们最好的选择就是手搓。 我们来看一个需求 上述需求核心就是实现一个无缝轮播的切换效
阅读全文
摘要：🧑💻 写在开头 点赞 + 收藏 学会🤣🤣🤣 如题，惯性思路很简单，就是直接撸上一个空内容的html。 注：以下都是在现代浏览器中执行，主要为**Chrome 版本 120.0.6099.217（正式版本） （64 位）和Firefox123.0.1 (64 位) ** <!DOCTYPE
阅读全文
摘要：这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 如何实现一个雨滴落下效果 前言 下雨天坐在车窗前，看着雨滴顺着车窗渐渐落下，这一唯美的场景，忍不住想记录下来。最近在纠结电脑壁纸时，无意间看到有类似的场景，可以将自己喜欢的壁纸加上这种效果。作为多年切图仔，不由地想到了用css动画应该可以
阅读全文
摘要：这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 翻转图像是在视觉上比较两个不同图像的常用方法。单击其中一个将翻转它，并显示另一个图像。 布局 布局结构如下： <div class="flipping-images"> <div class="flipping-images__inner
阅读全文
摘要：这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 width:100%与width:auto区别 一、 width属性介绍 width 属性用于设置元素的宽度。width 默认设置内容区域的宽度，但如果 box-sizing 属性被设置为 border-box，就转而设置边框区域的宽度。
阅读全文
摘要：这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 前端网页中，用JS实现鼠标移动时，页面中的小飞机向着鼠标移动。 效果 源码 <!DOCTYPE html> <html> <head> <style> *{ margin: 0; padding: 0; } body{ height: 1
阅读全文
摘要：这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 一、前言 最近 推特上 一位懂设计和写代码的大神一个两个浏览器之间 星球粒子交互的动画火了， 让人看了大呼脑洞大开， 浏览器竟然还能这么玩！！！ 准备自己也搞搞玩一下 二、实现 原作者的粒子动画非常炫酷， 但是不是我们本文重点， 我们通过
阅读全文
摘要：这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 最近喜欢研究起了手表，对劳力士这款“百事圈”实在是心水的不行啊！ 心痒难耐无奈钱包不支持，作为一个前端程序员，买不起的东西该怎么办？ 当然是自己做一个啊！ 说干就干，熬夜自己做了个“百事圈”出来！源码在最后！ 先看成品 还是有那么六七成相
阅读全文
摘要：这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 什么是 Lunchbox.js Lunchbox.js 是 Three.js 的 Vue 3 自定义渲染器。 你可以把它想象成 Vue 的 react-three-fiber。 该库通过组件提供对原始 Three.js 对象和类的访问，例
阅读全文
摘要：这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 一、audio标签的使用 1、Audio 对象属性 2、对象方法 二、效果 效果如下： 三、代码 代码如下： MusicPlayer.vue <template> <div class="music"> <!-- 占位 --> <div
阅读全文
摘要：这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 本组件目前只能用在React Native 的iOS端 本组件来之实际中的开发需求：可以检测并且标记人脸，实现基本的美颜，可进行拍照、换行镜头等基础相机功能。官方组件封装 教程 本文代码：DEMO 运行demo $ git clone h
阅读全文
摘要：这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 美颜和短视频 美颜相关APP可以说是现在手机上的必备的软件，例如抖音，快手，拍出的“照骗”和视频不加美颜效果，估计没有人敢传到网上。很多人一直好奇美颜类APP是如何开发出来的。本文就大致讲一下在Android上如何实现实时修改唇色效果。其
阅读全文
摘要：这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 前言 最近项目遇到一个要在网页上录音的需求，在一波搜索后，发现了 react-media-recorder 这个库。今天就跟大家一起研究一下这个库的源码吧，从 0 到 1 来实现一个 React 的录音、录像和录屏的功能。 完整项目代码放
阅读全文
摘要：这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 前言 对于前端人员来讲，最令人头疼的应该就是页面性能了，当用户在访问一个页面时，总是希望它能够快速呈现在眼前并且是可交互状态。如果页面加载过慢，你的用户很可能会因此离你而去。所以页面性能对于前端开发者来说可谓是重中之重，其实你如果了解页面
阅读全文
摘要：这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 一.需求来源 今天碰到了一个需求，需要在页面里，用水平瀑布流的方式，将一些图片进行加载，这让我突然想起我很久以前写的一篇文章《JS两种方式实现水平瀑布流布局》 但是有个问题，这个需求是Vue项目的，那没办法，这里给大家分享下我的开发过程，
阅读全文
摘要：前言 最近遇到了个功能，要把表单转化成图片来保存，这让我想到了一个插件HTML2CANVAS，这里给大家分享下它的用法和我使用的过程 html2canvas 能够实现在用户浏览器端直接对整个或部分页面进行截屏。这个html2canvas脚本将当页面渲染成一个canvas图片，通过读取DOM并将不同的
阅读全文
摘要：最近在学习算法方面的知识，看到了一个由算法主导的小游戏，这里给大家分享下代码： 效果： 代码： <head> <meta charset="UTF-8"> <meta name="viewport" content="width=360px,user-scalable=no" /> <title>2
阅读全文
摘要：效果如下： 代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>图表测试</title> <script type="text/javascript" src="../ichart.1.2.1.min.js"></s
阅读全文
摘要：项目中可能会用到饼状图、柱状图、环形图等，ichartjs是一个很不错的插件，体量小，只需引入ichart.1.2.1.min.js即可满足基础需求，github下载地址是：https://github.com/wanghetommy/ichartjs 先来看一个效果图： 一、引入ichart.1.
阅读全文
摘要：最近半个月编写了一个JS+ＣＳＳ＋ＨＴＭＬ的网页计算器，从最初的具有简陋界面的简单计算器改版到最终具有科学／标准计算器转换功能并且界面非常友好的计算器，收获良多！总的来说，代码简单，通俗易读，下面贴上代码，供前端新手学习！欢迎提出宝贵意见，不吝指正！ ＨＴＭＬ代码（代码中仅仅是计算器界面内容布局）：
阅读全文