css常见动画

1、音乐播放效果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>制作竖条加载动画</title>
	<style>
		.animbox {
		    margin: 50px auto;
		    width: 200px;
		    text-align: center;
		}
		/*设置各竖条的共有样式*/
		.animbox > div {
		    background-color: #279fcf;
		    width: 4px;
		    height: 35px;
		    border-radius: 2px;
		    margin: 2px;
		    animation-fill-mode: both;
		    display: inline-block;
		    animation: anim 0.9s 0s infinite cubic-bezier(.11, .49, .38, .78);
		}
		/*设置动画延迟*/
		.animbox > :nth-child(2), .animbox > :nth-child(4) {
		    animation-delay: 0.25s !important;
		}

		.animbox > :nth-child(1), .animbox > :nth-child(5) {
		    animation-delay: 0.5s !important;
		}
		/*定义动画*/
		@keyframes anim {
		    0% {  transform: scaley(1); }
		    80% {  transform: scaley(0.3); }
		    90% {  transform: scaley(1);   }
		}
	</style>
</head>
<body>
	<div class="animbox">
	    <div></div>
	    <div></div>
	    <div></div>
	    <div></div>
	    <div></div>
	</div>
</body>
</html>

2、电影闭幕效果

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      .box {
        height: 100%;
        width: 100%;
        position: absolute;
        background: url("https://img0.baidu.com/it/u=2771945787,9120044&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=500")
          no-repeat;
        background-size: cover;
        animation: fade-away 3s linear forwards;
      }
      .text {
        position: absolute;
        line-height: 55px;
        color: #fff;
        font-size: 36px;
        text-align: center;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        opacity: 0;
        animation: show 2s cubic-bezier(0.74, -0.1, 0.86, 0.83) forwards;
      }

      @keyframes fade-away {
        30% {
          filter: brightness(1);
        }
        100% {
          filter: brightness(0);
        }
      }
      @keyframes show {
        20% {
          opacity: 0;
        }
        100% {
          opacity: 1;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box"></div>
      <div class="text">
        <p>电影闭幕效果</p>
      </div>
    </div>
  </body>
</html>

3、箭头动效

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      body {
        background: #222;
      }

      .arrow {
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-transform: translate3d(-50%, -50%, 0);
        transform: translate3d(-50%, -50%, 0);
      }

      .arrow-1 {
        -webkit-animation: arrow-movement 2s ease-in-out infinite;
        animation: arrow-movement 2s ease-in-out infinite;
      }

      .arrow-2 {
        -webkit-animation: arrow-movement 2s 1s ease-in-out infinite;
        animation: arrow-movement 2s 1s ease-in-out infinite;
      }

      .arrow:before,
      .arrow:after {
        background: #fff;
        content: "";
        display: block;
        height: 3px;
        position: absolute;
        top: 0;
        left: 0;
        width: 30px;
      }

      .arrow:before {
        -webkit-transform: rotate(45deg) translateX(-23%);
        transform: rotate(45deg) translateX(-23%);
        -webkit-transform-origin: top left;
        transform-origin: top left;
      }

      .arrow:after {
        -webkit-transform: rotate(-45deg) translateX(23%);
        transform: rotate(-45deg) translateX(23%);
        -webkit-transform-origin: top right;
        transform-origin: top right;
      }

      @-webkit-keyframes arrow-movement {
        0% {
          opacity: 0;
          top: 45%;
        }
        70% {
          opacity: 1;
        }
        100% {
          opacity: 0;
        }
      }

      @keyframes arrow-movement {
        0% {
          opacity: 0;
          top: 45%;
        }
        70% {
          opacity: 1;
        }
        100% {
          opacity: 0;
        }
      }
    </style>
  </head>
  <body>
    <div class="arrow arrow-1"></div>
    <div class="arrow arrow-2"></div>
  </body>
</html>

4、按钮心跳效果

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      /* 按钮心跳动画 */
      .heart-shake {
        width: 100px;
        height: 30px;
        margin: auto;
        border-radius: 10px;
        background: #3866ff;
        color: #ffffff;
        box-shadow: 0 2px 30px 0 #3866ff63;
        animation: submitBtn 1.5s ease infinite;
      }
      @keyframes submitBtn {
        0% {
          transform: scale(1);
        }
        50% {
          transform:scale3d(.8,.8,.8);
        }
        100% {
          transform: scale(1);
        }
      }
    </style>
  </head>
  <body>
    <div class="heart-shake ege">按钮心跳动画</div>
  </body>
</html>

5、水波扩散效果加载动画

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>制作水波扩散效果加载动画</title>
	<style>
		.ball{
		    width: 100px;
		    height: 100px;
		    margin: 50px auto;
		    position: relative;
		    transform: translateY(-30px);
		}

		.ball> div {          /*设置水波纹的样式*/
		    background-color: #279fcf;
		    border-radius: 100%;
		    margin: 2px;
		    position: absolute;
		    left: 15px;
		    top: 15px;
		    opacity: 0;
		    width: 60px;
		    height: 60px;
		    animation: anim 1s 0s linear infinite both;
		}
		.ball > div:nth-child(2) {        /*设置动画延迟*/
		    animation-delay: 0.2s;
		}
		/*此处省略设置第三个和第四个圆圈的动画延迟的代码*/
		.ball> div:nth-child(3) {
		    animation-delay: 0.4s;
		}

		.ball > div:nth-child(4) {
		    animation-delay: 0.6s;
		}

		@keyframes anim {
		    0% {transform: scale(0);
		        opacity: 0; }
		    5% {opacity: 1; }
		    100% {transform: scale(1);
		           opacity: 0; }
		}
	</style>
</head>
<body>
	<div class="ball">
	    <div></div>
	    <div></div>
	    <div></div>
	    <div></div>
	</div>
</body>
</html>

6、环形加载动画

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>环形加载动画</title>
	<style>
		/*css document*/
		* {
		    margin: 0;
		    padding: 0;
		}


		body {
		    background: #ffefce;
		}


		.cont {
		    width: 100px;
		    height: 100px;
		    position: relative;
		    margin: 100px auto;
		}
		.line div {
		    position: absolute;
		    left: 0;
		    top: 0;
		    width: 4px;
		    height: 100px;
		}


		.line div:before, .line div:after {
		    content: '';
		    display: block;
		    height: 50%;
		    background: #009cda;
		    border-radius: 5px;
		}

		/*设置组成环形加载的竖条的旋转角度*/
		.line div:nth-child(2) {
		    transform: rotate(15deg);
		}


		.line div:nth-child(3) {
		    transform: rotate(30deg);
		}


		.line div:nth-child(4) {
		    transform: rotate(45deg);
		}


		.line div:nth-child(5) {
		    transform: rotate(60deg);
		}

		.line div:nth-child(6) {
		    transform: rotate(75deg);
		}
		.line div:nth-child(7) {
		    transform: rotate(90deg);
		}


		.line div:nth-child(8) {
		    transform: rotate(105deg);
		}


		.line div:nth-child(9) {
		    transform: rotate(120deg);
		}


		.line div:nth-child(10) {
		    transform: rotate(135deg);
		}

		.line div:nth-child(11) {
		    transform: rotate(150deg);
		}
		.line div:nth-child(12) {
		    transform: rotate(165deg);
		}

		.circle {
		    position: absolute;
		    left: -15%;
		    top: 35%;
		    width: 50px;
		    height: 50px;
		    margin: -9px 0 0 -9px;
		    background: #ffefce;
		    border-radius: 100%;
		}

		/*定义动画*/
		@keyframes load {
		    0% {
		        opacity: 0;
		    }
		    100% {
		        opacity: 1;
		    }
		}
		/*设置动画以及动画延迟 */
		.line div:nth-child(1):before {
		    animation: load 1.2s linear 0s infinite;
		}
		/*依次从第一个div的:before至最后一个div的:before的动画延迟为每个增加0.05s,此处省略雷同代码*/
		.line div:nth-child(2):before {
		    animation: load 1.2s linear 0.05s infinite;
		}

		.line div:nth-child(3):before {
		    animation: load 1.2s linear 0.1s infinite;
		}

		.line div:nth-child(4):before {
		    animation: load 1.2s linear 0.15s infinite;
		}

		.line div:nth-child(5):before {
		    animation: load 1.2s linear 0.2s infinite;
		}

		.line div:nth-child(6):before {
		    animation: load 1.2s linear 0.25s infinite;
		}

		.line div:nth-child(7):before {
		    animation: load 1.2s linear 0.3s infinite;
		}

		.line div:nth-child(8):before {
		    animation: load 1.2s linear 0.35s infinite;
		}

		.line div:nth-child(9):before {
		    animation: load 1.2s linear 0.4s infinite;
		}

		.line div:nth-child(10):before {
		    animation: load 1.2s linear 0.45s infinite;
		}

		.line div:nth-child(11):before {
		    animation: load 1.2s linear 0.5s infinite;
		}

		.line div:nth-child(12):before {
		    animation: load 1.2s linear 0.55s infinite;
		}

		.line div:nth-child(1):after {
		    animation: load 1.2s linear 0.6s infinite;
		}
		/*依次从第一个div的:after至最后一个div的:after的动画延迟为每个增加0.05s,此处省略雷同代码*/
		.line div:nth-child(2):after {
		    animation: load 1.2s linear 0.65s infinite;
		}

		.line div:nth-child(3):after {
		    animation: load 1.2s linear 0.7s infinite;
		}

		.line div:nth-child(4):after {
		    animation: load 1.2s linear 0.75s infinite;
		}

		.line div:nth-child(5):after {
		    animation: load 1.2s linear 0.8s infinite;
		}

		.line div:nth-child(6):after {
		    animation: load 1.2s linear 0.85s infinite;
		}

		.line div:nth-child(7):after {
		    animation: load 1.2s linear 0.9s infinite;
		}

		.line div:nth-child(8):after {
		    animation: load 1.2s linear 0.95s infinite;
		}

		.line div:nth-child(9):after {
		    animation: load 1.2s linear 1.0s infinite;
		}

		.line div:nth-child(10):after {
		    animation: load 1.2s linear 1.05s infinite;
		}

		.line div:nth-child(11):after {
		    animation: load 1.2s linear 1.1s infinite;
		}

		.line div:nth-child(12):after {
		    animation: load 1.2s linear 1.15s infinite;
		}
	</style>
</head>
<body>
<div class="cont">
  <div class="line">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="circle"></div>
</div>
</body>
</html>

7、制作小圆圈轮流放大的加载动画

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>制作小圆圈轮流放大的加载动画</title>
	<style>
/*css document*/
* { /*清除页面中默认的内外边距*/
    padding: 0;
    margin: 0;
}

.ball { /*设置动画盒子的整体样式*/
    width: 240px; /*设置整体大小*/
    height: 90px;
    text-align: center; /*设置对齐方式*/
    color: #fff; /*设置文字颜色*/
    background: rgba(0, 0, 0, 0.5); /*设置背景颜色*/
    margin: 20px auto;
}

.ball > p { /*设置加载的提示文字的样式*/
    padding: 20px 0;
}

.ball > div { /*设置动画中三个小球的样式*/
    width: 18px; /*设置大小*/
    height: 18px;
    background: #1abc9c; /*设置背景颜色*/
    border-radius: 100%; /*设置圆角边框*/
    display: inline-block; /*设置其显示方式*/
    animation: move 1.4s infinite ease-in-out both; /*添加动画*/
}

.ball .ball1 { /*设置第一个小球的动画延迟*/
    animation-delay: 0.16s;
}

.ball .ball2 { /*设置第二个小球的动画延迟*/
    animation-delay: 0.32s;
}

.ball .ball3 { /*设置第二个小球的动画延迟*/
    animation-delay: 0.48s;
}

@keyframes move { /*创建动画*/
    0% { transform: scale(0) }
    40% { transform: scale(1.0) }
    100% { transform: scale(0) }
}

	</style>
</head>
<body>
	<div class="cont">
	    <div class="ball">
	        <p>正在加载,请稍后~</p>
	        <div class="ball1"></div>
	        <div class="ball2"></div>
	        <div class="ball3"></div>
	    </div>
	</div>
</body>
</html>

8、椭圆形进度条加载

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>椭圆形进度条加载</title>
	<style>
		.cont {
		    margin: 50px auto;
		}

		.cont, p {
		    width: 300px;
		    height: 20px;
		    border-radius: 10px;
		    position: relative;
		    background-color: rgba(189, 189, 189, 1);
		}

		#bar {
		    background-color: #0e90d2;
		    width: 0;
		    animation: prog 1 5s ease forwards;
		}
		/*进度提示数字展示*/
		#txt {
		    position: absolute;
		    left: 250px;
		    width: 50px;
		    font: bold 18px/20px "";
		    color: #f00;
		}
		/*蓝色逐渐向右填充动画*/
		@keyframes prog {
		    0% {
		        width: 0px;
		    }
		    100% {
		        width: 300px;
		    }
		}
	</style>
