css+js 选项卡动画效果

news2024/9/22 15:33:29

选项卡上下左右翻转动画效果

<template>
  <div class="web-box">
    <div class="topTitle">
      <div class="topTitle1">标题标题</div>
    </div>
    <div class="info-wrap">
      <div style="width: 100%;height: 100%;">
        <div class="system-list" v-if="navList.length>0">
          <el-carousel :loop="false" indicator-position="none" arrow="always" :autoplay="false"
                       style="width: 100%;height: 100%;">
            <el-carousel-item class="nav-list-1" v-for="(item,index) in navList" :key="index">
              <div class="nav-item" :title="b.sysName" v-for="(b,i) in item" :key="i">
                <div class="change-box" v-if="b.hasAuth">
                  <div class="picBox">
                    <div class="show nav-item-content">
                      <div class="nav-item-left">
                        <img class="sysIcon" :src="imgBaseUrl+b.sysIcon"/>
                      </div>
                      <div class="nav-item-right">
                        <div class="nav-item-name">{{b.sysName}}</div>
                      </div>
                    </div>
                    <div class="hide">
                      <div class="hide-name">{{b.sysName}}</div>
                      <div class="hide-text" @click="clickNav(b)">立即进入 ></div>
                    </div>
                  </div>
                </div>
                <div class="picBox" v-else>
                  <div class="show nav-item-content gray">
                    <div class="nav-item-left">
                      <img class="sysIcon" :src="imgBaseUrl+b.sysIcon"/>
                    </div>
                    <div class="nav-item-right">
                      <div class="nav-item-name">{{b.sysName}}</div>
                    </div>
                  </div>
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="system-list" v-else>
          <el-empty :image-size="50" description="暂无数据"></el-empty>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Swiper from 'swiper'; // 注意引入的是Swiper
  import 'swiper/css/swiper.min.css' // 注意这里的引入
  import $ from 'jquery';
  import { Index } from '@/components/Active/active'
  export default {
    name: "Index",
    data() {
      return {
        
        title: '',
        content: '',
        navList: [],
        navIndex: 0,
        nowList: [
            {hasAuth:true,sysIcon:'xxx.png',sysName:'xxx'},
            {hasAuth:true,sysIcon:'xxx.png',sysName:'xxx'},
            {hasAuth:true,sysIcon:'xxx.png',sysName:'xxx'},
            {hasAuth:true,sysIcon:'xxx.png',sysName:'xxx'},
            {hasAuth:true,sysIcon:'xxx.png',sysName:'xxx'},
            {hasAuth:true,sysIcon:'xxx.png',sysName:'xxx'},
        ]
      };
    },
    // 监听属性 类似于data概念
    computed: {

    },
    created() {
      this.getConfigData();
    },
    methods: {
      //系统应用
      getConfigData() {
          let dataList = this.nowList;
          let nowList = [];
          let arr = [];
          //每18个一页,多余的进入下一个
          for (let i = 0; i < dataList.length; i++) {
              arr.push(dataList[i]);
              if (i % 18 === 17 || i === dataList.length - 1) {
                  nowList.push(arr);
                  arr = [];
              }
          }
          this.navList = nowList;
          setTimeout(() => {
              new Index($(".system-list .change-box"))
              this.mySystemSwiper()
          })
      },
      mySystemSwiper() {
        let mySystemSwiper = new Swiper('.system-list', {
          slidesPerView: 5,
          navigation: {
            nextEl: '.swiper-button-next', // 右按钮
            prevEl: '.swiper-button-prev', // 左按钮
          },
        })
      },
    },
  };
</script>

