this_is_Azou-CSDN博客

原创 02 变量与运算符

被java语言赋予了特殊含义，用作专门用途的字符串（或单词）关键字比较多，全部都是小写字母。true, false, null 不在其中，其实是字面量，用来表示特殊的布尔值和空值。java中的变量，方法，类等要素命名是使用的字符序列，成为标识符。说明：关键字一共有50个，其中const和go是保留字。技巧：凡是可以自己命名的地方都叫标识符。

2023-11-12 16:48:54 44 1

node.js(一)网站服务器能够提供网站访问服务的机器是网站服务器，能够接受客户端的请求，针对请求作出相应的响应。1.简介1.1 什么是Node.js？Node.js不是一门语言，不是库，不是框架，是一个运行时环境简单来说是node.js可以解析和执行js代码以前只有浏览器可以解析执行js代码，现在可以完全脱离浏览器运行，归功于node.js浏览器中的js：基本语法、BOM、DOMnode中的js：没有BOM/DOM（服务端不操作界面）、有基本语法、一些服务器级别的API例如：

2023-11-04 19:24:24 42 1

原创 webpack热更新原理

当对代码进行修改并保存后，webpack将对代码进行重新打包，并将新的模块发送到浏览器端，替换老的模块，在不刷新浏览器的前提下进行应用更新。

2023-11-04 19:23:49 54 1

原创 01 Java语言概述

从本周开始进行java语言的学习，follow尚硅谷康师傅教学视频

2023-11-04 19:21:37 61 1

原创 npm模块安装机制

npm install和npm update命令，从registry下载压缩包后，都会存放在本地的缓存目录，在Linux和Mac默认是用户主目录下的.npm目录，在windows是%AppData%/npm-cache。（假设此时没有添加npm install参数）从npm3开始默认加入了一个dedupe的过程，会遍历所有节点，逐个将模块放在根节点下面，也就是node_modules的第一层，当发现有重复模块的时候，将其丢弃。在网址后面加上模块名，就会得到一个json对象，里面是该模块的所有版本信息，

2023-11-01 12:59:06 113

原创单页面相册灯箱效果

bootstrap+lightbox效果图HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>单页面相册</title> <link rel="stylesheet" href="day_13.css"> <link rel="stylesheet" href="https://st

2020-12-30 10:26:44 216

原创你不知道的javascript（二）

第二部分：this和对象原型1.关于this1.1 为什么要使用thisthis上下文对象function identify(){ return this.name.toUpperCase();}function speak(){ var greeting = "hello,i'm "+identify.call(this); console.log(greeting)}var me = { name:"kyle"};var you = { name :"reader"};

2020-12-21 20:11:53 159

原创你不知道的JavaScript（一）

第一部分：作用域和闭包1.作用域是什么1.1 编译原理javascript通常归类于动态解释执行语言，但是事实上依旧是一门编译语言，但是不是提前编译的，编译结果也不能在分布式系统中进行移植。传统编译语言的流程：源代码在执行前会经历编译的三个步骤：分词，词法分析词法单元token,通过有状态和无状态的方式进行解析，语法分析转换成由元素逐级嵌套所组成的树，代表了程序的语法结构（抽象语法树AST）代码生成将AST转换成可以执行代码的过程，与语言，和目标平台等相关java

2020-12-21 14:51:28 542

原创 bilibili景深对焦banner效果

bilibili景深对焦banner效果效果分析benner共分为6个图层，6个图层在鼠标hover状态下改变translatex和blur鼠标在左边，1,2两图较为清晰鼠标在中间，3,4两图较为清晰鼠标在右边，5,6两图较为清晰6个图片，按照顺序排列，图片垂直水平居中，填充整个父元素；object-fit、object-position用于对图片进行剪切、缩放、拉伸等，同时可以保留原始比例；一般适用于img和video标签；object-fit：指定元素的内容，如何适应容

2020-12-14 13:45:56 842 2

原创 vue-swiper使用

swiper代码测试<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>Swiper demo</title> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"&gt

2020-12-10 22:07:55 340 2

原创瀑布流效果

瀑布流效果1.使用js方法Masonry.jsIsotope.js原理：通过js来计算一共有多少个方格，在计算每一个方格的宽度和高度，匹配容器的宽度可以放置多少行；全部方格的position都设置为absolute，逐一计算top和left进行定位，因此当浏览器容器变动的时候，所有元素进行动态重新计算和排列；2.使用css两个属性：column-count,column-gaphttp://picsum.photos/360/460?random=1HTML<!DOCTYPE html

2020-12-08 22:12:41 169 1

原创左右摇摆动画