</head>
<body>
<div class="cont">
    <p id="bar"><span id="txt">0%</span></p>
</div>
<script type="text/javascript">
	window.onload=function(){
	    var i = 0;
	    var txt = document.getElementById("txt");
	    var ds = setInterval(function(){
	        i++;
	        txt.innerHTML = i + "%";
	        // console.log(i)
	        if (i == 100) {
	            clearInterval(ds)
	        }
	    }, 50)
	}
</script>
</body>
</html>

9、文字轮播滚动

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>文字轮播滚动</title>
	<style>
		   .marquee-outer-wrapper {
            overflow: hidden;
            width: 100%;
        }
        
        .marquee-inner-wrapper {
            background: #eee;
            height: 40px;
            font-size: 14px;
            color: red;
            line-height: 40px;
            margin: 0 auto;
            white-space: nowrap;
            position: relative;
        }
        /* 需要将两个文字内容一样的span放在最右边 */
        
        .marquee-inner-wrapper span {
            position: absolute;
            top: 0;
            left: 100%;
            height: 100%;
        }
        /* 定义第一个span的animation：时长 动画名字 匀速 循环 正常播放 */
        
        .first-marquee {
            -webkit-animation: 25s first-marquee linear infinite normal;
            animation: 25s first-marquee linear infinite normal;
            padding-right: 70%;
        }
        
        @keyframes first-marquee {
            0% {
                -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
            }
            /* 向左移动 */
            100% {
                -webkit-transform: translate3d(-200%, 0, 0);
                transform: translate3d(-200%, 0, 0);
                display: none;
            }
        }
        
        .second-marquee {
            /* 因为要在第一个span播完之前就得出现第二个span，所以就延迟12s才播放 */
            -webkit-animation: 25s first-marquee linear 12s infinite normal;
            animation: 25s first-marquee linear 12s infinite normal;
            padding-right: 53%;
        }
        
        @keyframes second-marquee {
            0% {
                -webkit-transform: translate3d(0%, 0, 0);
                transform: translate3d(0%, 0, 0);
            }
            100% {
                -webkit-transform: translate3d(-200%, 0, 0);
                transform: translate3d(-200%, 0, 0);
                display: none;
            }
        }
	</style>