<style scoped lang="scss">
  @import '~@/components/Active/active.css';
  .web-box {
    width: 100%;
    height: calc(100vh - 50px);
    background: #f4f9ff;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    .topTitle{
      width: 100%;
      height: 33vh;
      background-image: url("../assets/images/index/topbg.png");
      background-size: 100% 100%;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      .topTitle1{
        width: 12.4vw;
        height: 4.23vh;
        text-align: center;
        line-height: 4.23vh;
        background-image: url("../assets/images/index/titleBg.png");
        background-size: 100% 100%;
        font-size: 1.66vh;
        letter-spacing: 0.09vw;
        color: #3c4b70;
        font-weight: bolder;
      }
    }
      .info-wrap {
        width: 83.07vw;
        height: 57vh;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        background-color: #ffffff;
        border-radius: 1vh;
        box-shadow: -5px 5px 10px 0px rgba(86, 113, 207, 0.25);

        .system-list {
          margin-top: 2vh;
          width: 100%;
          height: calc(100% - 4.54vh);
          box-sizing: border-box;
          overflow: hidden;

          .el-carousel {
            padding: 0 3.5vw;
          }

          .nav-list-1 {
            width: 100%;
            height: 100%;
            display: flex;
            flex-wrap: wrap;
            align-content: start;
            padding-top: 3vh;

            .nav-item {
              width: 11.67vw;
              height: 11.04vh;
              margin:2vh 0.5vw;
              cursor: pointer;
              position: relative;
              .change-box, .picBox{
                width: 100%;
                height: 100%;
              }
              .nav-item-content{
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                padding: 0 0.5vw;
                background-size: 100% 100%;
              }
              .nav-item-left {
                width: 4vw;
                height: 4vw;
                display: flex;
                align-items: center;
                justify-content: center;

                .sysIcon {
                  width: 3vw;
                  height: 3vw;
                }

              }

              .gray{
                background-image: url("../assets/images/index/bg2.png") !important;
                .nav-item-left{
                  filter: grayscale(95%);
                }
                .nav-item-right{
                  color: #aeadad;
                }

              }

              .nav-item-right {
                width: 7vw;
                height: 100%;
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                padding: 1vh 0.5vw 1vh 1vw;

                .nav-item-name {
                  width: 5.5vw;
                  font-size: 1.5vh;
                  font-weight: bolder;
                }

                .nav-item-text {
                  width: 4vw;
                  height: 2vh;
                  line-height: 2vh;
                  text-align: center;
                  cursor: pointer;
                  background-color: rgba(255, 255, 255, 0.34);
                  border-radius: 0.8vh;
                  font-size: 1.2vh;
                }
              }

              &:nth-child(2n+1) .nav-item-content{
                color: #645b97;
                background-image: url("../assets/images/index/1.png");
              }

              &:nth-child(2n+2) .nav-item-content{
                color: #965c41;
                background-image: url("../assets/images/index/2.png");
              }

              &:nth-child(2n+3) .nav-item-content{
                color: #405f9a;
                background-image: url("../assets/images/index/3.png");
              }

              &:nth-child(2n+4) .nav-item-content{
                color: #a27a2d;
                background-image: url("../assets/images/index/4.png");
              }

              &:nth-child(2n+5) .nav-item-content{
                color: #257856;
                background-image: url("../assets/images/index/5.png");
              }

              &:nth-child(2n+6) .nav-item-content{
                color: #a27a2d;
                background-image: url("../assets/images/index/4.png");
              }

              &:nth-child(2n+7) .nav-item-content{
                color: #965c41;
                background-image: url("../assets/images/index/2.png");
              }

              &:nth-child(2n+8) .nav-item-content{
                color: #257856;
                background-image: url("../assets/images/index/5.png");
              }

              &:nth-child(2n+9) .nav-item-content{
                color: #645b97;
                background-image: url("../assets/images/index/1.png");
              }

              &:nth-child(2n+10) .nav-item-content{
                color: #405f9a;
                background-image: url("../assets/images/index/3.png");
              }
              &:nth-child(2n+11) .nav-item-content{
                color: #a27a2d;
                background-image: url("../assets/images/index/4.png");
              }

              &:nth-child(2n+12) .nav-item-content{
                color: #965c41;
                background-image: url("../assets/images/index/2.png");
              }

              &:nth-child(2n+13) .nav-item-content{
                color: #257856;
                background-image: url("../assets/images/index/5.png");
              }

              &:nth-child(2n+14) .nav-item-content{
                color: #645b97;
                background-image: url("../assets/images/index/1.png");
              }

              &:nth-child(2n+15) .nav-item-content{
                color: #405f9a;
                background-image: url("../assets/images/index/3.png");
              }
              &:nth-child(2n+16) .nav-item-content{
                color: #965c41;
                background-image: url("../assets/images/index/2.png");
              }

              &:nth-child(2n+17) .nav-item-content{
                color: #257856;
                background-image: url("../assets/images/index/5.png");
              }

              &:nth-child(2n+18) .nav-item-content{
                color: #645b97;
                background-image: url("../assets/images/index/1.png");
              }
            }
          }
        }
      }

      .swiper-button-prev {
        width: 2.86vw;
        height: 100%;
        background: #fff;
        left: 0;
        top: 0;
        margin: 0;
        color: #5e97ff;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        pointer-events: all !important;
        opacity: 1 !important;

        &:before {
          position: absolute;
          width: 0.94vw;
          height: 5.19vh;
          box-shadow: 0vh 0vh 0.37vh 0vh rgba(81, 103, 91, 0.4);
          border-radius: 0.37vh;
          font-size: 1.5vh;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          justify-content: center;
        }

        &.swiper-button-disabled:before {
          pointer-events: none !important;
          opacity: 0.4 !important;
        }

        &:after {
          content: "";
        }
      }

      .swiper-button-next {
        width: 2.86vw;
        height: 100%;
        background: #fff;
        right: 0;
        top: 0;
        margin: 0;
        color: #5e97ff;
        pointer-events: all !important;
        opacity: 1 !important;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;

        &.swiper-button-disabled:before {
          pointer-events: none !important;
          opacity: 0.4 !important;
        }

        &:before {
          position: absolute;
          width: 0.94vw;
          height: 5.19vh;
          box-shadow: 0vh 0vh 0.37vh 0vh rgba(81, 103, 91, 0.4);
          border-radius: 0.37vh;
          font-size: 1.5vh;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          justify-content: center;
        }

        &:after {
          content: "";
        }
      }




    .el-carousel::v-deep {

      .el-carousel__container {
        height: 100%;
      }

      .el-carousel__arrow {
        width: 28px;
        height: 72px;
        border-radius: 3px;
        background: #f0f2f5;
        color: rgba(94, 151, 255, 0.86);
        font-size: 24px;
        box-shadow: #DDD 0 2px 4px 1px;
        border: 1px solid #e5e8e7;

        &.el-carousel__arrow--left {
          left: -51px;

          i.el-icon-arrow-left:before {
            content: "\e792";
          }
        }

        &.el-carousel__arrow--right {
          right: -51px;

          i.el-icon-arrow-right:before {
            content: "\e791";
          }
        }
      }
    }

  }
