自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

粉丝们务必加入微信粉丝群

请粉丝们务必加入微信粉丝群,方便我们交流哦。二维码可以随便打开我的一个博客,在博客的旁边就可以看到...

原创 要深入 JavaScript,你需要掌握这 36 个概念

本文已经原作者授权作者:Mahdhi Rezvi 译者:前端小智 来源:medium原文:https://medium.com/better-programming/36-javascript-concepts-you-need-to-master-to-become-an-expert-c6630ac41bf4点赞再看,微信搜索 【大迁世界】 关注这个没有大厂背景,但有着一股向上积极心态人。本文 GitHub https://github.com/qq449245884/xiaozhi 上已经收

2020-08-07 08:35:45 167

原创 一文学会使用 CSS 中的 min(), max(), clamp() 以及它们的使用场景

作者:Ahmad shaded译者:前端小智来源:sitepoint点赞再看,微信搜索**【大迁世界】**关注这个没有大厂背景,但有着一股向上积极心态人。本文 GitHub https://github.com/qq449245884/xiaozhi 上已经收录,文章的已分类,也整理了很多我的文档,和教程资料。2020年4月8日,Firefox浏览器支持了 CSS 比较函数(min(),max(),clamp()),这意味着现在所有主流浏览器都支持它们。 这些CSS函数最大的作用就是可以为我.

2020-08-06 08:34:56 155

原创 5 个 JS 数组技巧可提高你的开发技能

作者:Ghazi Khan译者:前端小智来源:codewithghazi点赞再看,微信搜索 【大迁世界】 关注这个没有大厂背景,但有着一股向上积极心态人。本文 GitHub https://github.com/qq449245884/xiaozhi 上已经收录,文章的已分类,也整理了很多我的文档,和教程资料。在前端开发中,数组是经常会被用到的数组结构,今天,介绍 5 个处理数组技巧,希望能带给你们一些 启发和帮助。废话不多说,让我们开始吧。1. 随机排列在开发者,有时候我们需要对数组的.

2020-08-05 08:10:31 1126 1

原创 72.刮刮乐特效

效果 (源码网盘地址在最后)演示视频 刮刮乐特效 & 前端编程实战 72 演示视频一:https://www.ixigua.com/6856693664404472324/演示视频二:https://www.bilibili.com/video/BV16f4y1X7Yr/源码index.html<!DOCTYPE html><html lang="

2020-08-04 18:25:59 102

原创 71.类似望花筒特效

效果 (源码网盘地址在最后)演示视频 类似望花筒特效&前端编程实战 71 演示视频一:https://www.ixigua.com/6854843769590809100/演示视频二:https://www.bilibili.com/video/BV1Mh411Z7Ze/源码index.html<!DOCTYPE html><html lang="

2020-08-04 18:21:52 101

原创 70.SVG弹性线条动画特效

效果 (源码网盘地址在最后)演示视频 SVG弹性线条动画特效&前端编程实战 70 视频地址一:https://www.ixigua.com/6854472529604510222/视频地址二:https://www.bilibili.com/video/BV1bA411Y7UY/源码index.html<!DOCTYPE html><html la

2020-08-04 18:12:10 127

原创 一个有意思的方案:不借助后台和 JS ,只用 CSS 让一个列表编号倒序,你会怎么做?

作者:Manuel Matuzovic译者:前端小智来源:matuzo点赞再看,微信搜索 【大迁世界】 关注这个没有大厂背景,但有着一股向上积极心态人。本文 GitHub https://github.com/qq449245884/xiaozhi 上已经收录,文章的已分类,也整理了很多我的文档,和教程资料。我正在做一个项目,其中有一个倒序的列表。列表创建时间降序排序的,这里我想在语义和视觉上都能体现出来(让列表显示对应的编号,编号越大表示是最新的)。网上做了一些研究,找到了一些有趣的解决办.

2020-08-04 08:14:53 147

原创 回答一下这 10 个最常见的 Javascript 问题

作者:Duomly译者:前端小智来源:dev点赞再看,微信搜索 【大迁世界】 关注这个没有大厂背景,但有着一股向上积极心态人。本文 GitHub https://github.com/qq449245884/xiaozhi 上已经收录,文章的已分类,也整理了很多我的文档,和教程资料。为初学者介绍一下这 10 个最常被问到的 JavaScript 问题在本文中,我收集了关于Javascript 最常被问到的 10 个问题及其答案。这10 个问题大多涉及 Javascript 的基础知识,所.

2020-07-31 07:51:47 1765

原创 初学者应该看的 Webpack 完整指南(2020)

