• 2024-09-20css3几个常用动效
    1.放大的圈 @keyframeszoom3{0%{opacity:0;transform:scale(0);}70%{opacity:1;}100%{opacity:0.7;transform:scale(1);}}.play{position:absolute;left:14.62rem;top:4.12rem;margin:1remauto;
  • 2024-09-07基于sprigboot、vue.js、elementui、axios.js、xlsx.js的小型购物管理系统
    该管理系统实现了增加、编辑、删除、导出、批量删除。以下是代码实现:<!DOCTYPEhtml><html>   <head>      <metacharset="utf-8">      <title></title>      <linkrel="stylesheet"href="./css/element.css"/>
  • 2024-09-06"layout.html"代码
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>body{margin:0;}.pg-header{height:4
  • 2024-08-28CSS(样式-定位) 笔记 06
    position:;定位1.static代表静态模式,常态模式2.fixed 代表固定模式特点:不随浏览器的滚动而滚动,释放掉自己原来的空间,参照物是整个浏览器3.absolute代表绝对模式特点:随浏览器的滚动而滚动,释放掉自己原来的空间,参照物是整个浏览器4.relative代表相对位置特点:随浏
  • 2024-08-15x264 编码器像素运算系列:satd 函数
    x264编码器中像素运算在x264编码器中有多种像素间的运算,如下:sad计算:SAD(SumofAbsoluteDifferences,绝对差值和)是一种在图像处理和视频编码中常用的度量,用于计算两个图像块之间的差异。SAD值越小,表示两个图像块越相似。hadamard_ac计算:用于计算Hadamard变换后非零
  • 2024-08-15css水平移动动画
    <template><divid="app"><divclass="container"><div:class="{'moving':isMoving}"class="box"><button@click="moveBox">Move</button>
  • 2024-08-08vue手写转盘抽奖
    目前抽奖最常见的两种:九宫格抽奖和 转盘抽奖,但转盘抽奖的大多是采用的是将做好的图放在页面上,如果需要变动奖池里面的奖品或数量,就会让设计师重新出一张图片。分享我自己在自定义转盘抽奖的样式布局思路<template><divclass="main"><Topmassage="转盘抽奖"/>
  • 2024-07-22html+css 简易摩天轮效果
    vuedom<divclass="ferris_wheel"><divclass="wheelBg"></div><divclass="wheelBox"><divclass="bg"></div><ulclass="list">
  • 2024-07-01详细分析css float 属性以及position:absolute 的区别
    CSS中的float属性和position:absolute属性都可以用来定位元素,但它们在布局和行为上有着根本的区别。下面是对这两个属性的详细分析:float属性float属性主要用于让元素围绕文本流动,通常用于图像或文本块的布局。它有四个可能的值:left、right、none(默认值)、以及inherit。布局
  • 2024-06-12CSS 遮罩层
    html<!DOCTYPEhtml><html><head><linkrel="stylesheet"href="basic.css"></head><body><divclass="masked-element"><divclass="content">这里是需要遮罩的内容</div>
  • 2024-06-01html中轮播图的做法及源码
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title>
  • 2024-05-14绝对定位(absolute)居中问题:transform: translate(-50%);
     transform:translate(-50%); translate(50%)相当于translateX(50%),表示沿X轴方向平移元素自身宽度的50%。 绝对定位是最常见的问题是难以居中,所以可以改变元素的中心,来达到居中的效果position:absolute;left:50%;transform:translate(-50%); exposit
  • 2024-04-22CSS之定位Position
    前言之前在《CSS之浮动》中,我当时是想一起说说定位的,因为我在很多地方看到有把float和position放在一起讲的,说它们的一些属性值可以使元素脱离文档流,但是没想到在准备内容的时候,发现浮动的内容有点多,就先把浮动的内容单独整了一篇。本文就继续来说说定位吧。基本信息Name:p
  • 2024-03-17css简直 恐怖如斯!!! css之前端必知属性!!!
    一、css中实现元素隐藏的几种方法1.opsition:0;        通过透明实现元素隐藏,视觉上隐藏但仍然存在2.display:none;        标签消失,不占页面位置,不显示3.display:block;        独占一行,可设置宽高,块显示二、如何进行元素转换1.    行元
  • 2024-03-12罐液位变化组件
    接上篇 <template><divclass="jarBox"><!--罐子整体+盖--><divclass="bar"><!--罐顶--><divclass="barBefore"></div></div><!--里面液体整体-->
  • 2024-03-09Absolute Beauty
    法一:看这篇题解这种几何意义的转化在看到绝对值的时候一定要有肌肉记忆法二:代数法最多交换一次,肯定考虑答案的增量先按\(a\)排序(因为是绝对值,我们先让一维有序之后考虑消掉绝对值符号)枚举\(i\),考虑\(j\)(\(1≤j<i\)),交换\(i,j\)之后增量为\(\delta=b_i-a_j-c_j+|a_i-b_j|-c_i
  • 2024-02-23HTML中的文档流
    https://blog.csdn.net/ld16631069828/article/details/118852570文档流什么是文档流?文档流:页面从上往下一行一行,其中每行从左至右的顺序,这种排列方式成为文档流。什么是脱离了文档流?脱离文档流意味着它的排列顺序不遵循正常情况下文档的排列顺序,已经脱离了文档流,它不占用空间,
  • 2024-01-20CF1898D Absolute Beauty 题解
    Problem-D-Codeforcesemm,怎么说呢?因为想起之前那个直接去掉绝对值取最大时就是答案的影响,这题并没有想到正确做法。(或者说想到了正确做法,但是因为不知道一个性质所以要大分讨)假如原题满足\(a_i<b_i\),则我们把原题抽象成线段\((a_i,b_i)\),考虑两条线段合并时的情况:
  • 2023-12-27hackthebox absolute insane
     信息收集Payattentiontothelastlinessl-date:wehave7hourclockskew,whichshouldkeepinmindifdoinganykeberosauth.SMB-TCP445smbclient-N-L//10.10.11.181#对面拒绝连接crackmapexecsmbabsolute.htb  #对面存在smbcrackmapexec
  • 2023-11-28Python获取远程指定目录下所有文件的绝对路径
    importparamikoimportos#SSH连接信息hostname="your_remote_host"port=22username="your_username"password="your_password"#远程目录路径remote_directory="/data"#建立SSH连接ssh=paramiko.SSHClient()ssh.se
  • 2023-11-21css 水平垂直居中的几种方法
    水平垂直居中的几种方式记录一下容器内只有单一元素时居中的几种方式<divstyle="width:300px;height:300px"class="wrap"><divstyle="width:100px;height:100px"class="box"></div></div>1.容器flex,调整内部轴线.wrap{di
  • 2023-11-20CF1898D - Absolute Beauty(绝对值)
    题目地址Solution考虑把\(|a_i-b_i|\)转化为数轴上的线段的一条线段,那么\(swap\)操作可以形象转化为下图(借用官方\(Editoral\))考虑最大的增加(第一张图的情况)即可。Summary学到了绝对值转线段,把指定操作形象化,数形结合(雾
  • 2023-11-10vue+css实现的伪3d旋转罐+液位动态变化
    话不多说先看效果:设计思路:罐是做了三个位置(中=>左,左=>右,右=>中)的动画效果,每个罐轮流使用一次,来实现旋转的效果。中间的光亮做了个变形延迟。罐的透明效果是使用了三层,即最底层是粒子不透明图片,中层是液体组件,最上层是罐体png图片。都是用了绝对定位,请务必设置好位置。液体组
  • 2023-10-31css 设置画对角斜线
    /*通过css画div的对角斜线*/background:linear-gradient(totopright,#EEF2F8,#EEF2F848%,#CEDFF8,#EEF2F851%,#EEF2F8);/*element-uitable表头*/.header-column{height:49px;position:relative;&:before{position:absolute;co
  • 2023-10-16设置页面等待效果
    css*{margin:0;padding:0;}.load{position:absolute;z-index:9999!important;width:100%;height:100%;background:#1c1e20bf;}.loadmain{width:200px;height:60px;color:rgb(255,255,255);position