zyzs-CSDN博客

原创企微消息分享小程序出现第一次能打开,第二次打开卡在白屏的情况

企业企微发送小程序应用消息(pagepath参数需要注意前面路径带斜杆,后面需要追加.html)不然会出现第一次能打开,第二次打开卡在白屏的情况。

2023-01-17 11:36:14 672

原创 css 实现iso 开关效果

原理是用伪类来实现难点在背景颜色的变化因为没有部分控制父元素的背景颜色变化所以用before这个伪类来实现背景变化效果效果<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport"

2021-03-04 03:05:18 165 1

原创【CSS】水滴动画｜水滴融合效果

主要通过fliter的 blur的模糊属性和 contrast提高对比性属性来制作水滴下落效果<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=de

2021-03-04 01:51:39 650 1

原创纯css 实现轮播图简单功能

存在问题是轮播图片不能太多不然会在切换的时候出问题<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <title>CodePen - CSS Carousel</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/aj

2021-03-02 03:45:33 403

原创 CSS实现TikTok文字抖动效果

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> body { .

2021-03-01 17:29:59 175

原创 css动画效果玻璃划过

逻辑是用伪元素做过渡移动<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt

2021-02-25 01:11:57 631

转载 HTML+CSS完成聚光灯效果

效果如下代码如下<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>聚光灯效果</title> <style> * {

2020-12-11 02:29:01 473

转载【Apple官网特效】文字充电效果

效果如下代码里面有关键点的注释<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style>

2020-12-01 01:37:29 237

原创 Flex分散对齐时，遇到最后一行如果元素不够时，出现间隙不能对齐解决方法

解决方法是在后面加一个伪元素宽度跟子元素大小相等没加之前<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <

2020-11-15 23:54:40 569

原创根据图片地址src转base64格式

本地地址转换不需要考虑跨域问题但图片是网上的链接需要解决浏览器提示的跨域问题本人解决方法是chrome右键属性打开目标加–args --disable-web-security --user-data-dir=D:\MyChromeDevUserData重新打开有提示就设置成功可以进行下一步具体代码实现如下<script> // 获取要装换的地址 var img = document.querySelector('img').src // 图片

2020-09-16 15:48:13 3132

原创 css nth-child( ) 的各种常见写法

ul li:nth-child(odd){background-color:green;}/设置单行样式/ul li:nth-child(even){background-color:gray}/设置双行样式/ul li:nth-child(3n){background-color:green;}/* 3,6,9,12… */ul li:nth-child(4){background-color:green;}/单独设置第四个li/ul li:nth-child(3n+2){background-c

2020-08-23 17:37:55 1039

原创 Vue和JQuery使用递归生成树状菜单

处理有时没办法列表的子元素有多少层嵌套处理后效果如下vue的代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <scrip

2020-07-05 04:01:49 299

原创 vue 实现全局组件自动化注册

vue项目的全局组件如果很多的话每次自己手动注册的话还是很麻烦的下面展示怎么自动化注册先写一个全局组件必须要命名name 后面全局使用的标签都是根据name引用的然后在components 文件夹根目录下建index.js 导入下面代码import Vue from 'vue'import upperFirst from 'lodash/upperFirst'import camelCase from 'lodash/camelCase'const requireComponent =

2020-07-05 01:55:30 1057

原创 vue 实现鼠标滚动加载元素出现过渡效果

这个效果有些网站有自己试着不用插件做出来代码如下<template> <div class="container"> <div class="fade-in full-width" /> <div class="fade-in full-width" /> <div class="fade-in half-width " /> <div class="fade-in half-width " /&g

2020-07-05 01:39:45 1432 2

原创 js 数组for循环去重的几种方法

数组去重的方法有很多种，但少不了两种结构：循环结构（为了处理每一个数组元素，必然少不了它）和分支结构（为了判断是否重复，也肯定要使用到它）。如果说代码中没有出现以上两种逻辑，要么是采用了递归的思路，要么就是利用到的数据结构（比如Set数据结构）或方法已经帮我们处理了那些逻辑。 var arr = ['a', 'b', 'c', 'c', 'd', 'e', 'e', 1, 1, 1] // 这个两个方法会改变原有的排序不推荐使用理解即可 Array.prototype.unique1 = fun

2020-07-03 16:43:48 3586

原创 JS : 手写foreach、map、filter、some、find

一些es6的数组的底层实现 var arr = ['a', 'b', 'c', 'd', 'e', 10] Array.prototype.myForeach = function (fn) { // 如果不是函数抛错 if (typeof fn != 'function') { throw new Error(`${fn} is no a function`) } // this表示当前被调用的数组 var self = this for (var i = 0;

2020-07-03 12:58:52 827

转载 js 函数参数使用解构赋值与默认值相结合

对于ES6函数的参数解构赋值与默认值相结合，初学很容易迷糊，在网上翻阅一番，并没有详细的讲解，在此拿一个最普及的例子来详解其中的原理，两种写法都是使用了双重默认值：// 写法一function m1({x = 0, y = 0} = {}) {return [x, y];}// 写法二function m2({x, y} ={ x: 0, y: 0 }) {return [x, y];}1、// 函数没有参数的情况,参数严格为undefined，参数默认值生效m1() // [0, 0]m2

2020-06-30 01:44:49 2359

原创有趣的表单hover 动画效果

样式结构 js 在代码中都有详细注解效果如图<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><style

2020-06-29 03:06:29 332

转载 vue 组件中style scoped怎么起作用的

在style加scoped后，生成一个data-v-XXXXX的唯一标识，给所在组件的父级全部加唯一标示，达到样式私有化，不污染全局的作用通过给 dom 增加一个动态属性，然后 css 选择器也额外添加对应的属性来选择该 dom ，达到该样式只作用于含有该属性的 dom，实现组件样式的模块化慎用原因：其实从原理已经能够了解到慎用原因，这里权当总结从原理可见，之所以scoped可达到类似组件私有化、样式设置“作用域”的效果，其实只是在设置scoped属性的组件上的所有标签添加一个data开头的属性，.

2020-06-27 22:26:09 438

lszyzs的博客