点赞再看,微信搜索 【大迁世界】 关注这个没有大厂背景,但有着一股向上积极心态人。本文 GitHub https://github.com/qq449245884/xiaozhi 上已经收录,文章的已分类,也整理了很多我的文档,和教程资料。我们应该学习 webpack 吗 ?如今,CLI工具(如create-react-app或Vue -cli)已经为我们抽象了大部分配置,并提供了合理的默认设置。即使那样,了解幕后工作原理还是有好处的,因为我们迟早需要对默认值进行一些调整。在本文中中,我们会知道.

2020-07-30 08:22:48 1660

原创 69.创意div盒设计

效果 (源码网盘地址在最后)演示视频 「前端编程实战 69」创意div盒设计 视频地址一:https://www.ixigua.com/6854099563981046283/视频地址二:https://www.bilibili.com/video/BV1dK411J7p2/源码index.html<!DOCTYPE html><html lang="en

2020-07-29 18:47:13 324

原创 你可能不需要在 JavaScript 使用 switch 语句!

作者:Valentino Gagliardi译者:前端小智来源:valentinog点赞再看,微信搜索 【大迁世界】 关注这个没有大厂背景,但有着一股向上积极心态人。本文 GitHub https://github.com/qq449245884/xiaozhi 上已经收录,文章的已分类,也整理了很多我的文档,和教程资料。没有 switch 就没有复杂的代码块switch很方便:给定一个表达式,我们可以检查它是否与一堆case子句中的其他表达式匹配。 考虑以下示例:const name .

2020-07-29 07:56:42 440

原创 一个孤独的孩子:我该不该将控制流指令写入通用结构组件中?

作者:Michael Thiessen译者:前端小智来源:medium点赞再看,微信搜索 【大迁世界】 关注这个没有大厂背景,但有着一股向上积极心态人。本文 GitHub https://github.com/qq449245884/xiaozhi 上已经收录,文章的已分类,也整理了很多我的文档,和教程资料。控制流指令,如v-if和v-for,如果在较大项目中,就很有可能会创建一些难以阅读的嵌套代码。如果在v-if内嵌套了v-for ,刚这个特征就更明显了。为了程序员的头发着想,我希望大家.

2020-07-28 07:58:49 167

原创 68.自定义动态复选框

效果 (源码网盘地址在最后)演示视频 「前端编程实战 68」自定义动态复选框 视频地址一:https://www.ixigua.com/6852620647915815437/视频地址二:https://www.bilibili.com/video/BV16Z4y1u7NY/源码index.html<!DOCTYPE html><html lang="en

2020-07-27 17:58:05 209

原创 很多人不知道可以使用这种 key 的方式来对 Vue 组件时行重新渲染!

作者:Michael Thiessen译者:前端小智来源:medium点赞再看,养成习惯本文 GitHub https://github.com/qq449245884/xiaozhi 上已经收录,更多往期高赞文章的分类,也整理了很多我的文档,和教程资料。欢迎Star和完善,大家面试可以参照考点复习,希望我们一起有点东西。在某些情况下,我们必须强制Vue重新渲染组件,如果没有,那可能,你做的业务还不够负责,反正我是经常需要重新渲染组件,哈哈。虽然Vue不会自动更新这种情况是相对比较少,但.

2020-07-27 08:52:32 335

原创 我不知道还可以用 JS 做的 6 件事

作者:Daniel译者:前端小智来源:js-craft点赞再看,微信搜索 【大迁世界】 关注这个没有大厂背景,但有着一股向上积极心态人。本文 GitHub https://github.com/qq449245884/xiaozhi 上已经收录,文章的已分类,也整理了很多我的文档,和教程资料。JS 是一种灵活的语言,这种特性让我们经常觉得它是一门最简单的语言,也是最难掌握的语言。 我使用 JavaScript 已有很多年了,但我仍然偶然发现一些我不知道的隐藏语法或技巧。我们来一直看看,我发.

2020-07-24 14:02:48 190

原创 对于组件的可重用性,大佬给出来6个级别的见解,一起过目一下!

作者:Michael Thiessen译者:前端小智来源:news点赞再看,微信搜索 【大迁世界】 关注这个没有大厂背景,但有着一股向上积极心态人。本文 GitHub https://github.com/qq449245884/xiaozhi 上已经收录,文章的已分类,也整理了很多我的文档,和教程资料。我们所有人都希望编写更少的代码,同时也要做更多的事情。为了实现这一点,我们构建了组件,以便可以多次重用它们。有些组件只需要基本的可重用性,而另一些则需要更复杂的重构技术,我们才能充分复用它.

2020-07-24 14:01:20 149

原创 又一个布局利器, CSS 伪类 :placeholder-shown

