前端 效果 动画css
前端学习笔记DAY3 HTML5基础（3）（b站pink老师）
二.HTML标签 6.表格标签 1.1 表格的主要作用 表格不是用来布局页面的,而是用来展示数据的。 1.2 表格的基本语法 <table> <tr> <td>单元格内的文字</td> ... </tr> ... </table> （1）. <table> </table> 是用于定义表格的标签 ......
记录--前端验证码破解
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 最近受够了公司内部站点每次登陆都需要填写用户名和密码，还有输入验证码。 要是能够直接跳过登陆页面就好啦。 说干就干，决定使用油猴插件实现自动登陆功能。 其中最难解决的就是验证码破解，花了一天的时间完美解决，现在整理出来。 1.分析验证码 ......
前端项目练习(一) ---美食美客网页制作
项目名称：美食美客网页制作 技术栈：HTML + CSS 背景：熟悉使用HTML、CSS的使用 一、HTML代码 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport ......
Flutter 显式动画
创建 AnimationController 的同时，也赋予了一个 vsync 参数。 vsync 的存在防止后台动画消耗不必要的资源。您可以通过添加 SingleTickerProviderStateMixin 到类定义，将有状态的对象用作 vsync 因为addListener() 函数调用 s ......
短视频直播系统，前端比较常见的几种动画实现方式
短视频直播系统，前端比较常见的几种动画实现方式 我整理了如下的6种方式，接下来我们以最简单的例子，一个div从左到右移动一定的距离，分别看看这几种方案的具体实现。如有不妥还望指正。 一、CCS animation 这里省略了html部分，我们直接看css: .box{ height: 100px; ......
一款基于.NET Core的快速开发框架、支持多种前端UI、内置代码生成器
前言 经常看到有小伙伴在技术群里问有没有什么好用且快速的开发框架推荐的，今天就给大家分享一款基于MIT License协议开源、免费的.NET Core快速开发框架、支持多种前端UI、内置代码生成器、一款高效开发的利器：WalkingTec.Mvvm框架（简称WTM）。 官方项目介绍 Walking ......
前端监控系统Sentry企业级实战
一、前端监控系统 1. 什么是监控系统？为什么要对项目监控？ 在IT界内，监控系统指对项目运行的各项指标的实时记录的系统或服务，旨在提升项目质量和量化项目的各项指标，为项目发展提供可量化的依据。 一般来说项目监控是为了： 更快的发现和解决线上问题； 做产品和制定需求的决策依据； 为业务扩展提供了更多 ......
CSS object-fit
一、object-fit object-fit属性定义了被替换的元素（如img或video）的内容应如何调整大小以适应其容器。object-fit的默认值是fill，这可能导致图像被挤压或拉伸。 让我们来看看可能的值。 object-fit的可能值:contain、cover、fill、none 1 ......
常用xpath选择器和css选择器总结
xpath选择器 表达式说明 article 选取所有article元素的所有子节点 /article 选取根元素article article/a 选取所有属于article的子元素的a元素 //div 选取所有div子元素（不论出现在文档任何地方） article//div 选取所有属于arti ......
03--css重点回顾
CSS层叠样式表 一 css简介 什么是css？ 层叠样式表 命名规则： 使用字母、数字或下划线和减号构成，不要以数字开头 格式： 选择器{属性:值 ;属性:值; 属性:值; ....} 其中选择器也叫选择符 CSS中注释 /* ... */ 二 如何使用css样式 即html中嵌入css的方式 1 ......
Flutter 隐式动画
通过几行代码就可以实现隐式动画，由于隐式动画背后的实现原理和繁琐的操作细节都被隐去了，所以叫隐式动画，FLutter中提供的 [AnimatedContainer]、[AnimatedPadding]、[AnimatedPositioned.AnimatedOpacity]、[AnimatedDef ......
Form窗体添加边框阴影效果
public partial class Form1 : Form { public Form1() { InitializeComponent(); } public bool DrawShadow { get; set; } = true; protected override CreatePa ......
unity3D 敌人死亡爆炸效果
https://www.youtube.com/watch?v=WgLd6EahyVU 创建物体，添加粒子效果 材质 改变起始大小 改变发射位置和半径 生命周期和速度 粒子数 淡出效果 持续时间 模拟瞬间爆炸 取消循环播放 播放后销毁 变成预制体 ......
vue中使用Vue.extend方法仿写一个loading加载中效果
需求描述 本文我们使用vue的extend方法实现一个全屏loading加载效果，需求如下： 通过命令就可以让弹框开启或关闭，比如this.$showDialog()开启，this.$hideDialog()关闭 方法可以传参更改loading中的文字 也可以传参更改loading背景色 当然这里除 ......
前端 - 前端项目引入外部字体
最近前端小朋友又遇到了一个问题，就是很多时候UI设计师设计出来的效果图都包含一些特殊字体，而众所周知，显示字体的前提条件是安装字体，可我们怎么能保证用户每个人本地都安装了我们需要的字体呢？ 答案是把字体文件放到前端项目中。我以当前遇到的字体为例说明一下步骤。 注意：我们因为是写Demo，所以不需要注 ......
css 禁止用户选择字体
.className{ -moz-user-select: none; /*火狐*/ -webkit-user-select: none; /*webkit浏览器*/ -ms-user-select: none; /*IE10*/ -khtml-user-select: none; /*早期浏览器* ......
CSS设置一个梯形
1、图形 2、代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .d{ width:0px; height:100px; border-left:25px solid; border-top ......
弹性布局 flex 的公共的css文件
/* 弹性布局 */ .flex{ display:flex; } .flex1{ flex:1; } .flex-column { flex-direction: column; } .justify-start { justify-content: flex-start; } .justify- ......
前端大文件上传，断点续传
前语 无论是面试仍是实际作业，咱们都会遇到大文件上传的问题。事实上，在我之前的面试中，也被问到上传大文件（Excel）怎样处理，其时答的磕磕巴巴，直接导致整个面试以失利完毕。最近想起了整个作业，花了点时刻，整理出这个demo，当然了，整篇文章，不仅仅讲思路进程，毕竟也会附送源码 前端：Vue.js ......
使用代码生成工具快速开发应用-结合后端Web API提供接口和前端页面快速生成，实现通用的业务编码规则管理
在前面随笔《在Winform应用中增加通用的业务编码规则生成》，我介绍了基于Winform和WPF的一个通用的业务编码规则的管理功能，本篇随笔介绍基于后端Web API接口，实现快速的Vue3+ElementPlus前端界面的开发整合，同样是基于代码生成工具实现快速的前端代码的生成处理。 ......
SVG动画
一、下载SVG 网站：https://undraw.co/ 点击“browse now” 点击“search” 点击第一个 点击“Download SVG for your projects” 对代码进行格式化 将代码拷贝到vs code中，用快捷键“Shift+Alt+F”进行格式化，格式化之后如 ......
前端 vue项目启动报错 spawn cmd ENOENT 的原因以及解决方案
前端项目启动到一半的时候卡在跳转浏览器出现了 这个问题 那么问题大概率就是你环境刚配置或者配置错了的问题，这个时候只需要 找到 我的电脑 => 属性 => 高级系统设置 => 环境变量 => 系统变量 => PATH 环境 => 双击进去 => 添加环境变量 => 添加这俩个 C:\Windows\ ......
css中的::after和::before
先来看一个::before和::after的例子，给一个元素的前后再不添加新的元素的时候增加内容： <view class="info-before">测试before和after</view> .info-before { font-weight: bold; margin: 30px; } .i ......
使用css绘制箭头
使用css也能直接写出箭头符号，这样不用都使用图片能减少打包的大小。下面是一些常用箭头的css写法： // 向上的箭头 <view class="button-up"></view> // css的内容 .button-up { position: relative; padding: 5px; m ......
使用js和css实现选项卡切换
HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel=" ......
Vue3实现电商放大镜效果
效果实现： 功能拆解： 左侧滑块跟随鼠标移动 右则大图放大效果实现 鼠标移入控制滑块和大图显示隐藏 滑块跟随鼠标移动 思路：获取到当前的鼠标在盒子内的相对位置（useMouseInElement），控制滑块跟随鼠标移动（left/top） 获取鼠标相对位置 控制滑块跟随移动 有效移动范围内的计算逻辑 ......
90%的面试问题（前端）
1.什么是MVVM，MVC模型 MVC框架（Model-View-Controller，模型-视图-控制器）： Model（模型）：代表数据和业务逻辑，负责数据的存储和处理。 View（视图）：是用户界面的表示，通常是UI元素，例如网页、图形用户界面等。 Controller（控制器）：是Model ......
CSS隐藏滚动条
code <style> /* 隐藏标准的滚动条 */ html::-webkit-scrollbar { width: 0; } body::-webkit-scrollbar { width: 0; } /* 隐藏 IE 和 Edge 浏览器的滚动条 */ ::-ms-scrollbar { w ......
CSS设置div高度自动全屏
对body和html都设置高度100% html,body { height: 100%; width: 100%; margin: 0 0 0 0; padding: 0 0 0 0; position: relative; } 然后再对div设置100% #app { height: 100%; ......