- 博客(25)
- 收藏
- 关注
RSS订阅原创 css实现红心点赞动态效果
实现效果：素材：思路：逐帧动画，设置素材图片在每一帧的位置移动。刚开始的思路是把素材图片作为动画区域的background-image，然后再通过animation来改变background-position。但是实际操作之后发现这样做实际上是平滑过渡，没有达到我想要的效果，后来了解到了steps这个函数。steps实际上是animation-timing-function的参数，以为不连续执行动画。steps有两个参数，第一个参数是要分布执行的步数，在本例中，我的素材图片一共有29帧，也就
2021-03-17 16:22:36
1367
原创 记一个让我“翻车”的css问题
昨天读了大漠老师的《CSS现状和如何学习》一文，遇到了一个让我“翻车”的问题。例：.red { color: red}.blue { color: blue}<div class="red blue">Text1<div><div class="blue red">Text2<div>那么问题来了？Text1和Text2最终都会呈现出什么样式？再比如：.a { color: red;}.b { color: blue
2021-01-25 16:31:01
172
原创 记一个让我“翻车”的css问题
昨天读了大漠老师的《CSS现状和如何学习》一文，遇到了一个让我“翻车”的问题。例：.red { color: red}.blue { color: blue}<div class="red blue">Text1<div><div class="blue red">Text2<div>那么问题来了？Text1和Text2最终都会呈现出什么样式？再比如：.a { color: red;}.b { color: blue
2021-01-08 10:54:42
165
原创 d3.js数据可视化从入门到放不下（四）—— 给图表加点“料”
上一篇，我们已经构建了一个基本的平面直角坐标系。本篇主要讲讲给如何给坐标系加上数据和过渡动画。先整理一下svg的一些基础知识点：示例代码：<style> svg line { stroke: grey; stroke-width: 2; } svg circle { stroke: red; fill: none; stroke-width: 2; } svg rect { stroke: steelblue;
2020-09-21 17:49:33
333
原创 js取数组最后一个值
例：let arr = [1, 2, 3, 4, 5, 6]第一种：console.log(arr[arr.length-1]) // 6Tips：不够精简第二种：console.log(arr.pop()) // 6Tips：pop()方法会影响原数组第三种：console.log(arr.slice(-1)[0]) // 6Tips：推荐...
2020-09-07 10:30:52
1125
原创 d3.js数据可视化从入门到放不下（二）—— 实现一个基础图表
接上回的enter-update-exit模式，其实看书上的概念的话也不难理解，就是把整个图表的的生命周期分为进入-更新-退出三个阶段，再换句话说，可以把这三个阶段理解为三个函数，在不同生命周期执行相应函数即可。个人觉得在学习一个新的框架或工具的时候，最重要的还是理解其使用思路和模式，这点极为重要，只要这点搞懂了，其它的也不是什么大问题了，剩下的无非就是语法的问题，语法这个东西嘛，多练习就行了。本次主要分享基于d3.js来实现一个基本的图表demo，旨在深入理解其enter-update-exit模式。
2020-09-03 17:52:36
231
原创 Invalid attempt to spread non-iterable instance 错误解决办法js
一句话文章：当抛这个错的时候，百分之大多数的情况都是你解构了，不能解构的东西，比如undefined。
2020-09-01 11:25:51
4423
原创 d3.js数据可视化从入门到放不下（一）
背景：D3：指数据驱动文档（Data-Drive Document），D3严格遵循Web标准；d3.js：可以把D3理解为一种思路或者说是“风格”，d3.js正是基于这种“风格”开发的JavaScript库。说到JavaScript的库，就不得不提起jQuery，作为最知名的JavaScript库，没有之一。即使是在现今前端主流SPA框架盛行的情况下，它仍然有这不可替代的地位。它提供了及其简便的API来替代原生JavaScript中低难度却高度重复的DOM操作方法。同样，d3.js也是一个Jav
2020-08-27 17:42:25
357
原创 grid布局基本概念整理
回顾一下web页面布局的历程，于我个人而言，经历了最开始的学习计算机编程时的table布局和基础的div+css布局，都后来有
2020-08-11 17:47:52
740
原创 Mac下的终端神器iTerm的插件之PowerLine配置（下）
上篇说到，怎么安装配置PowerLine插件，顺利的话，来看我这篇文章的大佬你应该已经搞好了。本来我也是打算装完就OK了，但是，今天用了一下感觉仍然不是很舒服，原因在于输入行的文件路径显示太长了，导致文字换行看起来特别别扭，再加之我平时一般都是要同时分屏开好几个窗口，于是它在我工作状态下就成了这样式儿：丑丑丑！这种状况完全无法满足我提升工作效率的目的（zhuangbi）啊，况且一般正常情况下路径是不需要显示这么长的。pwd它不香？？?果断优化配置一下，所以这篇文章就来记录一下怎么来个性化配置Power
2020-07-29 15:59:28
690
原创 Mac下的终端神器iTerm的插件之PowerLine配置（上）
iTerm是Mac下的一个终端工具，之所以喜欢用这个呢，正经说，是因为这个比自带的终端更加好(ku)用(xuan)。之前配置过一些插件，但是最近偶然在网上发现，好多大佬配置的比我自己搞的这个更加酷炫，于是乎，决定跟着弄一下。来一张配置成功后，正常工作状态下的效果图看看：咋样？好看吧，不仅可以清晰的知道自己所处的目录，还能直观的看到当前所处的git分支，这个就是PowerLine的作用。因在配置过程中搜寻了很多文章，发现说的都太复杂了，所以本文只说干活，不扯别的。希望你看完之后能一次成功~第一步：安
2020-07-27 14:49:14
1158
原创 盘点那些你可能不知道的css选择器
any-link 之所以要选择先说这个，是因为前段时间在面试的时候遇到个奇葩问题，二面面试官问我，怎么选中页面上所有的带有href属性的a标签？我当时懵逼。。答：如果给我jQuery，我可以做到。。我tm真机智。。后来看到了一篇文章在做慕课网的测试题的时候遇到了has选择器的问题，于是去百度发现了一篇整理了一些不常用的css选择器的文章，又在这片文章里面发现这any-link这个选择器，便回想到了当时那位面试官问我的那个问题。。这不就是答案嘛，受此启发，决定水一篇博文来整理盘点一些不常用的css选择...
2020-05-25 15:54:04
235
原创 Antd的validator自定义校验导致其它校验规则失效
<FormItem label="新账号" name="phone" rules={[ { required: true, message: "不能为空" }, { max: 20, message: "最长20个字符" }, { whitespace: true, message: "不能输入空格", }, { ...
2020-04-20 17:17:06
2506
原创 Ant Design 4.0更新指南（2）——Form
antd 原有的 Form 组件其实已经足够好用了，但是这次 4.0 对 Form 的更新开始注重不止要好用，还要“优雅”。“优雅”这个东西一直都很玄学。antd 的 Form 一直以来都很特例独行，区别于其它 antd 组件，Form 的调用并不只是简单的引入组件即可，而是先要进行 Form.create()创建一个 Form 实例，使用 FormItem 时还需在 jsx 中调用 form....
2020-04-09 17:58:52
2218
2
原创 Ant Design 4.0更新指南（1）——ProTable
作为React技术栈的坚定拥护者，一定离不开阿里爸爸的大怀抱。作为国内最好用的组件库【之一】的Ant Design迎来个跨版本大更新，年后复工后我在第一时间便进行了尝鲜，刚好公司有老项目重构，在初步了解之后，决定尝试在新项目中使用And Design 4.0进行开发，与之对应的Ant Design Pro也更新到了4.0版本，Ant Design Pro是给予Ant Design的开箱即用中台前端...
2020-03-30 11:26:23
3211
11
原创 【从入门到放不下系列】记一次用 puppeteer 爬数据的历程（下）—— 爬取搜狗微信搜索的公众号文章
上回书说到，使用 puppeteer 库做了截图操作简单展示了 puppeteer 的特性和基本使用方法。这回我们来说说用 puppeteer 做爬取页面数据并写入 Excel 的操作。puppeteer 实战：爬取搜狗微信搜索的公众号文章并写入 Excel首先背景：搜狗搜索现在有个功能可以根据关键字来查询微信公众号文章，而我们要做的就是把指定关键字的文章给它爬下来，由于这个需求是从我司业务部...
2019-12-24 17:57:52
928
原创 【从入门到放不下系列】记一次用 puppeteer 爬数据的历程（上）
最近因工作需要，学习了 Node 爬虫，简单记录一下我的心路历程。首先来说说 puppeteer 这个库，顺手查了一下 puppeteer 这个单词，它貌似有【操纵木偶的人；操纵傀儡】这方面的含义，这就很好理解啦。这个库本质上来讲是用来做自动化测试的，它提供了一些 API 来直接控制 Chrome 的操作，利用它的这些特性，我们可以用来做 UI Test 或者当做爬虫来爬取页面数据。说好了是从...
2019-12-24 13:42:58
196
原创 p 标签里面不能嵌套 div 标签
p 标签里面不能嵌套 div 标签开头先放大加粗的展示这句话作为一名半专业的切图仔，怎么能够犯如此低级的错误？？某日…正常搬砖中，突遇一奇葩问题，尝试各种方案均试无法解决大致情况如下(JSX)：...<p className={styles.item1}><span>Item1</span><Component1 />&...
2019-12-16 10:47:12
2786
原创 next.js下css-module和组件的import样式共存的配置方法
Next.js是一个轻量级的 React 服务端渲染应用框架。还是头一回用这种服务端渲染的框架，之所以会做服务端渲染，是因为这个项目是一个纯展示性的品牌官网，所以需要为SEO考虑，由于SPA对搜索引擎并不友好，所以选择了Next.js来进行服务端多页渲染。使用了之后发现，其实从编码的思维来看，其实还是组件式的单页思想。这里想拿出来说说的是在这个项目中，我们开启了css-module，但在后来的...
2019-07-10 18:19:01
4616
2
原创 菜鸟学习笔记之React-Quill富文本编辑器
React-Quill 是Antd推荐使用的富文本编辑器，此文记录一下最近在项目中使用它遇到的一些问题。首先，大家在百度相关资料时，应当搜索React-Quill，而不是Quill。github点这里：https://github.com/zenoamaro/react-quill安装依赖这些就都不说了，只记录干货....调用示例：<ReactQuill them...
2019-07-09 12:06:15
9695
2
原创 初探Echarts之美
随着“云时代”的到来，大数据（Big Data）也吸引了越来越多的关注，开发者可以利用网络爬虫将数据抓取到数据库中，再对数据进行智能分析，加以利用产生经济效益。那么问题来了，对于前端开发者来说，该如何直观的将这些数据展示在Web界面呢？答案必然是图表。HTML5赋予了我们强大的Canvas功能，正式基于这样的一种背景，Echarts诞生了，它为我们提供了一种非常不错的大数据可视化解决方案。2018...
2019-07-01 18:09:38
346
原创 react-cropper组件在项目中的应用（实现先裁剪后上传效果）
最近公司项目在做一个求职工具类的小程序，小程序端有企业Logo的显示，为了保证图片在小程序端的展示效果，所以要求在后台管理系统进行企业Logo上传时需要限定上传的图片尺寸和比例。为了减少管理人员的录入成本，需要在Logo上传前进行裁剪操作，保证上传进来的图片都是规则的正方。，此处用到了react-cropper组件，本文主要介绍了react-cropper组件在Ant Design Pro项目中...
2019-04-15 11:57:47
3797
4
原创 纯HTML+CSS打造轮播图
本文介绍了如何利用纯HTML+CSS技术，不写一句js代码如何打造轮播图的方法话不多说，先看效果：效果图：代码如下： CSS3仿JS轮播图 >
2018-01-20 16:36:05
35079
18
原创 CSS实现元素垂直居中的方法小结
复制源码至编辑器查看即可 Document *{ margin: 0; padding: 0; } .parents { width: 300px; height: 300px; border: 1px solid red; margin: 0 0 50px 0; } .son{ width: 100px; he
2017-11-04 21:44:29
290
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人