- 博客(102)
- 收藏
- 关注
RSS订阅原创 web前端入门到实战：CSS：scroll-snap滚动事件停止及元素位置检测
一、Scroll Snap是前端必备技能CSS Scroll Snap是个非常好用的特性，可以让网页容器滚动停止的时候，无需任何JS代码的参与，浏览器可以自动平滑定位到指定元素的指定位置。类似幻灯片广告效果就可以纯CSS实现。而且CSS Scroll Snap的兼容性非常好，移动端几乎可以放心使用。二、源自实际项目的scroll-snap场景今天下午在实现一个功能需求的时候，正好遇到一个...
2019-08-26 17:00:44
178
原创 web前端入门到实战：CSS实现平行四边形布局效果
如何实现下图所示的平行四边形布局效果？一、skewX的局限一提到平行四边形，条件反射般的就会想起CSS transform中的skew()/skewX()/skewY()方法，可以让元素斜切，从而实现平行四边形效果HTML如下：<div class="input-x"> <input class="input" placeholder="您的姓名">&l...
2019-08-26 17:00:38
1180
原创 web前端入门到实战：CSS滤镜和混合模式处理的图片如何上传下载？
一、使用CSS滤镜和混合模式在线PS使用CSS滤镜和混合模式可以实现各种各样的图像处理效果，内置众多图像处理效果，部分效果示意如下缩略图：进入demo页面你也可以点击这里的按钮，更换你本地的素材，查看对应的图像效果：呈现的效果虽好，但是也带来另外一个问题，虽然视觉上是已经处理后的图片，但是如果我们右键-图片另存为，会发现还是原图。如果用户觉得某个图片处理后的效果很棒，想要保存到自己的本...
2019-08-26 17:00:00
166
原创 web前端入门到实战：CSS文字下波浪线动画效果
之前有至少5个人在评论中询问我文章中链接hover时候波浪下划线动画是怎么实现的，类似下图gif示意：这里就介绍下是如何实现的。有两种实现方法，各有优劣。一、使用径向渐变纯CSS实现就是使用径向渐变绘制我们的波浪线效果，一个波浪线循环段是有一个朝上的半个圆弧和一个朝下的半个圆弧组合而成的。所以，我们只要使用径向渐变绘制圆弧，再通过background-position控制两个圆弧的位...
2019-08-26 16:59:55
718
原创 web前端入门到实战：CSS： 使用“变量种子计数器”扩展动画更多可能性
一、不是所有CSS属性都能动画经常和CSS打交道的人肯定都知道，不是所有的CSS属性都能使用animation属性实现动画效果，最典型的例子就是background-image渐变。一个典型的线性渐变是由角度，颜色和位置组成，例如：.gradient { background-image: linear-gradient(45deg, red 50%, blue 50%);}...
2019-08-26 16:59:44
160
原创 web前端入门到实战：CSS box-sizing与background-clip
过去在学习CSS的时候，首要任务就是要理解“box model”，因为box model是CSS里头很重要的模型概念，描述了padding、margin、border与content的空间定位，今天的项目竟然卡在一个简单的小问题，因此就用一篇文章做个纪录提醒自己不要忘记，也避免之后遭遇到又会卡住了。（下图就是CSS的box model）今天遇到的问题是出在我用了一个半透明的border，但却无...
2019-08-24 17:30:11
140
原创 web前端入门到实战：CSS text-decoration
在改一个项目的时候却遇到了一个莫名其妙的属性：text-decoration，这个属性，其实就只是用来把一段文字加上上横线、删除线或底线的属性罢了，通常会用在移除超链接的底线、或一些特殊强调的效果里头，但是这么容易的属性，为什么会莫名其妙呢？就让我们继续看下去~项目里遇到的问题在我的项目里头遇到的问题如下，一个div里头包了一个span，我要“除了这个span之外，其他所有的文字都有底线”，通...
2019-08-24 17:30:08
452
原创 web前端入门到实战：学习web前端流程以及职场规划
解释一下web前端工作是做啥的，Web前端开发工程师，主要职责是利用(X)HTML/CSS/JavaScript/Flash等各种Web技术进行客户端产品的开发。完成客户端程序（也就是浏览器端）的开发，开发JavaScript以及Flash模块，同时结合后台开发技术模拟整体效果，进行丰富互联网的Web开发，致力于通过技术改善用户体验。个人背景：首先我的前端是自学的，而那个时候并没有前端的称呼...
2019-08-24 17:30:03
305
原创 web前端入门到实战：web前端还有发展前景吗？
从15年开始web前端就突然火了起来，web前端现在已经到了我们不能想象的境界，一切的步伐都要跟着大公司走，腾讯这样级别的公司都这样重视web前端技术，可见web前端的发展前景是多么的可观，虽然现在竞争大，但是中国未来五年，web前端人才的需求量也是在不断上升的，而目前北京和上海这样的城市，平均工资是12000左右。但是我现在看到的问题是，大家看到web前端这个职业发展非常好，未来前景也是非常...
2019-08-24 17:29:51
167
原创 web前端入门到实战：学历到底重不重要？
首先，我们先了解一下一般情况下学历的作用是什么，对于我们大多数人来讲，在进行面试的时候，学历最重要的一个作用就是“敲门砖”，现在任何公司招聘，都会写上大专学历以上或者是本科学历以上，但是对于真正有能力的人，学历并不能约束到你，往往都是既没有学历又没有能力的这种人，那就没有办法了。web前端的工作性质是什么？了解完了学历的作用，我们就在了解一下web前端的工作主要是做什么，我们简单来说，就是做...
2019-08-24 17:01:58
360
原创 web前端入门到实战：实现CSS形状变换
CSS3的“clip-path”，这个“clip-path”看起来有点眼熟，因为它原本就存在于SVG里头，利用掩码（剪裁）的方法，连接坐标绘制掩码区域，就可以做出许多不同的形状，让底色或底图显现，随着浏览器对于CSS3的支持度大幅提升，自然而然的就可以用它来做些与众不同的变化。运用clip-path超强的网站最先看到这个属性的应用，是从这个网站看到的：species-in-pieces.com...
2019-08-24 17:00:03
212
原创 web前端入门到实战：CSS动画Transition与Animation
本文总结CSS3中两个用来做动画的属性，一个是transition，另一个是animation。差异比较CSS3差异transition在给定的持续时间内平滑地更改属性值（从一个值到另一个值），也就是只需要指定开始与结束的参数，参数改变时就触发动画。常用语鼠标事件（:hover、active、:focus、:click）或键盘输入时触发需要事件触发，无...
2019-08-23 15:18:04
216
原创 web前端入门到实战：CSS颜色、背景和剪切
颜色CSS 中可以改变文字的颜色还有元素的背景颜色。可以用颜色关键字来定义颜色，如red，但是这些颜色关键字并不常用。transparenttransparent可以让文字或背景变的完全透明的颜色，它就像rgba(0,0,0,0)的缩写。currentColorcurrentColor代表原始的color属性的计算值。比如当前元素color为红色，背景色设置为currentColor，那...
2019-08-23 15:18:02
374
原创 web前端入门到实战：CSS模拟下雪效果动画制作教程
下雪效果只是一类效果的名称，可以是红包雨等一些自由落体的运动效果，本文就是用纯css模拟下雪的效果，更多效果大家可以自行发挥。1.前言由于公司产品的活动，需要模拟类似下雪的效果。浏览器实现动画无非css3和canvas（还有gif），对比下css3和canvas的优缺点：动画自由度：canvas胜；复杂度：canvas胜；兼容性：canvas胜；性能：css3胜（requestAn...
2019-08-23 15:17:57
547
原创 web前端入门到实战：CSS实现仿 Windows10 鼠标照亮边框效果
安装最新 Windows 10 update 之后，注意到系统 UI 里有一个很棒的细节效果，在开始菜单的磁贴里或者 UWP 风格的设置界面中，元素的高亮边框是可以感知鼠标的，边框的高亮部分会跟随鼠标的移动而移动。顿时灵机一动，这个效果用 CSS 可否实现？分析拿桌面日历中的效果为例，鼠标移动时附近的边框也渐变性可见。这个效果不就是探照灯效果嘛！这个完全可以用 CSS 中的 mask 蒙版配...
2019-08-23 15:17:51
467
原创 web前端入门到实战：CSS项目悬停过渡动画三部曲
CSS不一定要写得多么复杂才能实现特殊效果。如下就是三个超级简单的过渡的例子，可能只是几行代码，但是添加到Web应用程序中，却会让它增色不少。如下是我们将在本教程中构建的代码项目设置在这个项目中，我们将把过渡效果应用到一个class为box的元素上面。这个box元素内部是垂直和水平居中的文字内容。HTML结构相当简单：<div class='box'> <p>...
2019-08-23 15:00:00
206
原创 web前端入门到实战：CSS3日食效果代码
利用css3实现了日食效果。代码实例如下:<!doctype html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>web前端开发学习q群：767273102 ...
2019-08-22 16:00:07
221
原创 web前端入门到实战：CSS3实现文本凹凸效果
css3实现了文本的凹凸效果，所谓的凹凸效果，就是那种具有立体凿刻的感觉。代码实例如下:<!doctype html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>...
2019-08-22 15:59:58
309
原创 web前端入门到实战：CSS3动画效果下拉导航菜单效果
分享一段代码示例，它实现了简单的下拉菜单效果。但是下拉菜单具有3D旋转效果，代码实例如下:<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title&g...
2019-08-22 15:59:56
400
原创 web前端入门到实战：CSS3心形效果代码
利用css3实现了心形效果，并且还能够跳动。代码实例如下:<!doctype html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>web前端开发学习q群：767...
2019-08-22 15:59:53
2719
原创 web前端入门到实战：CSS鼠标悬浮图片模糊切换效果
分享一段代码实例，它实现了图片的模糊效果。默认状态下，图片是模糊的，当鼠标悬浮那么图片会恢复正常状态。代码实例如下:<!doctype html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" />...
2019-08-22 15:59:51
427
原创 web前端入门到实战：CSS Text Decoration点缀文字
大家很熟悉的 CSS2 用法 text-decoration ，到了 CSS3 就拥有很多新的特性。本文将介绍 Level 4 中最新添加的特性。CSS Text Decoration文字修饰线：text-decoration-linetext-decoration-line也就是 CSS3 之前的 text-decoration，属性有如下的属性值：属性值效果none...
2019-08-21 14:00:00
562
原创 web前端入门到实战：CSS 与 JS 是这样阻塞 DOM 解析和渲染的
估计大家都听过，尽量将 CSS 放头部，JS 放底部，这样可以提高页面的性能。然而，为什么呢？大家有考虑过么？很长一段时间，我都是知其然而不知其所以然，强行背下来应付考核当然可以，但实际应用中必然一塌糊涂。因此洗（wang）心（yang）革（bu）面（lao），小结一下最近玩出来的成果。友情提示，本文也是小白向为主，如果直接想看结论可以拉到最下面看的~node 端唯一需要解释一下的是这个函数...
2019-08-21 13:59:58
141
原创 web前端入门到实战：10个css3伪类使用技巧和运用
伪类经常与伪元素混淆，伪元素的效果类似于通过添加一个实际的元素才能达到，而伪类的效果类似于通过添加一个实际的类来达到。实际上css3为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。伪类与伪元素的本质区别就是是否抽象创造了新元素。具体的伪类和伪元素相关知识本文就不深入，下面介绍一下从青铜到王者10个css3伪类使用技巧和运用。青铜-1、伪类实现盒子阴影众所周知，An...
2019-08-21 13:59:57
589
原创 web前端入门到实战：CSS动画之旋转魔方轮播
下面我将一步一步详解如何利用纯CSS实现一个旋转魔方轮播的效果。总的来说我们需要实现以下两个主要功能：构建一个能够旋转的立方体让立方体拥有基本轮播所具有的特性但在完成以上两点之前我们需要再次了解或熟悉一下实现其功能的CSS3基础知识点：transitiontransformperspectivepreserve-3danimationtran...
2019-08-21 13:59:53
778
原创 web前端入门到实战：CSS实现波浪效果
一直以来，使用纯 CSS 实现波浪效果都是十分困难的。因为实现波浪的曲线需要借助贝塞尔曲线。而使用纯 CSS 的方式，实现贝塞尔曲线，额，暂时是没有很好的方法。当然，借助其他力量（SVG、CANVAS），是可以很轻松的完成所谓的波浪效果的。下面先来看看非 CSS 方式实现的波浪效果SVG 实现波浪效果借助 SVG ，是很容易画出三次贝塞尔曲线的。<svg width="20...
2019-08-21 13:59:52
1417
原创 web前端入门到实战：利用CSS重置网站的样式
许多前端开发人员都在用 Normalize 为他们的网站设计样式。一些人喜欢在 Normalize.css 中添加一些自己偏好的样式，我也一样。在本文中，我会与你分享我自己的 CSS reset 项目（除了 Normalize.css 之外我还使用它们）。我将 reset 项分为8类：1.盒子大小2.删除边距和填充3.列表4.表格和按钮5.图像和嵌入视频6.表格7.隐藏属性8…...
2019-08-20 20:59:54
161
原创 web前端入门到实战：CSS3实现王者荣耀匹配人员加载页面
玩过王者的应该都熟悉，这个页面的效果。为什么要实现这个效果了？第一：王者这么火，电竞这么火。第二：主要还是来学习 CSS3 的线性、径向渐变、旋转、缩放以及动画。图形解析1、背景（径向渐变）2、玩家（player）加载动画（线性渐变）3、背景镂空旋转正方形4、正方形文字放大动画5、文字按钮制作下面我们按上述步骤实现背景制作background: radial-gradie...
2019-08-20 20:59:54
1220
原创 web前端入门到实战：CSS奇淫技巧 :视差图像，sticky footer 混合模式等等
CSS是一种独特的语言。乍一看，这似乎很简单,但是，某些在理论上看起来很简单的效果在实践中往往不那么明显。在本文中，我将分享一些在大多数CSS教程中不太可能找到的有用技巧。1. Sticky Footer这个非常常见的需求,但对于初学者来说可能是个难题。对于大多数项目，不管内容的大小，都希望页脚停留在屏幕的底部—如果页面的内容经过了视图端口，页脚应该进行调整。在CSS3之前，如果不知道脚...
2019-08-20 20:59:52
370
原创 web前端入门到实战：CSS3动画中6种常见错误
本篇文章总结在CSS3动画上遇到的问题，6种常见错误，以及解决方案。愿每一位前端开发者在后来都能躲过这些坑！常见错误：Animation篇首先先来复习一下animation的有哪些属性：属性名默认作用animation-namenonekeyframe 的名字animation-duration0s运行总时长animation-timing-fun...
2019-08-20 20:59:50
197
原创 web前端入门到实战：CSS尺寸单位介绍
前端开发过程中，尺寸单位是我们必须用到的，下面我们对css中常见的几种尺寸单位px,em,rem,rpx进行逐一介绍在这之前，需要先对几个概念进行普及介绍基本概念（以下概念读起来可能有些晦涩，如果看不懂也没关系）像素它不是自然界的物理长度，指基本原色素及其灰度的基本编码。css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。在为桌...
2019-08-20 20:59:48
290
原创 web前端入门到实战：最全的CSS hack方式
做前端多年，虽然不是经常需要hack，但是我们经常会遇到各浏览器表现不一致的情况。基于此，某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现。我个人是不太推荐使用hack的，要知道一名好的前端，要尽可能不使用hack的情况下实现需求，做到较好的用户体验。可是啊，现实太残酷，浏览器厂商之间历史遗留的问题让我们在目标需求下不得不向hack妥协，虽然这只是个别情况。今天，结合自己的...
2019-08-20 16:59:57
210
原创 web前端入门到实战：css实现图片自适应容器的几种方式
css实现图片自适应容器经常有这样一个场景，需要让图片自适应容器的大小。1、img标签的方式我们马上就能想到，把width、height 设置为100%啊。来看一哈效果。<div class='div1'> <img src="./peiqi.png" alt=""></div>.div1 { width:500px; ...
2019-08-20 16:59:55
1750
原创 web前端入门到实战：CSS文本、空白换行
前提：文本的父容器是块级元素。首先，我们来整理一下与换行有关的3个CSS属性：word-break该属性决定文本内容超出容器时，浏览器是否自动插入换行符。属性值：normal：默认换行规则——英文以词为单位换行，连续字符不换行，直接溢出父元素break-all：无视单词，强制在父元素边缘位置截断（最省空间，看起来最整齐，但单词可能被从中劈开）。另外连续的标点符号不会换行，不知为何。。...
2019-08-20 16:59:54
438
原创 web前端入门到实战：CSS3炫酷发光文字 ，自定义色彩
这是一款基于纯CSS3的文字发光特效，当我们将鼠标滑过文字时，文字就会模拟发光动画，展现出非常酷的发光画面。另外，由于引用了特殊字体，所以整个文字效果看起来有着3D立体的特效，如果你的网络无法加载这些字体，可能是由于国外的这个网站被墙的缘故，就像google的字体库网址被屏蔽那样。HTML代码<div id="container"> <p><a href=...
2019-08-20 16:59:52
561
原创 web前端入门到实战：玩转 CSS3 3D 技术
css3的3d起步要玩转css3的3d，就必须了解几个词汇，便是透视(perspective)、旋转(rotate)和移动(translate)。透视即是以现实的视角来看屏幕上的2D事物，从而展现3D的效果。旋转则不再是2D平面上的旋转，而是三维坐标系的旋转，就包括X轴，Y轴，Z轴旋转。平移同理。当然用理论来说明，估计你还不明白。下面是3个gif：沿着X轴旋转沿着Y轴旋转...
2019-08-20 16:59:49
1066
原创 web前端入门到实战：CSS3变形、过渡、动画、关联属性浅析
一、变形transform：可以对元素对象进行旋转rotate、缩放scale、移动translate、倾斜skew、矩阵变形matrix。示例：transform: rotate(90deg) scale(1.5,0.8) translate(100px,50px) skew(45deg,45deg);/*矩阵变形*/matrix(<number>,<number&...
2019-08-19 21:07:28
159
原创 web前端入门到实战：CSS面试要点
一、px，em，rem、vw、vh1.px (pixel，像素)：是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPI(Dots Per Inch，每英寸像素数)，在扫描打印时一般都有DPI可选。Windows系统默认是96dpi，Apple系统默认是72dpi。2.em(相对长度单位，相对于当前对象内文本的字体尺寸)：是一个相对长度单位，最...
2019-08-19 21:07:27
202
原创 web前端入门到实战：CSS实现带阴影的三角形
怎么用CSS画一个带阴影的三角形呢 ?有童鞋说, 这还不简单吗网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一些问题假设我们做一个向下的三角形箭头常见的方法大致有两种1.通过边框控制, border-left和border-right设为透明, border-top设为预定的颜色即可2.通过 transform 旋转盒子设计2.1 边框法html结构<b...
2019-08-19 21:07:25
434
原创 web前端入门到实战：CSS工具-Flexbox简易入门教程
近几年，CSS领域出现了一些复杂的专用布局工具，用以代替原有的诸如使用表格、浮动和绝对定位之类的各种变通方案。Flexbox，或者说是弹性盒子布局模块（Flexible Box Layout Module）是这些新布局工具中的第一个，接着是CSS网格布局模块（CSS Grid Layout Module）。我们会在本文给出一个易于理解的flexbox入门介绍。随着CSS网格布局的引入，你可能会问...
2019-08-19 21:00:00
123
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人