</style>

components-Active文件夹：

1.active.css

.picBox{
  position: relative;
  transform-style: preserve-3d;
  transform-origin: 50% 50% -6vh;
  animation: 500ms ease-out 0ms 1 normal forwards;
}
.-left .picBox{
  position: relative;
  transform-style: preserve-3d;
  transform-origin: 50% 50% -6vw;
  animation: 500ms ease-out 0ms 1 normal forwards;
}
.-bottom .picBox{
  position: relative;
  transform-style: preserve-3d;
  transform-origin: 50% 50% -6vh;
  animation: 500ms ease-out 0ms 1 normal forwards;
}
.-right .picBox{
  position: relative;
  transform-style: preserve-3d;
  transform-origin: 50% 50% -6vw;
  animation: 500ms ease-out 0ms 1 normal forwards;
}

.show,
.hide{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.hide{
  color:#fff;
  /*background-color:#3c4b70;*/
  text-align:center;
  transform: translate3d(0,0,-1px);
  background-image: url("../../assets/images/index/bg1.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 1.6vh;
  font-weight: bolder;
  border-radius: 0.8vh;
  /* 3D空间内移动一个元素的位置 */
}
.hide .hide-name{


}
.hide .hide-text{
  margin: 1vh auto 0;
  width: 4vw;
  height: 2vh;
  line-height: 2vh;
  text-align: center;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.25);
  border-radius: 0.8vh;
  font-size: 1.2vh;
}

.in-top .hide,
.out-top .hide
{
  transform-origin: 0% 100% !important;
  transform: translate3d(0, -100%, 0) rotate3d(1,0,0,90deg);
}
.in-top .picBox{
  animation-name: in-top;
  animation-play-state: running;
}
.out-top .picBox{
  animation-name: out-top;
  animation-play-state: running;
}
@keyframes in-top {
  from  {transform: rotate3d(0,0,0,0deg)}
  to    {transform: rotate3d(-1,0,0,90deg)}
}

@keyframes out-top {
  from {transform: rotate3d(-1,0,0,90deg)}
  to   {transform: rotate3d(0,0,0,0deg)}
}
.in-right .hide,
.out-right .hide {
  transform-origin: 0% 0%;
  transform: translate3d(100%, 0, 0) rotate3d(0,1,0,90deg);
}
.in-right .picBox{
  animation-name: in-right;
  animation-play-state: running;
}
.out-right .picBox{
  animation-name: out-right;
  animation-play-state: running;
}
@keyframes in-right {
  from  {transform: rotate3d(0,0,0,0deg)}
  to    {transform: rotate3d(0,-1,0,90deg)}
}

@keyframes out-right {
  from  {transform: rotate3d(0,-1,0,90deg)}
  to    {transform: rotate3d(0,0,0,0deg)}
}

.in-bottom .hide,
.out-bottom .hide {
  transform-origin: 0% 0%;
  transform: translate3d(0, 100%, 0) rotate3d(-1,0,0,90deg);
}
.in-bottom .picBox{
  animation-name: in-bottom;
  animation-play-state: running;
}
.out-bottom .picBox{
  animation-name: out-bottom;
  animation-play-state: running;
}
@keyframes in-bottom {
  from  {transform: rotate3d(0,0,0,0deg)}
  to    {transform: rotate3d(1,0,0,90deg)}
}
@keyframes out-bottom {
  from  {transform: rotate3d(1,0,0,90deg)}
  to    {transform: rotate3d(0,0,0,0deg)}
}
.in-left .hide,
.out-left .hide {
  transform-origin: 100% 0;
  transform: translate3d(-100%,0,0) rotate3d(0,-1,0,90deg);
}
@keyframes in-left {
  from  {transform: rotate3d(0,0,0,0deg)}
  to    {transform: rotate3d(0,1,0,90deg)}
}
@keyframes out-left {
  from  {transform: rotate3d(0,1,0,90deg)}
  to    {transform: rotate3d(0,0,0,0deg)}
}
.in-left .picBox{
  animation-name: in-left;
  animation-play-state: running;
}
.out-left .picBox{
  animation-name: out-left;
  animation-play-state: running;
}

2.active.js

Index.prototype.init = function () {
    var self = this;
    this.nodes = [];
    Array.prototype.slice.call(self.node, 0).forEach(function (item, index) {
        self.nodes.push(self.update(item));
        self.bindEvents(item, index);
    });
};
Index.prototype.update = function (item) {
    return {
        w: item.offsetWidth,
        h: item.offsetHeight,
        l: item.offsetLeft,
        t: item.offsetTop
    }
};
Index.prototype.bindEvents = function (item, index) {
    var self = this;
    item.onmouseenter = function (e) {
      e.stopPropagation()
      self.addClass(e, item, 'in', index);
      return false;
    }
    item.onmouseleave = function (e) {
      self.addClass(e, item, 'out', index);
      return false;
    }
};
Index.prototype.addClass = function (e, item, state, index) {
    var direction = this.getDirection(e, index);
    var class_suffix = '';
    var class_durr = '';
    switch (direction) {
        case 0:
            class_suffix = '-top';
            break;
        case 1:
            class_suffix = '-right';
            break;
        case 2:
            class_suffix = '-bottom';
            break;
        case 3:
            class_suffix = '-left';
            break;
    }
    item.className = 'change-box';
    item.classList.add(class_suffix);
    item.classList.add(state + class_suffix);
};
Index.prototype.getDirection = function (e, index) {
    var w = this.nodes[index].w,
        h = this.nodes[index].h,
        x = Math.abs(e.offsetX) - w / 2 ,
        y = Math.abs(e.offsetY) - h / 2 ,
        w1 = Math.abs(e.offsetX),
        h1 = Math.abs(e.offsetY),
        w2 = w - Math.abs(e.offsetX),
        h2 = h - Math.abs(e.offsetY);
        // 取到x,y两点坐标
  let d = 0;
  if (x <= 0 && y <= 0 && w1 - h1 < 0){
    d = 3
  }else if (x <= 0 && y > 0){
    if (w1 - h2 <= 0){
      d = 3
    }else{
      d = 2
    }
  }else if (x > 0 && y <= 0){
    if (w2 - h1 >= 0){
      d = 0
    }else{
      d = 1
    }
  }else if (x > 0 && y > 0){
    if (w2 - h2 >= 0){
      d = 2
    }else{
      d = 1
    }
  }
    return d;//d的数值用于判断方向上下左右。
};
export function Index(node) {
  this.node = node;
  this.init();
}

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

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

相关文章

互联网加竞赛 python 机器视觉 车牌识别 - opencv 深度学习 机器学习

互联网加竞赛 python 机器视觉 车牌识别 - opencv 深度学习 机器学习

1 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 基于python 机器视觉 的车牌识别系统 &#x1f947;学长这里给一个题目综合评分(每项满分5分) 难度系数&#xff1a;3分工作量&#xff1a;3分创新点&#xff1a;3分 &#x1f9ff; 更多资…
阅读更多...
掌握iText：轻松处理PDF文档-高级篇-添加页眉和页脚

掌握iText：轻松处理PDF文档-高级篇-添加页眉和页脚

推荐语 本文介绍了如何使用iText编程库为PDF文档添加自定义的页眉和页脚。通过指定位置、大小、字体和颜色等属性&#xff0c;你可以将文本、图像或其他元素添加到每一页的固定位置&#xff0c;实现专业、可读的自定义页眉和页脚效果。这对于需要批量处理大量PDF文档或需要更精…
阅读更多...
基于轻量级GhostNet模型开发构建工业生产制造场景下滚珠丝杠传动表面缺陷图像识别系统

基于轻量级GhostNet模型开发构建工业生产制造场景下滚珠丝杠传动表面缺陷图像识别系统

轻量级识别模型在我们前面的博文中已经有过很多实践了&#xff0c;感兴趣的话可以自行移步阅读&#xff1a; 《移动端轻量级模型开发谁更胜一筹&#xff0c;efficientnet、mobilenetv2、mobilenetv3、ghostnet、mnasnet、shufflenetv2驾驶危险行为识别模型对比开发测试》 《基…
阅读更多...
YOLOv5改进 | 2023卷积篇 | AKConv轻量级架构下的高效检测（既轻量又提点）

YOLOv5改进 | 2023卷积篇 | AKConv轻量级架构下的高效检测（既轻量又提点）

一、本文介绍 本文给大家带来的改进内容是AKConv是一种创新的变核卷积&#xff0c;它旨在解决标准卷积操作中的固有缺陷&#xff08;采样形状是固定的&#xff09;&#xff0c;AKConv的核心思想在于它为卷积核提供了任意数量的参数和任意采样形状&#xff0c;能够使用任意数量…
阅读更多...
***Cpolar配置外网访问和Dashy

***Cpolar配置外网访问和Dashy

Dashy是一个开源的自托管的导航页配置服务，具有易于使用的可视化编辑器、状态检查、小工具和主题等功能。你可以将自己常用的一些网站聚合起来放在一起，形成自己的导航页。一款功能超强大，颜值爆表的可定制专属导航页工具 结合cpolar内网工具,我们实现无需部署到公网服务器…
阅读更多...
Spring Boot 3 整合 WebSocket (STOMP协议) 和 Vue 3 实现实时通信

Spring Boot 3 整合 WebSocket (STOMP协议) 和 Vue 3 实现实时通信

&#x1f680; 作者主页&#xff1a; 有来技术 &#x1f525; 开源项目&#xff1a; youlai-mall &#x1f343; vue3-element-admin &#x1f343; youlai-boot &#x1f33a; 仓库主页&#xff1a; Gitee &#x1f4ab; Github &#x1f4ab; GitCode &#x1f496; 欢迎点赞…
阅读更多...
基于 Webpack5 Module Federation 的业务解耦实践

基于 Webpack5 Module Federation 的业务解耦实践

前言 本文中会提到很多目前数栈中使用的特定名词&#xff0c;统一做下解释描述 dt-common&#xff1a;每个子产品都会引入的公共包(类似 NPM 包) AppMenus&#xff1a;在子产品中快速进入到其他子产品的导航栏&#xff0c;统一维护在 dt-common 中&#xff0c;子产品从 dt-com…
阅读更多...
【Https】工作流程

【Https】工作流程

HTTPS 也是⼀个应用层协议。是在 HTTP 协议的基础上引入了⼀个加密层。 前言 由于Http是明文传输&#xff0c;因此如果有人想修改/截获数据都是非常容易&#xff0c;因此就出现了运营商劫持问题。 加密基础知识 明文密钥>密文 加密 密文密钥>明文 解密 对称加密和非对…
阅读更多...
亚马逊云科技 re:Invent 大会 - ElastiCache Serverless模式来袭

亚马逊云科技 re:Invent 大会 - ElastiCache Serverless模式来袭

亚马逊云科技 re:Invent 大会 - ElastiCache Serverless模式来袭 本篇文章授权活动官方亚马逊云科技文章转发、改写权&#xff0c;包括不限于在 亚马逊云科技开发者社区, 知乎&#xff0c;自媒体平台&#xff0c;第三方开发者媒体等亚马逊云科技官方渠道。 文章目录 亚马逊云…
阅读更多...
jenkins 运行接口自动化测试脚本，安装第三方依赖库的一些总结

jenkins 运行接口自动化测试脚本，安装第三方依赖库的一些总结

之前在做接口自动化时&#xff0c;jenkins 执行 job 安装 requirements.txt 中的第三方依赖库时折腾了许久&#xff0c;网上查的解决方案均未生效&#xff0c;后来找出一条解决方法&#xff0c;做个记录&#xff0c;希望帮助到遇到同样问题的小伙伴。 我们都知道可以通过生成 …
阅读更多...
软考机考考试第一批经验分享

软考机考考试第一批经验分享

由于机考的特殊性&#xff0c;考试环境与传统笔试环境有所不同。下面是与考试环境相关的总结&#xff1a; 草稿纸&#xff1a;考场提供足够数量的草稿纸&#xff0c;每位考生都会分发一张白纸作为草稿纸。在草稿纸上需要写上准考证号。如果不够用&#xff0c;可以向监考老师再次…
阅读更多...
Android 11.0 framework关于systemUI状态栏透明背景的功能实现

Android 11.0 framework关于systemUI状态栏透明背景的功能实现

1.概述 在11.0的系统rom产品定制化开发中，在对于系统原生SystemUI的状态栏背景在沉浸式状态栏的 情况下默认是会随着背景颜色的变化而改变的，在一些特定背景下状态栏的背景也是会改变的，所以由于产品开发需要 要求需要设置状态栏背景为透明的，所以就需要在Activity创建的时…
阅读更多...
排序算法(二)-冒泡排序、选择排序、插入排序、希尔排序、快速排序、归并排序、基数排序

排序算法(二)-冒泡排序、选择排序、插入排序、希尔排序、快速排序、归并排序、基数排序

排序算法(二) 前面介绍了排序算法的时间复杂度和空间复杂数据结构与算法—排序算法&#xff08;一&#xff09;时间复杂度和空间复杂度介绍-CSDN博客&#xff0c;这次介绍各种排序算法——冒泡排序、选择排序、插入排序、希尔排序、快速排序、归并排序、基数排序。 文章目录 排…
阅读更多...
web前端之正弦波浪动功能、repeat、calc

web前端之正弦波浪动功能、repeat、calc

MENU 效果图htmlstylecalcrepeat 效果图 html <div class"grid"><span class"line"></span><span class"line"></span><span class"line"></span><span class"line"><…
阅读更多...
Python采集知乎专栏文章保存成pdf

Python采集知乎专栏文章保存成pdf

嗨喽&#xff0c;大家好呀~这里是爱看美女的茜茜呐 环境使用: Python 3.8 Pycharm wkhtmltopdf 软件 – 文末获取 模块使用: requests >>> pip install requests 数据请求 parsel >>> pip install parsel 数据解析 re >>> 内置模块 不需要安装…
阅读更多...
linux 防火墙systemctl (个人笔记)

linux 防火墙systemctl (个人笔记)

查看 systemctl status firewalld 开启 systemctl start firewalld 关闭 systemctl stop firewalld.service 查看所有 firewall-cmd --zonepublic --list-ports 开放端口&#xff1a;// --permanent 永久生效,没有此参数重启后失效 firewall-cmd --zonepublic --add-port9527/…
阅读更多...
[PyTorch][chapter 7][李宏毅深度学习][深度学习简介]

[PyTorch][chapter 7][李宏毅深度学习][深度学习简介]

前言&#xff1a; 深度学习常用的开发平台 TensorFlow torch theano caffe DSSTNE mxnet libdnn CNTK 目录&#xff1a; 1&#xff1a; 深度学习发展历史 2&#xff1a; DeepLearning 工程简介 3&#xff1a; DNN 简介 一 发展历史 二 DeepLearning 工程简介 深度学习三…
阅读更多...
如何删除/替换3D模型的材质贴图

如何删除/替换3D模型的材质贴图

在线工具推荐&#xff1a; 3D数字孪生场景编辑器 - GLTF/GLB材质纹理编辑器 - 3D模型在线转换 - Three.js AI自动纹理开发包 - YOLO 虚幻合成数据生成器 - 三维模型预览图生成器 - 3D模型语义搜索引擎 在3D设计和动画领域&#xff0c;材质是呈现真实感和逼真效果的关键因…
阅读更多...
从广东到俄罗斯：一段跨越万里的电子消费展之旅

从广东到俄罗斯：一段跨越万里的电子消费展之旅

作为一名广东电子消费品行业的从业者&#xff0c;我们经常要奔赴全球不同国家拓展海外业务&#xff0c;而展会就是重要的平台。最近大家在热议的俄罗斯国际消费类电子电器展我参加过一届&#xff0c;跨越万里的旅程&#xff0c;让我深刻体会到了这种国际展览的魅力和挑战。 我参…
阅读更多...
Mac部署Odoo环境-Odoo本地环境部署

Mac部署Odoo环境-Odoo本地环境部署

Odoo本地环境部署 安装Python安装Homebrew安装依赖brew install libxmlsec1 Python运行环境Pycharm示例配置 Mac部署Odoo环境-Odoo本地环境部署 安装Python 新机&#xff0c;若系统没有预装Python&#xff0c;则安装需要版本的Python 点击查询Python官网下载 安装Homebrew 一…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023