前端笔记-day11

news2025/1/21 8:56:38

文章目录

    • 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);
    }
}

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

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

普元EOS学习笔记-创建精简应用

普元EOS学习笔记-创建精简应用

前言 本文依旧基于EOS8.3进行描述。 在上一篇文章《EOS8.3精简版安装》中&#xff0c;我们了解到普元预编译好的EOS的精简版压缩包&#xff0c;安装后&#xff0c;只能进行低开&#xff0c;而无法高开。 EOS精简版的高开方式是使用EOS开发工具提供的IDE&#xff0c;创建一个…
阅读更多...
nginx架构学习

nginx架构学习

前言 这篇文章主要记录下对nginx架构的学习记录。 架构设计 优秀的模块化设计 高度模块化的设计是Nginx的架构基础。在Nginx中&#xff0c;除了少量的核心代码&#xff0c;其他一切皆 为模块。 在这5种模块中&#xff0c;配置模块与核心模块都是与Nginx框架密切相关的&…
阅读更多...
【ESP32】打造全网最强esp-idf基础教程——14.VFS与SPIFFS文件系统

【ESP32】打造全网最强esp-idf基础教程——14.VFS与SPIFFS文件系统

VFS与SPIFFS文件系统 这几天忙着搬砖&#xff0c;差点没时间更新博客了&#xff0c;所谓一日未脱贫&#xff0c;打工不能停&#xff0c;搬砖不狠&#xff0c;明天地位不稳呀。 不多说了&#xff0c;且看以下内容吧~ 一、VFS虚拟文件系统 先来看下文件系统的定义&#x…
阅读更多...
zabbix监控进阶：如何分时段设置不同告警阈值（多阈值告警）

zabbix监控进阶：如何分时段设置不同告警阈值（多阈值告警）

作者 乐维社区&#xff08;forum.lwops.cn&#xff09;乐乐 在生产环境中&#xff0c;企业的业务系统状态并不是一成不变的。在业务高峰时段&#xff0c;如节假日、促销活动或特定时间段&#xff0c;系统负载和用户访问量会大幅增加&#xff0c;此时可能需要设置更高的告警阈值…
阅读更多...
网络基础：静态路由

网络基础：静态路由

静态路由是一种由网络管理员手动配置的路由方式&#xff0c;用于在网络设备&#xff08;如路由器或交换机&#xff09;之间传递数据包。与动态路由不同&#xff0c;静态路由不会根据网络状态的变化自动调整。 不同厂商的网络设备在静态路由的配置上有些许差异&#xff1b;下面…
阅读更多...
qt文件如何打包成一个独立的exe文件

qt文件如何打包成一个独立的exe文件

QT官方给我们安装好了打包软件&#xff0c;就在你QT安装的位置 把这个在cmd打开C:\Qt\6.7.1\mingw_64\bin\windeployqt6.exe&#xff08;或复制地址&#xff09; 然后把要打包项目的exe复制到新的空文件夹&#xff0c;再复制他的地址 按回车后生成新文件 再下载打包软件&#…
阅读更多...
Arduino IDE 的安装与esp32项目的创建

Arduino IDE 的安装与esp32项目的创建

1打开官网下载 官网 1-1下载完成后安装即可&#xff0c;会弹出一些按安装提示点击安装 2切换为中文模式 2-1点击Flie&#xff0c;在点击图中高亮的位置&#xff0c;进入 2-2选择语言 3创建esp32项目 3-1在线安装&#xff08;不一定成功&#xff0c;可以一直试&#xff09; …
阅读更多...
树莓派3B读写EEPROM芯片AT24C256

树莓派3B读写EEPROM芯片AT24C256

AT24C256是一个Atmel公司的EEPROM存储芯片&#xff0c;容量是256K个bit&#xff08;也就是32K字节&#xff09;&#xff0c;I2C接口&#xff0c;而树莓派正好有I2C接口&#xff0c;如下图蓝框中的4个IO口&#xff0c; 把AT24C256和这4个口接在一起&#xff0c;这样硬件就准备好…
阅读更多...
观察者模式在金融业务中的应用及其框架实现

观察者模式在金融业务中的应用及其框架实现

引言 观察者模式&#xff08;Observer Pattern&#xff09;是一种行为设计模式&#xff0c;它定义了一种一对多的依赖关系&#xff0c;使得多个观察者对象同时监听某一个主题对象。当这个主题对象发生变化时&#xff0c;会通知所有观察者对象&#xff0c;使它们能够自动更新。…
阅读更多...
【NodeJs】入门

【NodeJs】入门

