当前位置: 首页 > news >正文

纯css实现loading加载中(多种展现形式)

前言

现如今网页越来越趋近于动画,相信大家平时浏览网页或多或少都能看到一些动画效果,今天我们来做一个有意思的动画效果,纯 css 实现 loading 加载中(多种展现形式),下面一起看看吧。


1. 常规 loading

实现效果

在这里插入图片描述

代码如下

<template><div class="parentBox"><div class="loadBox"><div class="loaderContantBox"></div></div></div>
</template>
<style lang="less" scoped>
.parentBox {height: 100%;background: rgb(31, 31, 31);padding: 100px;.loadBox .loaderContantBox {color: white;font-size: 40px;overflow: hidden;width: 40px;height: 40px;border-radius: 50%;transform: translateZ(0);/* animation:规定完成动画所花费的时间,该属性必须规定,否则动画时长为0,无法播放 */animation: loadBox 1.7s infinite ease, round 1.7s infinite ease;}@keyframes loadBox {0% {box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;}5%,95% {box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;}10%,59% {box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em,-0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em,-0.297em -0.775em 0 -0.477em;}20% {box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em,-0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em,-0.749em -0.34em 0 -0.477em;}38% {box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em,-0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em,-0.82em -0.09em 0 -0.477em;}100% {box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;}}@keyframes round {0% {transform: rotate(0deg); /* 开始旋转 div 元素 */}100% {transform: rotate(360deg); /* 结束旋转 div 元素 */}}
}
</style>

2. 抛出线条式 loading

实现效果

在这里插入图片描述

代码如下

<template><div class="parentBox"><svg class="scalableBox" viewBox="0 0 128 256" width="128px" height="256px" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="ap-grad1" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="hsl(223,90%,55%)" /><stop offset="100%" stop-color="hsl(253,90%,55%)" /></linearGradient><linearGradient id="ap-grad2" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="hsl(193,90%,55%)" /><stop offset="50%" stop-color="hsl(223,90%,55%)" /><stop offset="100%" stop-color="hsl(253,90%,55%)" /></linearGradient></defs><circle class="apringBox" r="56" cx="64" cy="192" fill="none" stroke="#ddd" stroke-width="16" stroke-linecap="round" /><circle class="apwormOneBox" r="56" cx="64" cy="192" fill="none" stroke="url(#ap-grad1)" stroke-width="16" stroke-linecap="round"stroke-dasharray="87.96 263.89" /><path class="apwormTwoBox" d="M120,192A56,56,0,0,1,8,192C8,161.07,16,8,64,8S120,161.07,120,192Z" fill="none" stroke="url(#ap-grad2)"stroke-width="16" stroke-linecap="round" stroke-dasharray="87.96 494" /></svg></div>
</template>
<style lang="less" scoped>
.parentBox {height: 100%;background: rgb(31, 31, 31);padding: 100px;.scalableBox {width: 40px;height: 70px;}.apringBox {transition: stroke 0.3s;}.apwormOneBox,.apwormTwoBox {animation-duration: 3s;animation-iteration-count: infinite;}.apwormTwoBox {animation-name: worm2;visibility: hidden;}.apwormOneBox {animation-name: worm1;}
}@media (prefers-color-scheme: dark) {:root {--bg: hsl(var(--hue), 10%, 10%);--fg: hsl(var(--hue), 10%, 90%);}.apringBox {stroke: hsla(var(--hue), 10%, 90%, 0.9);}
}@keyframes worm1 {from {animation-timing-function: ease-in-out;stroke-dashoffset: -87.96;}20% {animation-timing-function: ease-in;stroke-dashoffset: 0;}60% {stroke-dashoffset: -791.68;visibility: visible;}60.1%,to {stroke-dashoffset: -791.68;visibility: hidden;}
}@keyframes worm2 {from,60% {stroke-dashoffset: -87.96;visibility: hidden;}60.1% {animation-timing-function: cubic-bezier(0, 0, 0.5, 0.75);stroke-dashoffset: -87.96;visibility: visible;}77% {animation-timing-function: cubic-bezier(0.5, 0.25, 0.5, 0.88);stroke-dashoffset: -340;visibility: visible;}to {stroke-dashoffset: -669.92;visibility: visible;}
}
</style>

3. 进度条颜色覆盖式 loading

实现效果

在这里插入图片描述

代码如下

