草庐IT

纯前端

全部标签

7-web前端 空间转换,3D效果

1、认识3D转换近大远小近实远虚物体和面遮挡不可见2、三维坐标系   x轴:水平向右--注意:x轴右边是正值,左边是负值   y轴:垂直向下--注意:y轴下面是正值,上面是负值   z轴:垂直屏幕--注意:往外边的是正值,往里面的是负值 3、3D转换 3D转换知识要点 3D位移:translate3d(x,y,z) 3D旋转:rotate3d(x,y,z) 透视:perspctive 3D呈现transfrom-style 3D移动translate3d 3D移动就是在2D移动的基础上多加了一个可以移动的方向,就是z轴方向 transform:translateX(100px):仅仅是在x轴上

8-web前端 动画 案例

1、动画说明目标:使用animation添加动画效果   思考:过渡可以实现什么效果?   答:实现2个状态间的变化过程 动画效果:实现多个状态间的变化过程,动画过程可控(重复播放、最终画面、是否暂停) 动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面 构成动画的最小单元::帧或动画帧 2、定义动画 目标:使用animation添加动画效果3、使用动画 4、动画属性 目标:使用animation相关属性控制动画执行过程1.动画名称和动画时长必须赋值 2.取值不分先后顺序 3.如果有2个时间值,第一个时间表示动画时长,第二个时间表示延迟时间 目标:使用steps实现逐帧动画 逐帧动画

解决前端“\n”不换行问题

在日常开发过程中,换行显示是一种很常见的应用需求,但是偶然发现,有时候使用"\n"并不会换行显示,只会被识别为空格,如下图。通过上图可以看出,"\n"它被识别成了一个空格显示,并没有达到换行的效果,那我们应该如何实现换行呢?其实很简单,我们只需要对文本添加一个样式就行。style=“white-space:pre-wrap;”由此可以看出,给文本添加style=“white-space:pre-wrap;”,是可以实现文本换行的。那white-space:pre-wrap;又是什么含义呢?在css中white-space属性用来控制容器的文本中带有空白符、制表符、换行符等的显示。normal:

多图预警,前端应该掌握的浏览器调试技巧大揭秘!

作为一名前端开发,ChromeDevtools是最常用的工具之一,它提供了很多实用的调试功能。Chrome团队也在一直积极地更新新版本,本文就来盘点自Chrome110以来,Devtools中新增的实用调试功能,总有一个你用的上!Chrome118Elements>Styles中自定义属性查看该版本中,在Elements面板的Styles选项中新增了一个自定义属性部分。通过使用@property CSS规则,可以明确地定义CSS自定义属性,并在样式表中进行注册,而无需编写任何JavaScript代码。通过在Elements > Styles中悬停在属性名称上,可以查看其描述符并通过工具提示来查

前端模块化

 1.为什么需要模块化随着前端应用的日益复杂,我们的项目代码已经逐渐膨胀到了不得不花大量时间去管理的程度了。而模块化就是一种最主流的代码组织方式,它通过把复杂的代码按照功能的不同划分为不同的模块单独维护,从而提高开发效率、降低维护成本。模块化可以使你能够更容易地重用代码。你可以创建一个模块来完成一个特定的功能,然后在多个地方重用这个模块,而不是复制和粘贴代码。2.没有工具和规范时模块化的演进历史2.1文件划分最早期的模块化是通过文件划分的方式,将不同的文件划分为不同的模块,一个文件就对应一个模块,如下图就有2个模块a和b。想要使用模块的时候就用script标签引入该模块scriptsrc="m

前端开发的未来:Web组件化与可视化编程探索

随着互联网的快速发展,前端开发领域也日新月异。为了满足越来越多复杂的需求和提高开发效率,前端开发不断演进。本文将深入探讨前端开发的未来,重点关注Web组件化和可视化编程,这两个领域有望改变前端开发的方式。1.Web组件化的兴起Web组件化是前端开发的一个重要趋势,它旨在将Web应用程序拆分成多个可重用的组件,每个组件都具有自己的界面和逻辑。这种组件化的方式使得前端开发更加模块化、可维护和可扩展。1.1.自定义Web组件自定义Web组件是Web组件化的基础。使用Web组件规范,开发人员可以创建自己的HTML标签,这些标签封装了特定的功能和样式。这些自定义标签可以像常规HTML标签一样在应用程序中

Vercel推出的前端AI工具v0,会改变前端么?

大家好,我卡颂。最近,Vercel推出了一款AI代码生成工具—— v0[1],可以快速生成前端组件代码。这款AI工具会影响现有前端开发模式么?本文会从如下角度展开讨论:v0是什么?能做什么?v0生成的代码包含哪些部分?会对现有前端开发产生什么影响?v0是什么v0是Vercel推出的一款「前端组件代码生成工具」,当前还处于Alpha阶段,要想试用需要先排队。他的使用方式如下:首先,用自然语言描述需求。v0会根据需求生成组件代码:我们可以继续对不满意的地方提出修改意见,比如「背景请使用渐变蓝色」:此时,会生成一个新的版本(这里是v1)。具体来说,每个修改意见都会产生一个新的版本。当我们再提出—— 

前端vue3分享——项目封装axios、vite使用env环境变量

文章目录⭐前言⭐vue3封装统一的axios请求💖请求拦截器⭐vue3使用env环境变量💖viteenv变量规则💖vite.config获取env参数⭐总结💖编码sliod原则⭐结束⭐前言大家好,我是yma16,本文分享关于前端vue3分享——项目封装axios、使用env环境变量。该系列往期文章:csdn新星计划vue3+ts+antd赛道——利用inscode搭建vue3(ts)+antd前端模板认识vite_vue3初始化项目到打包什么是axiosaxios是一个流行的JavaScript库,用于在浏览器和Node.js环境中进行HTTP请求。下面是axios的原理:Axios是基于Pr

<开源: 推荐10个开源的前端低代码项目>

文章目录👉前言👉一、Appsmith(PC)👉二、LowCodeEngine👉三、Amis(PC)👉四、tmagic-editor(H5、PC、TV)👉五、dooring-electron-lowcode(H5)👉六、vite-vue3-lowcode(H5)👉七、shida(H5)👉八、mometa👉九、tefact(web、H5、Form)👉十、openDataV(PC-DataView)参考文献往期内容💨👉前言近几年,在技术领域低代码是比较热门的话题,比如阿里云推出了钉钉低代码,通过简单的拖拽、配置,即可完成业务应用的搭建,腾讯云则是推出了微搭,通过行业化模板、拖放式组件和可视化配置快速

用webpack做一些前端打包时的性能优化

一.webpack的五个核心概念1.Entry:入口指示,webpack以哪个文件为入口起点开始打包,分析构建内部依赖图2.output:输出指示,webpack打包后的资源bundles输出到哪里去,以及如何命名3.loader:loader让webpack能够去处翻译理那些非js文件(imgcss…)4.Plugins:Plugins插件可以用于执行范围更广的任务,打包优化和压缩等…5.Mode:模式1.development开发模式:能够让代码本地调试运行的环境自动启用的一些插件会将process.env.NODE_ENV的值设为development启用NamedChunksPLugi