作者:Samantha Ming译者:前端小智来源:medium点赞再看,微信搜索 【大迁世界】 关注这个没有大厂背景,但有着一股向上积极心态人。本文 GitHub https://github.com/qq449245884/xiaozhi 上已经收录,文章的已分类,也整理了很多我的文档,和教程资料。一般我们常见placeholder伪类选择器用来修改默认样式及文案,忽然发现placeholder-shown伪类选择器,比较官方的解释是CSS伪类表示任何显示占位符文本的form元素。.

2020-07-24 13:59:49 194 1

原创 67.信号故障特效

效果 (源码网盘地址在最后)源码index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>67.信号故障特效</title> <link href="./

2020-07-22 17:56:36 252

原创 你的函数有多快?使用 performance 监控前端性能

要比较两个函数哪个性能更好,一个直观且公平的方法就是计算两个函数分别执行完的时间。良好的性能更容易好的用户体验,而好的用户体验更能留住用户。研究表明,由于性能问题,在88%的在线消费者对...

2020-07-22 08:25:00 215

原创 历时4个多月,学习了这 66 个CSS 特效

点赞再看,微信搜索 【大迁世界】 关注这个没有大厂背景,但有着一股向上积极心态人。本文 GitHub https://github.com/qq449245884/xiaozhi 上已经收录,文章的已分类,也整理了很多我的文档,和教程资料。这 66 个特效,是我历时4个多月在油管一个一个跟着敲出来的,为了加强记忆,每个练习,我都录制了视频,在这里分享出来给大家。大家可能又会调侃了,你是工作不饱和吧,有时间做这些。其实,我目前工作还是挺饱和的,都是挤出来的。我们是9点上班,我基本7点半就到公司自学了,这.

2020-07-20 13:30:07 6119 6

原创 66.电视噪音动画特效

效果 (源码网盘地址在最后)视频演示 「前端编程实战 66」电视噪音动画特效 视频地址一:https://www.ixigua.com/6850386816432865806/视频地址二:https://www.bilibili.com/video/BV1Jv411q7oh/源码index.html<!DOCTYPE html><html lang="en

2020-07-18 08:27:17 610

原创 65.粘糊糊的动画效果

效果 (源码网盘地址在最后)视频演示 「前端编程实战 65」-粘糊糊的动画效果 视频地址一:https://www.ixigua.com/6850016080396714499/视频地址二:https://www.bilibili.com/video/BV1wK4y1x7BY/源码index.html<!DOCTYPE html><html lang="e

2020-07-18 08:23:10 478

原创 64.圣诞节动画特效

效果 (源码网盘地址在最后) 前端编程实战 64」圣诞节动画特效 视频地址一:https://www.ixigua.com/6849270738138956299/视频地址二:https://www.bilibili.com/video/BV1g5411e7yQ/源码index.html<!DOCTYPE html><html lang="en">&

2020-07-18 08:18:33 346

原创 63.全屏加载页面动画特效

效果 (源码网盘地址在最后)视频演示 「前端编程实战 63」HTML+CSS3 实现全屏加载页面动画特效 视频地址一:https://www.ixigua.com/6848908900436017676/视频地址二:https://www.bilibili.com/video/BV1zK4y1s7it/源码index.html<!DOCTYPE html>&lt

2020-07-18 08:14:21 405

原创 62.渐变发光加载动画特效

效果 (源码网盘地址在最后)视频演示 「前端编程实战 62」渐变发光加载动画特效 视频地址一:https://www.ixigua.com/6847787865380913675/视频地址二:https://www.bilibili.com/video/BV1hk4y1B7rM/源码index.html<!DOCTYPE html><html lang="

2020-07-18 08:10:02 1061 1

原创 61.反射属性-webkit-box-reflect应用

效果 (源码网盘地址在最后)视频演示 「前端编程实战 61」反射属性 -webkit-box-reflect 应用 视频地址一:https://www.ixigua.com/6847050168638898692/视频地址二:https://www.bilibili.com/video/BV1iA411e7Dr/源码index.html<!DOCTYPE html&gt

2020-07-18 08:05:03 243

原创 60.如何在文字内放置视频

效果 (源码网盘地址在最后)视频演示 「前端编程实战 60」HTML+CSS3 实现如何在文字内放置视频 视频地址一:https://www.ixigua.com/6846310483146998275/视频地址二:https://www.bilibili.com/video/BV1B5411Y7A5/源码index.html<!DOCTYPE html>&lt

2020-07-18 07:58:13 276

原创 Web 技术:CSS最小和最大(宽度/高度)知识点及优缺点