左右摇摆动画盒子模型box-sizing：定义盒子模型，一共有两种盒子模型，IE盒子模型，W3C盒子模型默认值：content-box,总宽度：margin+border+padding+width;【W3C盒子模型】border-box，总宽度：margin+width，width中包含了border+padding;[IE盒子模型]inhert：从父元素继承box-sizing属性设置倒影-webkit-box-reflect用来设置对象倒影参数：默认值为none（无倒影）dir

2020-12-08 21:33:58 326

原创加载动画

加载动画基本思想使用伪元素，定义旋转动画，使用不同时间完成动画，动画采用匀速无限循环设置；<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>加载动画</title> <link rel="stylesheet" href="day_8.css"></head><body>&lt

2020-12-08 20:29:33 174

原创动态爱心效果

动态爱心效果:nth-child():nth-child(n)选择器匹配属于父元素的第N个子元素，无论元素的类型n可以是数字，关键字（odd/even），或者公式(an+b)[a:周期的长度，b:偏移值]选择前几个，使用负方向 :nth-child(-n+a)选择前a个选择后几个，使用正方向 :nth-child(n+b)选择后b个两者结合使用，选择某一范围 :nth-child(-n+a):nth-child(n+b):从第a个选到第b个选择倒数第n个，:nth-la

2020-12-08 19:36:11 951

原创遮罩效果

遮罩效果原理：使用伪元素在元素前面添加一层蒙版，设置动画实现遮罩效果；HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>遮罩层效果</title> <link rel="stylesheet" href="day_6.css"></head><body><div

2020-12-07 21:36:43 193

原创白光划过效果

白光划过效果CSS伪元素，::after用于创建一个伪元素，作为已选中元素的最后一个子元素，配合content的属性为该元素添加修饰内容，该修饰内容属于虚拟内容，默认为行内元素；:after 写在css中为标签之后添加新的内容；::after写在HTML中的元素之后，增添新的内容；都可以用来表示伪类对象，用来设置对象前后的内容；区别:before/:after是css2的写法，::before/::after是css3的写法，从兼容性的角度，写:before/:after，但是在H5开发中

2020-12-07 21:08:05 329

原创滤镜背景虚化显示

背景虚化显示基本原理上下两个图层，设置上图层hover时，下图层blur注意设置上图层z-index属性，保证上图层在上方使用滤镜filter的blur设置背景元素虚化filterfilter 属性定义图片的可是效果，比如模糊和饱和度，是滤镜的作用。默认值是 none，是不可继承属性none：默认值blur()：给图像设置高斯模糊，值为高斯函数的标准差，表示屏幕上多少个像素融合在一起，值越大越模糊；brightness()：值为百分比的形式，为图像添加线性乘法，是图像更亮或更

2020-12-06 14:40:43 451

原创水波纹动态效果

水波纹动态效果背景渐变设置linear-gradient()：线性渐变，使用最后一个颜色填充后续；reapeating-linear-gradient：重复的线性渐变，重复使用颜色填充；(颜色值1，颜色值2)，从什么颜色到什么颜色（to bottom，颜色值，颜色值）从上渐变到下（to top, 颜色值，颜色值）从下渐变到上（角度，颜色值，颜色值）从上到下渐变，第一个参数指定了渐变的角度（to bottom ,颜色值，0px ,颜色值，100px）第二个颜色值从0px开始到100p

2020-12-04 21:45:11 572

原创 3D旋转卡片

3D旋转卡片添加立体感transformtranslatetranslate()：带有两个参数，分别代表：X轴和Y轴，第二个参数不写，则默认为0；translateX()：向X轴平移，正值向右，负值向左；translateY()：向Y平移，正值向下，负值向上；translateZ()：向Z轴平移，元素和屏幕之间的距离，越近translateZ值越大，越远，Z值越小；translate3d()：同时设置X,Y,Z三个方向的移动距离，三个参数必须填写；rotate：正数表示顺时针旋

2020-12-04 16:45:39 624 1

原创 HTML+CSS鼠标拟态效果

这里写自定义目录标题HTML+CSS鼠标拟态效果弹性布局弹性盒 `display:flex;`自适应布局单位vw/vh快捷编写方法HTMLCSS效果HTML+CSS鼠标拟态效果弹性布局弹性盒 display:flex;flex-directionrow,默认值，主轴为水平方向，起点在左端roe-reverse，主轴为水平方向，起点在右端column，主轴为垂直方向，起点在上沿column-reverse，主轴为垂直方向，起点在下沿flex-wrapnowrap,默认值，不换行

2020-12-02 15:32:49 382

this_is_Azou的博客