目录 一、前导 二、 url模块 三、path模块 四、buffer模块 五、fs模块 六、stream流模块 七、os模块 八、crypto模块 九、util模块 十、http模块 nodejs官网 Node.js — 在任何地方运行 JavaScript nmp是Node.js包管理器&#xff0c;用来安装各种库、框架和工具&…
阅读更多...
js自定义内容生成二维码，qrcodejs的使用

js自定义内容生成二维码，qrcodejs的使用

qrcodejs qrcodejs是基于原生js的文本转换成二维码的库&#xff0c;轻量且使用方法简单&#xff0c;它的实现原理是通过canvas将重新编码的内容绘制在页面元素上&#xff0c; 使用qrcodejs时可以选择引入它的cdn或者使用npm下载 <script type"text/javascript" …
阅读更多...
Nacos配置中心客户端源码分析（一）: 客户端如何初始化配置

Nacos配置中心客户端源码分析（一）: 客户端如何初始化配置

本文收录于专栏 Nacos 推荐阅读&#xff1a;Nacos 架构 & 原理 文章目录 前言一、NacosConfigBeanDefinitionRegistrar二、NacosPropertySourcePostProcessor三、AbstractNacosPropertySourceBuilder总结「AI生成」 前言 专栏前几篇文章主要讲了Nacos作为服务注册中心相关…
阅读更多...
vmware安装debian11

vmware安装debian11

安装vmware16 下载镜像 https://repo.huaweicloud.com/debian-cd/ https://repo.huaweicloud.com/debian-cd/11.7.0/amd64/iso-dvd/ 安装 安装完成之后重启&#xff0c;输入账号密码进入&#xff0c;安装ssh服务器即可使用
阅读更多...
park unpark

park unpark

目录 一、基本使用 二、特点&#xff08;与 wait/notify 对比&#xff09; 三、park & unpark 的原理 一、基本使用 1. park 和 unpark 是 LockSupport 中的方法 2. LockSupport.park();// 暂停线程&#xff0c;线程进入 WAIT 状态 3. LockSupport.unpark(被暂停的线…
阅读更多...
数据产品经理知识库构建

数据产品经理知识库构建

概述 数据产品经理是企业中负责管理和推动数据产品的专业人员。他们利用数据来辅助决策&#xff0c;优化产品&#xff0c;提升用户体验。用STAR法则&#xff08;Situation, Task, Action, Result&#xff09;来介绍数据产品经理的角色&#xff0c;应该学习的数据产品&#…
阅读更多...
Linux安装Node-RED并实现后台运行及开机启动

Linux安装Node-RED并实现后台运行及开机启动

首先确保系统中已近成功安装Node.js&#xff0c;并保证需要的合适版本&#xff1a; 关于node.js的安装可以参考我的另一篇博文:《AliyunOS安装Node.js》。 然后就可以使用npm工具安装Node-RED了&#xff0c;很简单使用如下命令&#xff1a; sudo npm install -g --unsafe-per…
阅读更多...
各维度卷积神经网络内容收录

各维度卷积神经网络内容收录

各维度卷积神经网络内容收录 卷积神经网络&#xff08;CNN&#xff09;&#xff0c;通常是指用于图像分类的2D CNN。但是&#xff0c;现实世界中还使用了其他两种类型的卷积神经网络&#xff0c;即1D CNN和3D CNN。 在1D CNN中&#xff0c;内核沿1个方向移动。1D CNN的输入和…
阅读更多...
可信和可解释的大语言模型推理-RoG

可信和可解释的大语言模型推理-RoG

大型语言模型&#xff08;LLM&#xff09;在复杂任务中表现出令人印象深刻的推理能力。然而&#xff0c;LLM在推理过程中缺乏最新的知识和经验&#xff0c;这可能导致不正确的推理过程&#xff0c;降低他们的表现和可信度。知识图谱(Knowledge graphs, KGs)以结构化的形式存储了…
阅读更多...
模板方法模式在金融业务中的应用及其框架实现

模板方法模式在金融业务中的应用及其框架实现

引言 模板方法模式&#xff08;Template Method Pattern&#xff09;是一种行为设计模式&#xff0c;它在一个方法中定义一个算法的框架&#xff0c;而将一些步骤的实现延迟到子类中。模板方法允许子类在不改变算法结构的情况下重新定义算法的某些步骤。在金融业务中&#xff…
阅读更多...
Python技术笔记汇总（含语法、工具库、数科、爬虫等）

Python技术笔记汇总（含语法、工具库、数科、爬虫等）

对Python学习方法及入门、语法、数据处理、数据可视化、空间地理信息、爬虫、自动化办公和数据科学的相关内容可以归纳如下&#xff1a; 一、Python学习方法 分解自己的学习目标&#xff1a;可以将学习目标分基础知识&#xff0c;进阶知识&#xff0c;高级应用&#xff0c;实…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023