公告:携程集团2022年秋季校园招聘会内推!!

css实现模糊镜效果及渐变字体和text-shadow冲突解决方案

前言

今天主要介绍2个css特效,一个是css实现模糊镜效果,就是一个返回顶部标签,或者固底标签,网页滑动的时候看到网页滑动过的部分是模糊的。类型模糊镜子的效果,看哪里哪里背景是模糊的。还有就是解决一个渐变字体或者图片字体添加text-shadow,阴影会在文字顶部的问题。

css实现模糊镜子

实现高斯模糊,我们用filter的blur属性,但是高斯是高斯元素本身。其实有个高斯底部的属性,叫

backdrop-filter

就可以轻松实现刚刚说的效果。 注意:backdrop-filter的当前背景需要一点点透明,不然看不到底部了。实现案例如下:

后端response返回一张图片,前端如何下载?

前言

之前文章关于文件下载介绍过很多,当然也有图片下载的,例如跨域图片下载JFIF格式解决方案及前端zip包下载,后端返回的是一张cdn的图片地址,我们如何下载?之前的文章介绍了下载方式及遇到的问题。

但是问题来了,后端返回cdn地址,我们前端下载是经过了转换的,不是原始的图片,假如后端图片大小是30kb,经过了压缩,但是我们经过了转换之后图片大小通常还是60kb,并非是原始的后端图片的大小。那么如何原封不动的下载后端返回的图片呢?直接reponse里面返回图片给到前端,前端如何下载呢?

前端下载后端返回的文件有很多方式,其实reponse中返回图片或者excel,分为get请求还是post请求,假如是get请求方式,那么很简单,excel的化,直接打开这个后端接口的地址就可以下载了,图片可以直接模拟点击,下载后端接口地址的图片就可以了,但是post方式不行,需要我们ajax请求之后下载,那么对于post形式的response里面是图片或者视频,我们不管后端是数据流还是二进制buffer,下载形式都是一种,下面我来介绍一下。

react父组件调用子组件的方法小结

前言

本文是小结类文章,主要总结一下工作中遇到的父组件调用子组件方法。当然除了用ref之外还有很多其他方式,本文仅仅列举ref的方式。分别介绍父子组件都为class;父子组件都是hooks;父组件是class子组件是hooks;父组件是hooks,子组件是class的各种情况的调用方式。

父子组件都为class

父子组件都是class,父组件调用子组件方式比较传统,方法如下:

css中clip-path的介绍及使用二

前言

css中clip-path我在很久之前就介绍过,还是2015年的文章css3的clip-path属性介绍,之前的文章介绍的有点粗略,今天这篇文章详细介绍一下。

语法

【clip-path】
  值: <clip-source> | [ <basic-shape> || <geometry-box> ] | none
  <clip-source>: url()
  <basic-shape>: inset() | circle() | ellipse() | polygon()
  <geometry-box>: fill-box | stroke-box | view-box | margin-box | border-box | padding-box | content-box

初始值: none 应用于: 所有元素 继承性: 无

各形状语法:

Circle: circle(radius at x-axis y-axis)

Ellipse: ellipse(x-rad y-rad at x-axis y-axis)

Polygon: polygon(x-axis y-axis, x-axis y-axis, … ) // 每个点的坐标值

Inset: inset(top right bottom left round top-radius right-radius bottom-radius left-radius)

谈谈CSS3 硬件加速(GPU 加速)

前言

CSS3 硬件加速又叫做 GPU 加速,是利用 GPU 进行渲染,减少 CPU 操作的一种优化方案。页面css做图片滑动,滚动,特别是手机端,可能出现卡顿,闪白等情况,解决这些动画卡顿的情况,我们通常可以采用GPU加速的方式。由于 GPU 中的 transform 等 CSS 属性不会触发 repaint,所以能大大提高网页的性能。

如何开启 GPU 加速

CSS 中的以下几个属性能触发硬件加速:

transform

opacity

filter

will-change