</head>
<body>
<div class="marquee-outer-wrapper">
        <div class="marquee-inner-wrapper">
            <span class="first-marquee">使用css3制作文字横向无限循环滚动的动画使用css3制作文字横向无限循环滚动的动画使用css3制作文字横向无限循环滚动的动画</span>
            <span class="second-marquee">使用css3制作文字横向无限循环滚动的动画使用css3制作文字横向无限循环滚动的动画使用css3制作文字横向无限循环滚动的动画</span>
        </div>
    </div>
</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/569546.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

MySQL无法打开情况下读取frm文件的表结构

MySQL无法打开情况下读取frm文件的表结构

一、背景&#xff1a; 开发人员通过MySQL客户端工具&#xff0c;可以访问MySQL5.7.6&#xff0c;可以访问具体的DB&#xff0c;可以查看小写表的数据&#xff0c;但是无法查看大写表的数据&#xff0c;报错信息为“table does not exist”。 二、检查与分析&#xff1a; ssh登录…
阅读更多...
网络安全主题纪录片

网络安全主题纪录片

网络安全主题纪录片 文章目录 网络安全主题纪录片第四公民黑客帝国系列龙纹身女孩碟中谍系列虎胆龙威4匿名者终结者2&#xff1a;审判日东方快车谋杀案黑客国家公敌我是谁&#xff1a;没有绝对安全的系统黑客军团速度与激情系列十亿美元大劫案勒索软件的背后黑客的恐惧为什么网…
阅读更多...
贪心算法-活动安排问题和背包问题