<template><div class="parentBox"><div class="contantBox"></div></div>
</template>
<style lang="less" scoped>
.parentBox {height: 100%;background: rgb(31, 31, 31);padding: 100px;.contantBox {width: 120px;height: 20px;background: linear-gradient(rgb(12, 132, 223) 0 0) 0/0% no-repeat #ddd;animation: cartoon 2s infinite linear;}@keyframes cartoon {100% {background-size: 100%;}}
}
</style>

4. 椭圆式进度条 loading

实现效果

在这里插入图片描述

代码如下

<template><div class="parentBox"><div class="contantBox"></div></div>
</template>
<style lang="less" scoped>
.parentBox {height: 100%;background: rgb(31, 31, 31);padding: 100px;.contantBox {width: 120px;height: 22px;border-radius: 20px;color: #514b82;border: 2px solid;position: relative;}.contantBox::before {content: "";position: absolute;margin: 2px;inset: 0 100% 0 0;border-radius: inherit;background: #514b82;animation: cartoon 2s infinite;}@keyframes cartoon {100% {inset: 0;}}
}
</style>

5. 卡顿式进度条 loading

实现效果

在这里插入图片描述

代码如下

<template><div class="parentBox"><div class="contantBox"></div></div>
</template>
<style lang="less" scoped>
.parentBox {height: 100%;background: rgb(31, 31, 31);padding: 100px;.contantBox {width: 120px;height: 20px;border-radius: 20px;background: linear-gradient(orange 0 0) 0/0% no-repeat lightblue;animation: cartoon 2s infinite steps(10);}@keyframes cartoon {100% {background-size: 110%;}}
}
</style>

6. 进度条波纹 loading

实现效果

在这里插入图片描述

代码如下

<template><div class="parentBox"><div class="contantBox"></div></div>
</template>
<style lang="less" scoped>
.parentBox {height: 100%;background: rgb(31, 31, 31);padding: 100px;.contantBox {width: 120px;height: 20px;border-radius: 20px;background: repeating-linear-gradient(135deg,#f03355 0 10px,#ffa516 0 20px)0/0% no-repeat,repeating-linear-gradient(135deg, #ddd 0 10px, #eee 0 20px) 0/100%;animation: cartoon 2s infinite;}@keyframes cartoon {100% {background-size: 100%;}}
}
</style>

7. 进度条分隔式 loading

实现效果

在这里插入图片描述

代码如下

<template><div class="parentBox"><div class="contantBox"></div></div>
</template>
<style lang="less" scoped>
.parentBox {height: 100%;background: rgb(31, 31, 31);padding: 100px;.contantBox {width: 120px;height: 20px;-webkit-mask: linear-gradient(90deg, #000 70%, #0000 0) 0/20%;background: linear-gradient(rgb(73, 255, 57) 0 0) 0/0% no-repeat #ddd;animation: cartoon 2s infinite steps(6);}@keyframes cartoon {100% {background-size: 120%;}}
}
</style>

8. 圆球连接式 loading

实现效果

在这里插入图片描述

代码如下

<template><div class="parentBox"><div class="contantBox"></div></div>
</template>
<style lang="less" scoped>
.parentBox {height: 100%;background: rgb(31, 31, 31);padding: 100px;.contantBox {width: 120px;height: 24px;-webkit-mask: radial-gradient(circle closest-side, #000 94%, #0000) 0 0/25%100%,linear-gradient(#000 0 0) center/calc(100% - 12px) calc(100% - 12px)no-repeat;background: linear-gradient(#25b09b 0 0) 0/0% no-repeat #ddd;animation: cartoon 2s infinite linear;}@keyframes cartoon {100% {background-size: 100%;}}
}
</style>

9. 电池充电式 loading

实现效果

在这里插入图片描述

代码如下

<template><div class="parentBox"><div class="contantBox"></div></div>
</template>
<style lang="less" scoped>
.parentBox {height: 100%;background: rgb(31, 31, 31);padding: 100px;.contantBox {width: 80px;height: 40px;border: 2px solid rgb(103, 194, 58);padding: 3px;background: repeating-linear-gradient(90deg,rgb(103, 194, 58) 0 10px,#0000 0 16px)0/0% no-repeat content-box content-box;position: relative;animation: cartoon 2s infinite steps(6);}.contantBox::before {content: "";position: absolute;top: 50%;left: 100%;transform: translateY(-50%);width: 10px;height: 10px;border: 2px solid rgb(103, 194, 58);}@keyframes cartoon {100% {background-size: 120%;}}
}
</style>

10. 球体分隔式 loading

实现效果

在这里插入图片描述

代码如下

<template><div class="parentBox"><div class="contantBox"></div></div>
</template>
<style lang="less" scoped>
.parentBox {height: 100%;background: rgb(31, 31, 31);padding: 100px;.contantBox {width: 60px;height: 60px;border-radius: 50%;-webkit-mask: linear-gradient(0deg, #000 55%, #0000 0) bottom/100% 18.18%;background: linear-gradient(#f03355 0 0) bottom/100% 0% no-repeat #ddd;animation: cartoon 2s infinite steps(7);}@keyframes cartoon {100% {background-size: 100% 115%;}}
}
</style>

11. 水球波纹式 loading

实现效果

在这里插入图片描述

代码如下

<template><div class="parentBox"><div class="contantBox"></div></div>
</template>
<style lang="less" scoped>
.parentBox {height: 100%;background: rgb(31, 31, 31);padding: 100px;.contantBox {--r1: 154%;--r2: 68.5%;width: 60px;height: 60px;border-radius: 50%;background: radial-gradient(var(--r1) var(--r2) at top,#0000 79.5%,#269af2 80%)center left,radial-gradient(var(--r1) var(--r2) at bottom, #269af2 79.5%, #0000 80%)center center,radial-gradient(var(--r1) var(--r2) at top, #0000 79.5%, #269af2 80%)center right,#ccc;background-size: 50.5% 220%;background-position: -100% 0%, 0% 0%, 100% 0%;background-repeat: no-repeat;animation: cartoon 2s infinite linear;}@keyframes cartoon {33% {background-position: 0% 33%, 100% 33%, 200% 33%;}66% {background-position: -100% 66%, 0% 66%, 100% 66%;}100% {background-position: 0% 100%, 100% 100%, 200% 100%;}}
}
</style>

12. 半圆线条式 loading

实现效果

在这里插入图片描述

代码如下

<template><div class="parentBox"><div class="contantBox"></div></div>
</template>
<style lang="less" scoped>
.parentBox {height: 100%;background: rgb(31, 31, 31);padding: 100px;.contantBox {width: 120px;height: 60px;border-radius: 200px 200px 0 0;-webkit-mask: repeating-radial-gradient(farthest-side at bottom,#0000 0,#000 1px 12%,#0000 calc(12% + 1px) 20%);background: radial-gradient(farthest-side at bottom, #514b82 0 95%, #0000 0)bottom/0% 0% no-repeat #ddd;animation: cartoon 2s infinite steps(6);}@keyframes cartoon {100% {background-size: 120% 120%;}}
}
</style>

13. 球体内小球跳跃式 loading

实现效果

在这里插入图片描述

代码如下

<template><div class="parentBox"><!-- 第一种 --><div><figure><section><div></div></section><section><div></div></section><section><div></div></section><section><div></div></section><section><div></div></section><section><div></div></section><section><div></div></section><section><div></div></section></figure></div><!-- 第二种 --><div><figure><section><div></div></section><section><div></div></section><section><div></div></section><section><div></div></section><section><div></div></section><section><div></div></section><section><div></div></section><section><div></div></section></figure></div><!-- 第三种 --><div><figure><section><div></div></section><section><div></div></section><section><div></div></section><section><div></div></section><section><div></div></section><section><div></div></section><section><div></div></section><section><div></div></section></figure></div><!-- 第四种 --><div><figure><section><div></div></section><section><div></div></section><section><div></div></section><section><div></div></section><section><div></div></section><section><div></div></section><section><div></div></section><section><div></div></section></figure></div></div>
</template>
<style lang="less" scoped>
.parentBox {height: 100%;background: rgb(31, 31, 31);padding: 100px;display: flex;@keyframes move {from {transform: translate(0, 50%);}to {transform: translate(0, 850%);}}figure {margin: 10px;width: 40px;height: 40px;border-radius: 50%;position: relative;background: rgb(240,109,78);}section {width: 10%;height: 100%;position: absolute;left: 45%;}section:nth-child(2) {transform: rotate(22.5deg);}section:nth-child(3) {transform: rotate(45deg);}section:nth-child(4) {transform: rotate(67.5deg);}section:nth-child(5) {transform: rotate(90deg);}section:nth-child(6) {transform: rotate(112.5deg);}section:nth-child(7) {transform: rotate(135deg);}section:nth-child(8) {transform: rotate(157.5deg);}figure div {height: 10%;border-radius: 50%;background: #fff;animation: move 1s ease-in-out infinite alternate;}figure:nth-child(1) > section:nth-child(1) > div {animation-delay: -0.1875s;}figure:nth-child(1) > section:nth-child(2) > div {animation-delay: -0.175s;}figure:nth-child(1) > section:nth-child(3) > div {animation-delay: -0.1625s;}figure:nth-child(1) > section:nth-child(4) > div {animation-delay: -0.15s;}figure:nth-child(1) > section:nth-child(5) > div {animation-delay: -0.9375s;}figure:nth-child(1) > section:nth-child(6) > div {animation-delay: -0.925s;}figure:nth-child(1) > section:nth-child(7) > div {animation-delay: -0.9125s;}figure:nth-child(1) > section:nth-child(8) > div {animation-delay: -0.9s;}figure:nth-child(2) > section:nth-child(1) > div {animation-delay: -0.875s;}figure:nth-child(2) > section:nth-child(2) > div {animation-delay: -0.75s;}figure:nth-child(2) > section:nth-child(3) > div {animation-delay: -0.625s;}figure:nth-child(2) > section:nth-child(4) > div {animation-delay: -0.5s;}figure:nth-child(2) > section:nth-child(5) > div {animation-delay: -0.375s;}figure:nth-child(2) > section:nth-child(6) > div {animation-delay: -0.25s;}figure:nth-child(2) > section:nth-child(7) > div {animation-delay: -0.125s;}figure:nth-child(3) > section:nth-child(1) > div {animation-delay: -0.5s;}figure:nth-child(3) > section:nth-child(3) > div {animation-delay: -0.5s;}figure:nth-child(3) > section:nth-child(5) > div {animation-delay: -0.5s;}figure:nth-child(3) > section:nth-child(7) > div {animation-delay: -0.5s;}figure:nth-child(4) > section:nth-child(1) > div {animation-delay: -0.35s;}figure:nth-child(4) > section:nth-child(2) > div {animation-delay: -0.3s;}figure:nth-child(4) > section:nth-child(3) > div {animation-delay: -0.25s;}figure:nth-child(4) > section:nth-child(4) > div {animation-delay: -0.2s;}figure:nth-child(4) > section:nth-child(5) > div {animation-delay: -0.15s;}figure:nth-child(4) > section:nth-child(6) > div {animation-delay: -0.1s;}figure:nth-child(4) > section:nth-child(7) > div {animation-delay: -0.05s;}
}
</style>

14. 球体内动图式 loading

实现效果

在这里插入图片描述

代码如下

<template><div class="parentBox"><div class="containerBox"><!-- 第一种 --><div class="canvasBox"><div class="spinnerOneBox spinnerMaxBox"><div class="spinnerOneBox spinnerMidBox"><div class="spinnerOneBox spinnerMinBox"></div></div></div></div><!-- 第二种 --><div class="canvasBox canvasTwoBox"><div class="spinnerTwoBox"></div><div class="hourHandBox"></div><div class="dotBox"></div></div><!-- 第三种 --><div class="canvasBox"><div class="spinnerThreeBox"></div></div><!-- 第四种 --><div class="canvasBox"><div class="spinnerFourBox"></div></div><!-- 第五种 --><div class="canvasBox"><div class="spinnerFiveBox"></div></div><!-- 第六种 --><div class="canvasBox"><div class="spinnerSexBox p1"></div><div class="spinnerSexBox p2"></div><div class="spinnerSexBox p3"></div><div class="spinnerSexBox p4"></div></div></div></div>
</template>
<style lang="less" scoped>
.parentBox {height: 100%;background: rgb(31, 31, 31);padding: 100px;.containerBox {display: flex;.canvasBox {align-items: center;background: #eeeeee;border-radius: 50%;display: flex;justify-content: center;margin: 1em;width: 10em;height: 10em;// 第一种.spinnerOneBox {align-items: center;border: 0.3em solid transparent;border-top: 0.3em solid #4db6ac;border-right: 0.3em solid #4db6ac;border-radius: 100%;display: flex;justify-content: center;}.spinnerMaxBox {animation: spinnerOne 3s linear infinite;height: 3em;width: 3em;.spinnerMidBox {animation: spinnerOne 5s linear infinite;height: 2.4em;width: 2.4em;.spinnerMinBox {animation: spinnerOne 5s linear infinite;height: 1.8em;width: 1.8em;}}}}@keyframes spinnerOne {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}// 第二种.canvasTwoBox {position: relative;.spinnerTwoBox {animation: spinnerTwo 1s linear infinite;background: #4db6ac;border-radius: 100px;height: 3em;transform-origin: top;position: absolute;top: 50%;width: 0.22em;}.hourHandBox {animation: spinnerTwo 7s linear infinite;background: #4db6ac;border-radius: 100px;height: 2em;transform-origin: top;position: absolute;top: 50%;width: 0.2em;}.dotBox {background: #4db6ac;border-radius: 100%;height: 0.5em;width: 0.5em;}}@keyframes spinnerTwo {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}// 第三种.spinnerThreeBox {animation: spinnerThree 1s linear infinite;background: #4db6ac;border-radius: 100%;width: 3em;height: 3em;}@keyframes spinnerThree {0%,35% {background: #4db6ac;transform: scale(1);}20%,50% {background: #80cbc4;transform: scale(1.3);}}// 第四种.spinnerFourBox {animation: spinnerFour 1s linear infinite;border: solid 7px transparent;border-top: solid 7px #4db6ac;border-radius: 100%;width: 3em;height: 3em;}@keyframes spinnerFour {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}// 第五种.spinnerFiveBox {animation: spinnerFive 1s linear infinite;border: solid 1.5em #4db6ac;border-right: solid 1.5em transparent;border-left: solid 1.5em transparent;border-radius: 100%;width: 0;height: 0;}@keyframes spinnerFive {0% {transform: rotate(0deg);}50% {transform: rotate(60deg);}100% {transform: rotate(360deg);}}// 第六种.spinnerSexBox {background: #4db6ac;border-radius: 50%;height: 1em;margin: 0.1em;width: 1em;}.p1 {animation: fall 1s linear 0.3s infinite;}.p2 {animation: fall 1s linear 0.2s infinite;}.p3 {animation: fall 1s linear 0.1s infinite;}.p4 {animation: fall 1s linear infinite;}@keyframes fall {0% {transform: translateY(-15px);}25%,75% {transform: translateY(0);}100% {transform: translateY(-15px);}}}
}
</style>

持续更新中...

相关文章:

纯css实现loading加载中(多种展现形式)

前言 现如今网页越来越趋近于动画&#xff0c;相信大家平时浏览网页或多或少都能看到一些动画效果&#xff0c;今天我们来做一个有意思的动画效果&#xff0c;纯 css 实现 loading 加载中&#xff08;多种展现形式&#xff09;&#xff0c;下面一起看看吧。 1. 常规 loading 实…...

【面试题】2023 vue高频面试知识点汇总

一、MVVM原理在Vue2官方文档中没有找到Vue是MVVM的直接证据&#xff0c;但文档有提到&#xff1a;虽然没有完全遵循MVVM模型&#xff0c;但是 Vue 的设计也受到了它的启发&#xff0c;因此在文档中经常会使用vm(ViewModel 的缩写) 这个变量名表示 Vue 实例。为了感受MVVM模型的…...

跨境电商选品重要吗?

选品很重要&#xff01;跨境电子商务选择的核心要求&#xff1a;优质商品&#xff0c;价格优势&#xff0c;符合跨境销售特点&#xff0c;满足目标海外市场需求&#xff0c;突出自身特色竞争优势。跨境电商是如何选择产品的&#xff1f;这个问题也很流行&#xff0c;应该考虑以…...

SpringBoot

这里写目录标题1.入门程序1.1 spring-boot-starter-parent1.2 启动器1.3 EnableAutoConfiguration(重要)1.4 如何注册多个Controller?1.5 引导类2.完整的SpringBoot项目2.1 启动类2.1.1 创建一个启动类2.1.2 扩展: SpringBootConfiguration2.2 使用配置类定义组件2.3 SpringBo…...

python--turtle

前言 就随便练练&#xff0c;学习一下turtle库的使用 正文 1.语法学习 import turtle #导入库 turtle.showturtle() #画笔显示箭头 turtle.write("我是大帅逼") #写下字符串 turtle.forward(300) …...

NodeJS的后端Express项目部署到Ubuntu服务器,为前端提供API服务

之前参与的web3项目后端是用NodeJS开发的&#xff0c;因为可以共用NPM库&#xff0c;采用的Express框架&#xff0c;第一次弄&#xff0c;记录下大致的部署过程如下&#xff1a; 1、服务器上安装NodeJS sudo apt-get install nodejs 2、安装全局NPM工具&#xff0c;node_mod…...

作为研发如何使用Github Api?

文章目录使用步骤账号创建进行开发者相关设置API操作演示Github API好处推荐的Github API&#x1f31f;个人主页: 个人主页 &#x1f6b5;‍♀️个人介绍:每天进步一点点&#xff0c;生活变得好一点点。 &#x1f4cc;作为一位开发&#xff0c;不管是非工作的还是工作中的人士&…...

Java volatile学习

面试题&#xff1a; 1、请谈谈你对volatile的理解&#xff1f; volatile是Java虚拟机提供的轻量级的同步机制1.保证可见性2.不保证原子性3.禁止指令重排 2、JMM你谈谈?Java内存模型 3、你在哪些地方用到过volatile?单例模式CAS底层代码 目录 一、概述 1、可见性 2、原子性…...

用神经网络分类上和下

( A, B )---3*30*2---( 1, 0 )( 0, 1 ) 做一个网络&#xff0c;输入为3个点&#xff0c;训练集A,B各有4张图片。让B的4张图片全是0.排列组合A&#xff0c;记录迭代次数平均值的变化。收敛误差为7e-4&#xff0c;每个网络收敛199次。 其中得到一组数据 差值结构 1-A-B 迭代次…...

VS Code 1.75 发布!

欢迎使用 2023 年 1 月版的 Visual Studio Code。希望您喜欢此版本中的许多更新&#xff0c;其中一些主要亮点包括&#xff1a;配置文件、VS Marketplace 签名、辅助功能改进、更轻松地调整多视图大小、树视图搜索历史、新的 Git 命令等等。让我们一起看看吧&#xff01; 配置文…...

Vue2仿网易云风格音乐播放器(附源码)

Vue2仿网易云风格音乐播放器1、整体效果2、使用技术3、实现内容4、源码5、使用图片1、整体效果 2、使用技术 使用了HTML5 CSS3进行页面布局及美化使用Vue2进行数据渲染与页面交互使用Axios发送http请求获取数据 3、实现内容 实现了搜索歌曲功能&#xff0c;输入歌手或歌曲关…...

Spring相关面试题

文章目录请谈一下你对 spring 的理解&#xff1f;说一下 Spring 的核心是什么&#xff1f;请谈 一下你对 Spring IOC 和 和 AOP 的理解&#xff1f;请说一下 Spring 的 的 Bean 作用域&#xff1f;请谈一下Spring中bean对象的生命周期&#xff1f;Spring中的事务是如何实现的 &…...

操作符详解(上篇)

前言小伙伴们大家好&#xff0c;随着对c的不断学习今天我们将来学习操作符。在初始c语言中也介绍过操作符但也只是点到即可&#xff0c;今天我们将详细了解操作符。操作符分类&#xff1a;算术操作符移位操作符位操作符赋值操作符单目操作符关系操作符逻辑操作符条件操作符逗号…...

采样电路的3个组成部分

采样电路的使用实际上是电路的一个闭环控制过程&#xff0c;也可以理解为一个负反馈过程&#xff0c;采集的信号被传送到主控制芯片进行调整。今天就来为您介绍一下采样电路的三个组成部分分析&#xff01;一起来看看吧&#xff01; 这里的采样实际上分为电流采样、电压采样、…...

ffmpeg硬解码与软解码的压测对比

文章目录ffmpeg硬解码与软解码的压测一、基本知识二、压测实验1. 实验条件及工具说明2. 压测脚本3. 实验数据结果ffmpeg硬解码与软解码的压测 一、基本知识 本文基于intel集显进行压测 软解码&#xff1a;cpu对视频进行解码硬解码&#xff1a;显卡或者多媒体处理芯片对视频进…...

操作符——“C”

各位CSDN的uu们你们好呀&#xff0c;今天&#xff0c;总算是要到我们的操作符啦&#xff0c;在C语言中&#xff0c;操作符是一个极为复杂的东西&#xff0c;下面&#xff0c;就让我们进入操作符的世界吧 算术操作符 移位操作符 位操作符 赋值操作符 单目操作符 关系操作符…...

YSP的UI界面设计

文章目录一、准备工作二、UI设计1.QPushButton&#xff1a;三、遇到的bug一、准备工作 1.MSVC和MinGW上编译的项目&#xff0c;不能用另一个编译器进行编译 2.若要使用MSVC编译器&#xff0c;需要下载对应版本的VS 见此篇&#xff1a;https://blog.csdn.net/Copperxcx/article…...

干货 | 什么是磁传感器?最常用的磁传感器类型及应用

1、什么是磁传感器&#xff1f;磁传感器通常是指将磁场的大小和变化转换成电信号。磁场&#xff0c;以地球磁场(地磁)或磁石为例的磁场是我们熟悉但不可见的现象。将不可见的磁场转化为电信号&#xff0c;以及转化为可见效应的磁传感器一直以来都是研究的主题。从几十年前使用电…...

操作符(运算符)详解

&#x1f680;&#x1f680;&#x1f680;大家觉不错的话&#xff0c;就恳求大家点点关注&#xff0c;点点小爱心&#xff0c;指点指点&#x1f680;&#x1f680;&#x1f680; 目录 &#x1f430;算数操作符&#xff1a; - * / % &#x1f430;移位操作符&#x…...

【LeetCode每日一题】【2023/2/9】1797. 设计一个验证系统

文章目录1797. 设计一个验证系统方法1&#xff1a;哈希表代码总体1797. 设计一个验证系统 LeetCode: 1797. 设计一个验证系统 中等\color{#FFB800}{中等}中等 你需要设计一个包含验证码的验证系统。每一次验证中&#xff0c;用户会收到一个新的验证码&#xff0c;这个验证码在…...

XML Group端口详解

在XML数据映射过程中&#xff0c;经常需要对数据进行分组聚合操作。例如&#xff0c;当处理包含多个物料明细的XML文件时&#xff0c;可能需要将相同物料号的明细归为一组&#xff0c;或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码&#xff0c;增加了开…...

Chapter03-Authentication vulnerabilities

文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...

Flask RESTful 示例

目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题&#xff1a; 下面创建一个简单的Flask RESTful API示例。首先&#xff0c;我们需要创建环境&#xff0c;安装必要的依赖&#xff0c;然后…...

云启出海,智联未来|阿里云网络「企业出海」系列客户沙龙上海站圆满落地

借阿里云中企出海大会的东风&#xff0c;以**「云启出海&#xff0c;智联未来&#xff5c;打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办&#xff0c;现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...

解锁数据库简洁之道:FastAPI与SQLModel实战指南

在构建现代Web应用程序时&#xff0c;与数据库的交互无疑是核心环节。虽然传统的数据库操作方式&#xff08;如直接编写SQL语句与psycopg2交互&#xff09;赋予了我们精细的控制权&#xff0c;但在面对日益复杂的业务逻辑和快速迭代的需求时&#xff0c;这种方式的开发效率和可…...

高危文件识别的常用算法:原理、应用与企业场景

高危文件识别的常用算法&#xff1a;原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件&#xff0c;如包含恶意代码、敏感数据或欺诈内容的文档&#xff0c;在企业协同办公环境中&#xff08;如Teams、Google Workspace&#xff09;尤为重要。结合大模型技术&…...

什么?连接服务器也能可视化显示界面?:基于X11 Forwarding + CentOS + MobaXterm实战指南

文章目录 什么是X11?环境准备实战步骤1️⃣ 服务器端配置(CentOS)2️⃣ 客户端配置(MobaXterm)3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/55aefaea8a9f477e86d065227851fe3d.pn…...

管理学院权限管理系统开发总结

文章目录 &#x1f393; 管理学院权限管理系统开发总结 - 现代化Web应用实践之路&#x1f4dd; 项目概述&#x1f3d7;️ 技术架构设计后端技术栈前端技术栈 &#x1f4a1; 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 &#x1f5c4;️ 数据库设…...

初探Service服务发现机制

1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。 主要功能&#xff1a;服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源&#xf…...

springboot整合VUE之在线教育管理系统简介

可以学习到的技能 学会常用技术栈的使用 独立开发项目 学会前端的开发流程 学会后端的开发流程 学会数据库的设计 学会前后端接口调用方式 学会多模块之间的关联 学会数据的处理 适用人群 在校学生&#xff0c;小白用户&#xff0c;想学习知识的 有点基础&#xff0c;想要通过项…...