通常,我们希望限制元素相对于其父元素的宽度,同时使其具有动态性。因此,有一个基础宽度或高度的能力,使其扩展的基础上,可用的空间。比如说,我们有一个按钮,它的宽度应该是最小的,不应该低于它...

2020-07-15 08:25:00 240

原创 很多人不知道 Vue 中的组件就是一个函数!

在所有组件之下,组件只是返回一些HTML的函数。这是一个强大的简化,如果你曾研究过Vue代码库的复杂性,那么你就会知道这实际上不是事实。但是从根本上讲,这就是Vue为我们所做的事情。看一...

2020-07-14 08:20:00 251

原创 使用内联的 CSS 变量技巧,提高灵巧布局效率!

有些情况下,我需要用一种简单的方法来创建网格布局。例如,每次我改变主意时,在不修改CSS的情况下快速画出五列网格。在本文中,我们一起探索一些用例,并思考如果实现及使用它们。它是怎么工作的...

2020-07-13 11:40:00 254

原创 ES6 中 module 备忘清单,你可能知道 module 还可以这样用!

这是一份备忘单,展示了不同的导出方式和相应的导入方式。它实际上可分为3种类型:名称,默认值和列表 ????//命名导入/导出exportconstname='val...

2020-07-09 08:25:00 386

原创 这份 window.location 备忘单,让你更有条理解决地址路径问题!

如果你想获取站点的URL信息,那么window.location对象什么很适合你!使用其属性获取有关当前页面地址的信息,或使用其方法进行某些页面重定向或刷新????https://seg...

2020-07-08 08:26:00 413

原创 前端如何提高用户体验:增强可点击区域的大小

你是否曾经试着点击或点击一个元素(例如:按钮、链接),并且注意到只有单击该元素的特定区域,它才会响应?必生这种情况是因为可点击区域未应用于整个元素。为了更加清楚,请参见下图,左图可点击区...

2020-07-06 08:25:00 870

原创 59.弹出框与模糊的背景特效

效果 (源码网盘地址在最后)视频演示 「前端编程实战 57」HTML+CSS3 实现 效响应盒模型特效 视频地址一:https://www.ixigua.com/i6845126624082395656/视频地址二:https://www.bilibili.com/video/BV1bA411i75h/源码index.html<!DOCTYPE html>&lt

2020-07-04 18:16:20 3818 3

原创 58.数字时钟特效

效果 (源码网盘地址在最后)视频演示 「前端编程实战 58」HTML+CSS3 实现数字时钟特效 视频地址一:https://www.ixigua.com/i6844451067896267278/视频地址二:https://www.bilibili.com/video/BV1bp4y1U7fS/源码index.html<!DOCTYPE html><htm

2020-07-04 18:11:55 782

原创 57.响应盒模型特效

效果 (源码网盘地址在最后)视频演示 「前端编程实战 57」HTML+CSS3 实现 效响应盒模型特效 视频地址一:https://www.ixigua.com/i6844083190756278796/视频地址二:https://www.bilibili.com/video/BV1bA411i75h/源码index.html<!DOCTYPE html>&lt

2020-07-04 18:08:18 522

原创 56.3D编辑文本特效

效果 (源码网盘地址在最后)视频演示 「前端编程实战 56」HTML+CSS3 实现 3D 编辑文本特效 视频地址一:https://www.ixigua.com/i6843709475413557764/视频地址二:https://www.bilibili.com/video/BV1oi4y1G7xz/源码index.html<!DOCTYPE html>&l

2020-07-04 18:03:09 424

原创 55.CSS3创意按钮悬停特效

效果 (源码网盘地址在最后)视频演示 前端编程实战 55」HTML+CSS3 创意按钮悬停特效 视频地址一:https://mp.toutiao.com/profile_v3/xigua/content-manage视频地址二:https://www.bilibili.com/video/BV1ZK411n7v7/源码index.html<!DOCTYPE html&g

2020-07-04 17:54:20 501

原创 54.文本旋转动画效果

效果 (源码网盘地址在最后)视频演示 「前端编程实战 54」HTML+CSS3 实现文本旋转动画效果 视频地址一:https://www.ixigua.com/i6841854545706877447/视频地址二:https://www.bilibili.com/video/BV1iC4y1a7wW/源码index.html<!DOCTYPE html><

2020-07-04 17:49:03 381

原创 周末学会了 10个超级实用 Javascript 技巧!

众所周知,JavaScript 一直在快速变化。在新的 ES2020 中,有很多很棒的特性,我们大都已经迫不及待尝试了。老实说,有时我们可以用不同角度来编写代码,同样也能达到相同的效果,...

2020-07-02 08:25:00 5290 6

提示
确定要删除当前文章?
取消 删除