贪心算法-活动安排问题和背包问题

实验6贪心算法-活动安排问题和背包问题 实验目的&#xff1a; 理解贪心算法的基本思想运用贪心算法解决实际问题 实验内容&#xff1a; 采用贪心方法编程实现以下问题的算法 1.如何安排下列活动使得使用的活动场所最少&#xff0c;并给出具体的安排方法。 活动 a b c …
阅读更多...
mybatis 生成器，是否功能实现，需写测试类

mybatis 生成器，是否功能实现，需写测试类

一、看视频步骤 请按视频流程走 mybatis-18-CSDN直播 二、视频报错 解决思路 网址&#xff1a; 使用配置 | MyBatis-Plus (baomidou.com) 添加代码&#xff1a; 效果图&#xff1a;√ Tests passed: 前面✔&#xff0c;表示正确。 1为最终结果
阅读更多...
面包屑新玩法,ReactRouter+Ant Design实现动态渲染

面包屑新玩法,ReactRouter+Ant Design实现动态渲染

在Ant Design中,可以通过Breadcrumb组件结合react-router库实现动态生成面包屑导航。具体步骤如下: 定义路由配置数据结构 我们需要在路由配置中添加额外的面包屑相关信息,例如面包屑标题、icon等。例如: const routes [{path: /,breadcrumbName: 首页},{path: /users,brea…
阅读更多...
【笔试】03

【笔试】03

FLOPS FLOPS 是 Floating Point Operations Per Second 的缩写&#xff0c;意为每秒浮点运算次数。它是衡量计算机性能的指标&#xff0c;特别是用于衡量计算机每秒能够执行多少浮点运算。在高性能计算领域&#xff0c;FLOPS 被广泛用来评估超级计算机、CPU、GPU 和其他处理器…
阅读更多...
【macOS】M芯片安装windows10以及配置office

【macOS】M芯片安装windows10以及配置office

背景 M3芯片Macbook ProParallel Desktop19office word visio打算配置一个好用的笔记本&#xff0c;携带着尽快把论文的正文写完&#xff0c;macOS里面的word排版可能出错&#xff0c;所以像配置一个双系统&#xff0c;里面必然要有的是word和visio&#xff0c;其他没有要求 …
阅读更多...
使用linux，c++，创作一个简单的五子棋游戏

使用linux，c++，创作一个简单的五子棋游戏

#include <iostream> #include <vector> #include <unordered_map> using namespace std; // 棋盘大小 const int BOARD_SIZE 15; // 棋子类型 enum ChessType { EMPTY, BLACK, WHITE }; // 棋盘类 class ChessBoard { private: vect…
阅读更多...
大数据学习第四天

大数据学习第四天

文章目录 yaml 三大组件的方式交互流程hive 使用安装mysql(hadoop03主机)出现错误解决方式临时密码 卸载mysql (hadoop02主机)卸载mysql(hadoop01主机执行)安装hive上传文件解压解决版本差异修改hive-env.sh修改 hive-site.xml上传驱动包初始化元数据在hdfs 创建hive 存储目录启…
阅读更多...
怎么选出一个95分的产品？选品的逻辑到底是什么？如何不选错

怎么选出一个95分的产品？选品的逻辑到底是什么？如何不选错

大家好&#xff0c;我是电商花花。 选品定生死。 做电商的应该都会听过这句话&#xff0c;可能有些商家也只是听听就过去&#xff0c;如果没有遇到选品的问题就很难感受到。 如果你体验到一款好的产品带来的流量红利&#xff0c;体验一次爆单&#xff0c;就会知道选出优质的…
阅读更多...
Reactor 核心概念-响应式编程-003

Reactor 核心概念-响应式编程-003

🤗 ApiHug {Postman|Swagger|Api...} = 快↑ 准√ 省↓ GitHub - apihug/apihug.com: All abou the Apihug apihug.com: We build what we loveApiHug - API design Copilot - IntelliJ IDEs Plugin | MarketplaceReactor 核心库在： reactor-core， 实现。 引入 （gradl…
阅读更多...
【头文件】对.h文件的理解

【头文件】对.h文件的理解

目录 &#x1f31e;1. 头文件的概念 &#x1f30a;1.1 头文件的由来 &#x1f30a;1.2 头文件的作用 &#x1f30a;1.3 在.h文件中实现函数也不会出错的原因 &#x1f31e;2. 简单示例 &#x1f30a;2.1 头文件addition.h &#x1f30a;2.2 头文件接口实现addition.cpp …
阅读更多...
Leetcode 119 杨辉三角 II

Leetcode 119 杨辉三角 II

目录 一、问题描述二、示例及约束三、代码方法一&#xff1a;递推方法二&#xff1a;线性递推 四、总结 一、问题描述 给定一个非负索引 rowIndex&#xff0c;返回「杨辉三角」的第 rowIndex 行。   在「杨辉三角」中&#xff0c;每个数是它左上方和右上方的数的和。   自我…
阅读更多...
【JavaEE网络】深入理解Socket套接字及其在网络编程中的应用

【JavaEE网络】深入理解Socket套接字及其在网络编程中的应用

目录 Socket套接字UDP VS TCP有连接 VS 无连接可靠传输 VS 不可靠传输面向字节流 VS 面向数据报 全双工 VS 半双工 UDP数据报套接字编程DatagramSocket APIDatagramPacket APIInetSocketAddress APIUDP回显客户端服务器服务器和客户端的工作流程UDP翻译客户端服务器 Socket套接…
阅读更多...
轻松找回误删文件，告别企业数据丢失，如何有效利用teamOS二级回收站，提升数据管理效率

轻松找回误删文件，告别企业数据丢失，如何有效利用teamOS二级回收站，提升数据管理效率

在数字化时代&#xff0c;我们越来越依赖电子文件来记录和管理重要信息。 然而&#xff0c;伴随着这种便利的同时&#xff0c;误删或恶意操作导致的文件丢失也成为了一个令人头疼的问题。 那么本文就来谈一谈&#xff0c;企业网盘如何解决误删、甚至恶意删除的问题。 可道云…
阅读更多...
高效的数据采集如何促进企业发展？

高效的数据采集如何促进企业发展？

大数据开启了一个大规模生产、分享和应用数据的时代&#xff0c;它给技术和商业带来了巨大的变化。麦肯锡研究表明&#xff0c;在医疗、零售和制造业领域&#xff0c;大数据每年可以提高劳动生产率0.5-1个百分点。大数据在核心领域的渗透速度有目共睹&#xff0c;然而调查显示&…
阅读更多...
ctfshow——XSS

ctfshow——XSS

文章目录 XSS介绍什么是xss&#xff1f;XSS危害XSS的分类常用XSSpayload web316——反射型XSSweb317——过滤<script> web318——过滤script、imgweb319——不止过滤script、imgweb320——过滤空格web321——不止过滤空格web322——不止过滤空格web323web324web 325web32…
阅读更多...
ubuntu下安装python模块 pip intall xxx报错

ubuntu下安装python模块 pip intall xxx报错

报错内容大概如下&#xff1a; WARNING: Retrying (Retry(total4, connectNone, readNone, redirectNone, statusNone)) after connection broken by NewConnectionError(<pip._vendor.urllib3.connection.HTTPSConnection object at 0x7f0fc68d6370>: Failed to establ…
阅读更多...
Python 基础、流程、容器、函数

Python 基础、流程、容器、函数

一、基础语法 1.1 前言 1.1.1 Python简介 Python是一门编程语言&#xff0c;Python的作者是Guido van Rossum&#xff08;龟叔&#xff09; Python优点&#xff1a;简单易学 Python与嵌入式、集成电路行业 强大的库和工具生态系统&#xff1a;Python拥有广泛而强大的库和…
阅读更多...
javaWeb项目-社区医院管理服务系统功能介绍

javaWeb项目-社区医院管理服务系统功能介绍

项目关键技术 开发工具&#xff1a;IDEA 、Eclipse 编程语言: Java 数据库: MySQL5.7 框架&#xff1a;ssm、Springboot 前端&#xff1a;Vue、ElementUI 关键技术&#xff1a;springboot、SSM、vue、MYSQL、MAVEN 数据库工具&#xff1a;Navicat、SQLyog 1、Java技术 Java语…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站