前端笔记-day11

文章目录

    • 01-空间-平移
    • 02-视距
    • 03-空间旋转Z轴
    • 04-空间旋转X轴
    • 05-空间旋转Y轴
    • 06-立体呈现
    • 07-案例-3D导航
    • 08-空间缩放
    • 10-动画实现步骤
    • 11-animation复合属性
    • 12-animation拆分写法
    • 13-案例-走马灯
    • 14-案例-精灵动画
    • 15-多组动画
    • 16-全民出游
      • 全民出游.html
      • index.css

01-空间-平移

<!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{
            width: 200px;
            height: 200px;
            margin: 100px auto;
            background-color: pink;
            transition: all 0.5s;
        }
        .box:hover{
            transform: translate3d(100px,200px,300px);

            /* 不生效 */
            /* transform: translate3d(100px,200px); */
            transform: translateX(100px);
            transform: translateY(-100%);
            transform: translateZ(100px);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

02-视距

<!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>

        /* 视距属性必须添加给直接父级 */
        /* 视距取值建议800-1200 */
        .father{
            perspective: 1000px;
        }
        .son{
            width: 200px;
            height: 200px;
            margin: 100px auto;
            background-color: pink;
            transition: all 0.5s;
        }
        .son:hover{
            transform: translateZ(-300px);
            transform: translateZ(300px);
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

03-空间旋转Z轴

<!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{
            width: 300px;
            margin: 100px auto;
        }
        img{
            width: 300px;
            transition: all 2s;
        }
        .box img:hover{
            transform: rotateZ(360deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./images/hero.jpeg" alt="">
    </div>
</body>
</html>

在这里插入图片描述

04-空间旋转X轴

<!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{
            width: 300px;
            margin: 100px auto;
        }
        img{
            width: 300px;
            transition: all 2s;
        }
        .box{
            /* 视觉效果：近大远小，近实远虚 */
            perspective: 1000px;
        }
        .box img:hover{
            transform: rotateX(60deg);
            transform: rotateX(-60deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./images/hero.jpeg" alt="">
    </div>
</body>
</html>

在这里插入图片描述

05-空间旋转Y轴

<!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{
            width: 300px;
            margin: 100px auto;
        }
        img{
            width: 100%;
        }
        .body{
            perspective: 1000px;
        }
        .body:hover img{
            transform: rotateY(60deg);
            transform: rotateY(-60deg);
        }
    </style>
</head>
<body>
    <div class="body">
        <img src="./images/hero.jpeg" alt="">
    </div>
</body>
</html>
<!-- 左手法则判断旋转角度的正负 -->

在这里插入图片描述

06-立体呈现

<!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>
        .cube{
            /*2子绝父相*/
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            /* background-color: pink; */

            transition: all 1s;
            /* 1添加此属性可以让父级成为立方体 */
            transform-style: preserve-3d;

            /* transform: rotateY(89deg); */
        }
        .cube div{
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
        }
        .front{
            transform: translateZ(100px);
            background-color: chocolate;
        }
        .back{
            transform: translateZ(-100px);
            background-color: blueviolet;
        }
        .cube:hover{
            transform: rotateY(90deg);
        }
    </style>
</head>
<body>
    <div class="cube">
        <div class="front">前面</div>
        <div class="back">后面</div>
    </div>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

07-案例-3D导航

<!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>
        ul{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .nav{
            /* 只有设置了宽高margin才会生效 */
            width: 300px;
            height: 40px;
            margin: 100px auto;
        }
        .nav ul{
            display: flex;
        }
        .nav li{
            /* display: flex; */
            position: relative;
            width: 100px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            transition: all 0.5s;
            transform-style: preserve-3d;
            /* transform: rotateX(-20deg) rotateY(30deg); */
        }
        .nav li a{
            display: block;
            width: 100%;
            height: 100%;
            text-decoration: none;
            color: white;
            position: absolute;
            top: 0;
            left: 0;
        }
        .nav li a:first-child{
            transform: translateZ(20px);
            background-color: green;
        }
        .nav li a:last-child{ 
            transform: rotateX(90deg) translateZ(20px);  
                 
            background-color: orange;
        }
        .nav li:hover{
            transform: rotateX(-90deg);
        }
    </style>
</head>
<body>
    <div class="nav">
        <ul>
            <li>
                <a href="#">首页</a>
                <a href="#">index</a>
            </li>
            <li>
                <a href="#">首页</a>
                <a href="#">index</a>
            </li>
            <li>
                <a href="#">首页</a>
                <a href="#">index</a>
            </li>
        </ul>
    </div>
</body>
</html>

在这里插入图片描述

08-空间缩放

<!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>
        ul{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .nav{
            /* 只有设置了宽高margin才会生效 */
            width: 300px;
            height: 40px;
            margin: 100px auto;
        }
        .nav ul{
            display: flex;
        }
        .nav li{
            /* display: flex; */
            position: relative;
            width: 100px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            transition: all 0.5s;
            transform-style: preserve-3d;
            /* transform: rotateX(-20deg) rotateY(30deg); */
            transform: scaleX(0.5);
            transform: scaleY(2);
            transform: scaleZ(3);
            transform: scale3d(0.5,2,3);
        }
        .nav li a{
            display: block;
            width: 100%;
            height: 100%;
            text-decoration: none;
            color: white;
            position: absolute;
            top: 0;
            left: 0;
        }
        .nav li a:first-child{
            transform: translateZ(20px);
            background-color: green;
        }
        .nav li a:last-child{ 
            transform: rotateX(90deg) translateZ(20px);  
                 
            background-color: orange;
        }
        .nav li:hover{
            transform: rotateX(-90deg);
        }
    </style>
</head>
<body>
    <div class="nav">
        <ul>
            <li>
                <a href="#">首页</a>
                <a href="#">index</a>
            </li>
            <li>
                <a href="#">首页</a>
                <a href="#">index</a>
            </li>
            <li>
                <a href="#">首页</a>
                <a href="#">index</a>
            </li>
        </ul>
    </div>
</body>
</html>

在这里插入图片描述

10-动画实现步骤

<!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{
            width: 200px;
            height: 100px;
            background-color: pink;
            /* 使用动画的语句 */
            animation: change 1s;
        }
        /* 动画一：宽度从200到800 */
        /* @keyframes change{
            from{
                width: 200px;
            }
            to{
                width: 800px;
            }
        } */
         /* 动画二：从200*100 变化到300*300  变化到800*500 */
         /* 百分比表示的是动画时长的百分比 */
         @keyframes change {
            0%{
                width: 200px;
                height: 100px;
            }
            20%{
                width: 300px;
                height: 300px;
            }
            100%{
                width: 800px;
                height: 500px;
            }
            
         }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

11-animation复合属性

<!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{
            width: 200px;
            height: 100px;
            background-color: pink;
            /* 匀速 */
            animation: change 1s linear;
            /* 分布动画，一般用于配合精灵图实现精灵动画 */
            animation: change 1s steps(3);
            /* 如果有两个时间，第一个时间是动画时长，第二个是延迟时间 */
            animation: change 1s 2s;
            /* 重复次数测试 */
            animation: change 1s 3;
            animation: change 1s infinite;

            /* 动画方向：反向 alternate */
            animation: change 1s infinite alternate;

            /* 执行完毕状态   结束状态 开始状态*/
            animation: change 1s forwards;
            animation: change 1s backwards;
            animation: name duration timing-function delay iteration-count direction fill-mode;
        }
        @keyframes change {
            from{
                width: 200px;
            }
            to{
                width: 800px;
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

12-animation拆分写法

<!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{
            width: 200px;
            height: 100px;
            background-color: pink;
            /* 动画名称 */
            animation-name: change;
            /* 动画时长 */
            animation-duration: 1s;
            /* 播放次数 */
            animation-iteration-count: infinite;
        }
        .box:hover{
            /* 鼠标悬停暂停动画 */
            animation-play-state: paused;
        }
        @keyframes change {
            from{
                width: 200px;
            }
            to{
                width: 800px;
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

13-案例-走马灯

<!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>
        ul{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .box{
            margin: 100px auto;
            width: 600px;
            height: 112px;
            border: 5px solid black;
            overflow: hidden;
        }
        .box ul{
            display: flex;
            animation: move 6s linear infinite;
        }
        .box img{
            width: 200px;
            /* height: ; */
        }
        @keyframes move {
            from{
                transform: translate(0);
            }
            to{
                transform: translate(-1400px);
            }  
        }
        .box:hover ul{
            animation-play-state: paused;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li><img src="./images/1.jpg" alt=""></li>
            <li><img src="./images/2.jpg" alt=""></li>
            <li><img src="./images/3.jpg" alt=""></li>
            <li><img src="./images/4.jpg" alt=""></li>
            <li><img src="./images/5.jpg" alt=""></li>
            <li><img src="./images/6.jpg" alt=""></li>
            <li><img src="./images/7.jpg" alt=""></li>

            <!-- 让显示区域不露白 复制开头的图片到结尾 -->
            <li><img src="./images/1.jpg" alt=""></li>
            <li><img src="./images/2.jpg" alt=""></li>
            <li><img src="./images/3.jpg" alt=""></li>
        </ul>
    </div>
</body>
</html>

在这里插入图片描述

14-案例-精灵动画

<!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{
            width: 140px;
            height: 140px;
            border: 1px solid #000;
            background-image: url(./images/bg.png);
            animation: run  1s steps(12) infinite;
        }
        @keyframes run {
            from{
                background-position: 0 0;
            }
            to{
                background-position: -1680px 0;
            }
            
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

在这里插入图片描述

15-多组动画

<!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{
            width: 140px;
            height: 140px;
            /* border: 1px solid #000; */
            background-image: url(./images/bg.png);
            animation: 
                run 1s steps(12) infinite,
                move 3s forwards;
        }
        /* 当动画开始状态样式跟盒子默认样式相同，可以省略动画开始状态的代码 */
        @keyframes run {
            /* from{
                background-position: 0 0;
            } */
            to{
                background-position: -1680px 0;
            }   
        }
        @keyframes move{
            /* 0%{
                transform: translate(0);
            } */
            100%{
                transform: translate(800px);
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

在这里插入图片描述

16-全民出游

全民出游.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div class="cloud">
        <img src="./images/yun1.png" alt="">
        <img src="./images/yun2.png" alt="">
        <img src="./images/yun3.png" alt="">
    </div>
    <div class="san">
        <img src="./images/san.png" alt="">
    </div>
    <div class="shop">
        <img src="./images/1.png" alt="">
        <img src="./images/2.png" alt="">
        <img src="./images/3.png" alt="">
        <img src="./images/4.png" alt="">
    </div>
    <div class="text">
        <img src="./images/font1.png" alt="">
    </div>
</body>
</html>

index.css

*{
    padding: 0;
    margin: 0;
}
html{
    height: 100%;
}
body{
    height: 100%;
    background: url(../images/f1_1.jpg) no-repeat center 0 / cover;
}
.cloud img{
    position: absolute;
    left: 50%;
}
.cloud img:nth-child(1){
    margin-left: -250px;
    top: 20px;
    animation: cloud 1s infinite alternate linear;
}
.cloud img:nth-child(2){
    margin-left: 400px;
    top: 100px;
    animation: cloud 1s 0.4s infinite alternate linear;
}
.cloud img:nth-child(3){
    margin-left: -550px;
    top: 200px;
    animation: cloud 1s 0.6s infinite alternate linear;
}
@keyframes cloud {
    100%{
        transform: translate(20px);
    }
}
.san img{
    position: absolute;
    left: 50%;
    margin-left: -400px;
    top: 150px;
    animation: san 1s  infinite alternate linear;
}
@keyframes san {
    100%{
        transform: translateY(20px);
    }
}
.shop img{
    position: absolute;
    left: 50%;
    top: 750px;
}
.shop img:nth-child(1){
    margin-left: -400px;
    animation: san 1s  infinite alternate linear 0.2s;
}
.shop img:nth-child(2){
    margin-left: -200px;
    animation: san 1s  infinite alternate linear 0.4s;
}
.shop img:nth-child(3){
    margin-left: 0px;
    animation: san 1s  infinite alternate linear 0.6s;
}
.shop img:nth-child(4){
    margin-left: 200px;
    animation: san 1s  infinite alternate linear ;
}

.text img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    animation: text 1s;
}
/* 默认 小 大 小 默认 */
@keyframes text {
    0%{
        transform: translate(-50%,-50%) scale(1);
    }
    20%{
        transform: translate(-50%,-50%) scale(0.1);
    }
    40%{
        transform: translate(-50%,-50%) scale(1.5);
    }
    70%{
        transform: translate(-50%,-50%) scale(0.8);
    }
    100%{
        transform: translate(-50%,-50%) scale(1);
    }
}

在这里插入图片描述
在这里插入图片描述

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

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

相关文章

Linux随记（十）

Linux随记（十）

一、升级harbor v2.6.4 --> harbor-offline-installer-v2.11.0-rc3 --> v2.9.4 – 随记 漏洞信息&#xff1a; CVE-2023-20902timing condition in Harbor 2.6.x and below, Harbor 2.7.2 and below, Harbor 2.8.2 and below, and Harbor 1.10.17 and below allows an…
阅读更多...
逆变器--学习笔记（一）

逆变器--学习笔记（一）

并网&#xff1a; 逆变器中的“并网”指的是逆变器将其产生的交流电与电网同步&#xff0c;并输送到公共电网中。并网逆变器通常用于太阳能发电系统和其他分布式发电系统&#xff0c;将其产生的电能输送到电网供其他用户使用。 THD谐波失真总量: 逆变器的THD&#xff08;Tot…
阅读更多...
如何玩单机版：QQ音速

如何玩单机版：QQ音速

前言 我是研究单机的老罗&#xff0c;今天教大家带来一款怀旧游戏QQ音速 的教程。根据我的文章&#xff0c;一步一步就可以玩了。 如今市面上的资源参差不齐&#xff0c;大部分的都不能运行&#xff0c;本人亲自测试&#xff0c;运行视频如下&#xff1a; QQ音速 搭建教程 此…
阅读更多...
Node.js全栈指南：静态资源服务器

Node.js全栈指南：静态资源服务器

上一章【认识 MIME 和 HTTP】。 我们认识和了解了 MIME 的概念和作用&#xff0c;也简单地学习了通过浏览器控制台查看请求和返回的用法。 通过对不同的 HTML、CSS、JS 文件进行判断&#xff0c;设置不同的 MIME 值&#xff0c;得以让我们的浏览器正正确地接收和显示不同的文…
阅读更多...
还不知道工业以太网和现场总线区别???

还不知道工业以太网和现场总线区别???

工业以太网 工业以太网是一种专为工业环境设计的网络通信技术&#xff0c;它基于标准的以太网技术&#xff0c;但针对工业应用进行了优化。工业以太网能够适应高温、低温、防尘等恶劣工业环境&#xff0c;采用TCP/IP协议&#xff0c;与IEEE 802.3标准兼容&#xff0c;并在应用层…
阅读更多...
【C++】string基本用法（常用接口介绍）

【C++】string基本用法（常用接口介绍）

文章目录 一、string介绍二、string类对象的创建&#xff08;常见构造&#xff09;三、string类对象的容量操作1.size()和length()2.capacity()3.empty()4.clear()5.reserve()6.resize() 四、string类对象的遍历与访问1.operator[ ]2.正向迭代器begin()和end()3.反向迭代器rbeg…
阅读更多...
分治精炼宝库-----快速排序运用(⌯꒪꒫꒪)੭

分治精炼宝库-----快速排序运用(⌯꒪꒫꒪)੭

目录 一.基本概念: 一.颜色分类&#xff1a; 二.排序数组&#xff1a; 三.数组中的第k个最大元素&#xff1a; 解法一&#xff1a;快速选择算法 解法二&#xff1a;简单粗暴优先级队列 四.库存管理Ⅲ&#xff1a; 解法一&#xff1a;快速选择 解法二&#xff1a;简单粗…
阅读更多...
linux ls文件排序

linux ls文件排序

linux可以使用ls命令结合一些选项来按照文件大小对文件和目录进行排序。以下是一些常用的方法&#xff1a; 1、这里&#xff0c;-l 选项表示长格式输出&#xff08;包括文件权限、所有者、大小等&#xff09;&#xff0c;-S 选项表示按照文件大小排序&#xff0c;-h 选项表示以…
阅读更多...
docker -run hello-world超时

docker -run hello-world超时

主要原因就是尝试拉取库的时候没有从阿里云镜像里拉&#xff0c;所以设置一下就好了 这里使用的是ubuntu系统&#xff08;命令行下逐行敲就行了&#xff09; sudo mkdir -p /etc/docker sudo tee /etc/docker/daemon.json <<-EOF {"registry-mirrors": [&quo…
阅读更多...
MSPM0G3507——定时器例程讲解4——timx_timer_mode_periodic

MSPM0G3507——定时器例程讲解4——timx_timer_mode_periodic

以下示例以周期模式配置TimerG并切换LED。周期从500ms开始&#xff0c;每次切换减少50ms&#xff0c;直到周期为100ms&#xff0c;然后重复。设备在等待中断时保持待机模式 #include "ti_msp_dl_config.h"/* ((32KHz / (321)) * 0.5s) 45 - 1 495 due to N1 ticks …
阅读更多...
FastGPT 调用Qwen 测试Hello world

FastGPT 调用Qwen 测试Hello world

Ubuntu 安装Qwen/FastGPT_fastgpt message: core.chat.chat api is error or u-CSDN博客 参考上面文档 安装FastGPT后 登录&#xff0c; 点击右上角的 新建 点击 这里&#xff0c;配置AI使用本地 ollama跑的qwen模型 问题&#xff1a;树上有3只鸟&#xff0c;开了一枪&#…
阅读更多...
基于YOLOv9的PCB板缺陷检测

基于YOLOv9的PCB板缺陷检测

数据集 PCB缺陷检测&#xff0c;我们直接采用北京大学智能机器人开放实验室数据提供的数据集&#xff0c; 共六类缺陷 漏孔、鼠咬、开路、短路、杂散、杂铜 已经对数据进行了数据增强处理&#xff0c;同时按照YOLO格式配置好&#xff0c;数据内容如下 模型训练 ​ 采用YOLO…
阅读更多...
Sping源码（九）—— Bean的初始化（非懒加载）— Bean的创建方式（构造器方法）

Sping源码（九）—— Bean的初始化（非懒加载）— Bean的创建方式（构造器方法）

序言 前面几篇文章介绍了Spring中几种方式下Bean对象的实例化的过程&#xff0c;那如果之前的几种都不满足&#xff0c;按照Spring中正常Bean的实例化步骤&#xff0c;该如何创建这个Bean对象呢&#xff1f; 测试类 我们先创建几个debug中用到的栗子。 Person 以一个平平无…
阅读更多...
文章浮现之单细胞VDJ的柱状图

文章浮现之单细胞VDJ的柱状图

应各位老师的需求复现一篇文章的中的某个图 具体复现图5的整个思路图&#xff0c;这里没有原始数据&#xff0c;所以我使用虚拟生产的metadata进行画图 不废话直接上代码&#xff0c;先上python的代码的结果图 import matplotlib.pyplot as plt import numpy as np# 数据&#…
阅读更多...
Linux 交叉编译工具链格式 sqlite3编译示例

Linux 交叉编译工具链格式 sqlite3编译示例

1、交叉编译工具链 1.1 定义 交叉编译工具链是一个由编译器、连接器和解释器组成的综合开发工具集&#xff0c;它允许开发者在一个平台上&#xff08;例如高性能的PC或服务器&#xff09;编译生成另一个平台&#xff08;例如嵌入式系统或不同的操作系统和硬件架构&#xff09…
阅读更多...
spring boot初始化的几个总结

spring boot初始化的几个总结

spring intializr File->New->Project 注意&#xff1a;Spring Initializer中 Java版本选择模块已经不支持1.8了。 Spring Boot 3.x要求 Java最低版本为17&#xff0c; 最新的SpringBoot版本已经要求Java22了 所以&#xff0c;你可以升级Java版本&#xff0c;使用Spri…
阅读更多...
自定义指令directive

自定义指令directive

一、在src目录下创建一个directive文件夹 test.ts文件存放创建的自定义指令&#xff0c;index.ts用于接收所有指令进行统一处理 二、编写自定义指令 // test.ts文件 export default {// 写个自定义指令mounted(el: any, binding: any) {console.log(el, binding, "&qu…
阅读更多...
JVM相关总结

JVM相关总结

JVM的些许问题 1.JVM内存区域划分 2.JVM类加载过程 3.JVM的垃圾回收机制 1.JVM的内存区域划分 一个运行起来的Java进程就是一个JVM虚拟机,需要从操作系统申请一大片内存,就会把内存划分成几个区域,每个区域都有不同的作用 常见的面试题 2.JVM类加载过程 熟练背诵 ! ! !…
阅读更多...
Winform使用Flurl调用WebApi的基本用法

Winform使用Flurl调用WebApi的基本用法

微信公众号“CSharp编程大全"的文章《.NET超简单轻量级的HTTP请求组件Flurl》介绍了便捷构建URL及创建HTTP请求的.NET模块Flurl。与HttpClient相比,Flurl封装的更简捷易用&#xff0c;代码量更少。本文学习并测试基于Fluri调用WebApi的基本用法。   基于Fluri调用WebApi…
阅读更多...
怎么找python的运行路径

怎么找python的运行路径

1.命令行中执行&#xff1a; import sys print(sys.argv[0]) 执行后为空。 2. import os os.path.abspath(os.curdir) 3. import os os.getcwd()
阅读更多...
最新文章

Copyright @ 2022~2023