- 博客(25)
- 收藏
- 关注
原创 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关注的人