免费10篇/更新中
-
编辑 删除
强大的CSS：var变量的局部作用域（继承）特性
一、CSS变量非全局最近做项目，发现CSS变量一个有意思的特性，那就是变量作用域非全局。举个例子，如下HTML和CSS：<div class="box"> <div class="a">测试a</div>  
-
编辑 删除
强大的CSS：focus-visible伪类真的太6了！
一、快速了解CSS :focus-visible伪类:focus-visible伪类是非常年轻的一个伪类，目前仅Chrome浏览器标准支持，但足够了。如果你是一个深入用户体验的开发者，这个伪类会非常有用。:focus-visible伪类应用的场景是：元素聚焦，同时聚焦轮廓浏览器认为应该显示。是不是很拗口？规范就是这么定义的。:focus-visible的规范并没有强行约束匹配逻辑，而是交给了UA（
-
编辑 删除
强大的CSS：scroll-snap滚动事件停止及元素位置检测
一、Scroll Snap是前端必备技能CSS Scroll Snap是个非常好用的特性，可以让网页容器滚动停止的时候，无需任何JS代码的参与，浏览器可以自动平滑定位到指定元素的指定位置。类似幻灯片广告效果就可以纯CSS实现。而且CSS Scroll Snap的兼容性非常好，移动端几乎可以放心使用。二、源自实际项目的scroll-snap场景今天下午在实现一个功能需求的时候，正好遇到一个场景非常适
-
编辑 删除
强大的CSS：实现平行四边形布局效果
如何实现下图所示的平行四边形布局效果？一、skewX的局限一提到平行四边形，条件反射般的就会想起CSS transform中的skew()/skewX()/skewY()方法，可以让元素斜切，从而实现平行四边形效果HTML如下：<div class="input-x"> <input&nbs
-
编辑 删除
强大的CSS：滤镜和混合模式处理的图片如何上传下载？
一、使用CSS滤镜和混合模式在线PS使用CSS滤镜和混合模式可以实现各种各样的图像处理效果，内置众多图像处理效果，部分效果示意如下缩略图：进入demo页面你也可以点击这里的按钮，更换你本地的素材，查看对应的图像效果：呈现的效果虽好，但是也带来另外一个问题，虽然视觉上是已经处理后的图片，但是如果我们右键-图片另存为，会发现还是原图。如果用户觉得某个图片处理后的效果很棒，想要保存到自己的本机，就会受阻
-
编辑 删除
强大的CSS：文字下波浪线动画效果
之前有至少5个人在评论中询问我文章中链接hover时候波浪下划线动画是怎么实现的，类似下图gif示意：这里就介绍下是如何实现的。有两种实现方法，各有优劣。一、使用径向渐变纯CSS实现就是使用径向渐变绘制我们的波浪线效果，一个波浪线循环段是有一个朝上的半个圆弧和一个朝下的半个圆弧组合而成的。所以，我们只要使用径向渐变绘制圆弧，再通过background-position控制两个圆弧的位置，让其前后拼
-
编辑 删除
强大的CSS： 使用“变量种子计数器”扩展动画更多可能性
一、不是所有CSS属性都能动画经常和CSS打交道的人肯定都知道，不是所有的CSS属性都能使用animation属性实现动画效果，最典型的例子就是background-image渐变。一个典型的线性渐变是由角度，颜色和位置组成，例如：.gradient { background-image: linear-gradient(45d
-
编辑 删除
前端进阶（三）从0到1学AJAX，这篇就够了！
什么是ajax？AJAX 就是浏览器提供的一套 API，可以通过 JavaScript 调用，从而实现通过代码控制请求与响应。实现网络编程1、使用 AJAX 的过程可以类比平常我们访问网页过程// 1\. 创建一个 XMLHttpRequest 类型的对象 —— 相当于打开了一个浏览器 var xhr =
-
编辑 删除
前端进阶（二）JS高级讲解面向对象，原型，继承，闭包，正则表达式，让你彻底爱上前端
JavaScript 高级学习目标:理解面向对象开发思想掌握 JavaScript 面向对象开发相关模式掌握在 JavaScript 中使用正则表达式自己是个做了几年开发的老码农，希望本文对你有用！ 这里推荐一下我的前端学习交流圈：767273102 ，里面都是学习前端的，从最基础的HTML+CSS+JS【炫酷特效，游戏，插件封装，设计模式】到移动端HTML5的项目实战的学习资料都有整理，送给每一
-
编辑 删除
前端进阶（一）掌握Web API，开发常见的页面交互功能
目标掌握API和Web API的概念掌握常见的浏览器提供的API的调用方式能通过API开发常见的页面交互功能能够利用搜索引擎解决问题自己是个做了几年开发的老码农，希望本文对你有用！ 这里推荐一下我的前端学习交流圈：767273102 ，里面都是学习前端的，从最基础的HTML+CSS+JS【炫酷特效，游戏，插件封装，设计模式】到移动端HTML5的项目实战的学习资料都有整理，送给每一位前端小伙伴。20
-
编辑 删除
前端基础入门六(JQuery进阶)
jQuery特殊属性操作val方法val方法用于设置和获取表单元素的值，例如input、textarea的值//设置值 $("#name").val(“张三”); //获取值 $("#name").val();自己是个做了几年开发的老码农，希望本文对你有用！ 这里推荐一下我的前端学习交流圈：767273102 ，里面都是学习前端的，从最基础的HTML+
-
编辑 删除
前端基础入门五（掌握jQuery的常用api，实现动态效果）
jQuery基本概念学习目标：学会如何使用jQuery，掌握jQuery的常用api，能够使用jQuery实现常见的效果。为什么要学习jQuery？【01-让div显示与设置内容.html】使用javascript开发过程中，有许多的缺点：1\. 查找元素的方法太少，麻烦。 2\. 遍历伪数组很麻烦，通常要嵌套一大堆的for循环。 3\. 有兼容性问题。 4\.
-
编辑 删除
前端基础入门四（JavaScript基础）
目标:掌握编程的基本思维掌握编程的基本语法我们先来学习JavaScript基础，后续会讲解JavaScript高级。重点内容变量的声明及使用数据类型类型转换运算符JavaScript介绍JavaScript是什么JavaScript是一种运行在客户端 的脚本语言JavaScript的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言
-
编辑 删除
前端基础入门三（CSS总结篇——思维导图）
总结CSS学习路线
-
编辑 删除
前端基础入门二（CSS）
学习。大纲学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示模式熟练掌握CSS背景属性熟练掌握CSS三大特性熟练掌握CSS盒子模型熟练掌握CSS浮动10.熟练掌握CSS定位11.熟练掌握CSS高级技巧强化CSSCSS的发展历程从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的
-
编辑 删除
前端基础入门一（HTML）
学习大纲了解常用浏览器掌握WEB标准理解标签语义化掌握常用的排版标签掌握常用的文本格式化图像链接等标签掌握三种列表标签掌握表格标签掌握表格标签掌握表单标签自己是个做了几年开发的老码农，希望本文对你有用！ 这里推荐一下我的前端学习交流圈：767273102 ，里面都是学习前端的，从最基础的HTML+CSS+JS【炫酷特效，游戏，插件封装，设计模式】到移动端HTML5的项目实战的学习资料都有整理，送给
-
编辑 删除
强大的CSS： box-sizing与background-clip，解决背景显示范围的问题
过去在学习CSS的时候，首要任务就是要理解“box model”，因为box model是CSS里头很重要的模型概念，描述了padding、margin、border与content的空间定位，今天的项目竟然卡在一个简单的小问题，因此就用一篇文章做个纪录提醒自己不要忘记，也避免之后遭遇到又会卡住了。（下图就是CSS的box model）今天遇到的问题是出在我用了一个半透明的border，但却无法顺
-
编辑 删除
搞怪的CSS： text-decoration
在改一个项目的时候却遇到了一个莫名其妙的属性：text-decoration，这个属性，其实就只是用来把一段文字加上上横线、删除线或底线的属性罢了，通常会用在移除超链接的底线、或一些特殊强调的效果里头，但是这么容易的属性，为什么会莫名其妙呢？就让我们继续看下去~项目里遇到的问题在我的项目里头遇到的问题如下，一个div里头包了一个span，我要“除了这个span之外，其他所有的文字都有底线”，通常看
-
编辑 删除
强大的CSS动画：Transition与Animation
本文总结CSS3中两个用来做动画的属性，一个是transition，另一个是animation。差异比较CSS3差异transition在给定的持续时间内平滑地更改属性值（从一个值到另一个值），也就是只需要指定开始与结束的参数，参数改变时就触发动画。常用语鼠标事件（:hover、active、:focus、:click）或键盘输入时触发需要事件触发，无法在网页加载时自动发生。一次性，不能重复发生，
-
编辑 删除
强大的CSS：颜色、背景和剪切
颜色CSS 中可以改变文字的颜色还有元素的背景颜色。可以用颜色关键字来定义颜色，如red，但是这些颜色关键字并不常用。transparenttransparent可以让文字或背景变的完全透明的颜色，它就像rgba(0,0,0,0)的缩写。currentColorcurrentColor代表原始的color属性的计算值。比如当前元素color为红色，背景色设置为currentColor，那么现在背景
