css鼠标悬浮动效

最新推荐文章于 2024-02-04 15:13:50 发布

七月_Mo

最新推荐文章于 2024-02-04 15:13:50 发布

阅读量894

点赞数 9

分类专栏： css 文章标签： css css3 前端

本文链接：https://blog.csdn.net/Mozifei73/article/details/136020888

版权

css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文介绍了如何使用CSS和JavaScript在HTML中创建一个可交互的3D切换面板，当鼠标悬停时，项目或产品项以3D旋转方式显示和隐藏，通过路由跳转实现不同的功能区

摘要由CSDN通过智能技术生成

展示效果图

css样式

完整代码复制体验（图片就不提供了，自己随便找一些）

模板部分

里面的事件只是为了做路由的跳转，就不展示出来了

<div class="canvas-main">
      <div class="all" @mouseover="hideOtherElements1(1)" @mouseleave="showOtherElements(1)" v-if="element.element1">
        <div class="lefter" @click="handleProject('项目1')">
          <div class="text">项目1</div>
        </div>
        <div class="left" @click="handleProject('项目2')">
          <div class="text">项目2</div>
        </div>
        <div class="center" @click="handleProject('项目3')">
          <div class="explainer"><span>项目</span></div>
          <div class="text">项目3</div>
        </div>
        <div class="right" @click="handleProject('项目4')">
          <div class="text">项目4</div>
        </div>
        <div class="righter" @click="handleProject('项目5')">
          <div class="text">项目5</div>
        </div>
      </div>
      <div v-if="element.element2" class="all" @mouseover="hideOtherElements2(2)" @mouseleave="showOtherElements(2)">
        <div class="lefter"></div>
        <div class="left" @click="handleProject('产品3')">
          <div class="text">产品3</div>
        </div>
        <div class="center" @click="handleProject('产品1')">
          <div class="explainer"><span>产品</span></div>
          <div class="text">产品1</div>
        </div>
        <div class="right" @click="handleProject('产品2')">
          <div class="text">产品2</div>
        </div>
        <div class="righter"></div>
      </div>
    </div>

css部分

.canvas-main {
    position: absolute;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;

    .all {
      position: relative;
      justify-content: center;
      height: 281px;
      margin: 0 260px;
      -webkit-transform: perspective(300px) rotateX(20deg);
      transform: perspective(300px) rotateX(20deg);
      -webkit-transform-style: preserve-3d;
      transform-style: preserve-3d;
      -webkit-perspective: 10px;
      perspective: 10px;
      -webkit-perspective-origin: center center;
      perspective-origin: center center;
      transition: all 1.3s ease-out;
      will-change: perspective;
    }

    .all:hover {
      display: flex;
      -webkit-transform: perspective(10000px) rotateX(0deg);
      transform: perspective(10000px) rotateX(0deg);
      -webkit-perspective: 1000px;
      perspective: 1000px;
      transition: all 1.3s ease-in;
    }
    .all:hover .text {
      opacity: 1;
    }
    .all:hover > div {
      opacity: 1;
      transition-delay: 0s;
    }
    .all:hover .explainer {
      opacity: 0;
    }

    .left,
    .center,
    .right,
    .lefter,
    .righter {
      position: relative;
      width: 250px;
      height: 280px;
      background-color: #58d;
      background-repeat: no-repeat;
      background-position: center center;
      background-size: contain;
      background-blend-mode: color-burn;
      border: 1px solid rgba(255, 255, 255, 0.488);
      border-radius: 10px;
      box-shadow: 0 0 20px 5px rgba(100, 100, 255, 0.4);
      -webkit-transform-style: preserve-3d;
      transform-style: preserve-3d;
      cursor: pointer;
      opacity: 0;
      transition: all 0.3s ease;
      transition-delay: 1s;
    }
    .left:hover,
    .center:hover,
    .right:hover,
    .lefter:hover,
    .righter:hover {
      background-color: #ccf;
      box-shadow: 0 0 30px 10px rgba(100, 100, 255, 0.6);
    }

    .text {
      position: absolute;
      bottom: 0;
      left: 5px;
      color: #fff;
      text-shadow: 0 0 5px rgba(100, 100, 255, 0.6);
      -webkit-transform: translateY(30px);
      transform: translateY(30px);
      opacity: 0;
      transition: all 0.3s ease;
      will-change: transform;
    }

    .lefter {
      background-image: url(../assets/images/image/organization-512.png);
      -webkit-transform: translateX(-180px) translateZ(-50px) rotateY(-5deg);
      transform: translateX(-180px) translateZ(-50px) rotateY(-5deg);
    }

    .left {
      background-image: url(../assets/images/image/creative_draw-512.png);
      -webkit-transform: translateX(-150px) translateZ(-25px) rotateY(-5deg);
      transform: translateX(-150px) translateZ(-25px) rotateY(-5deg);
    }

    .center {
      position: absolute;
      top: 0;
      background-image: url(../assets/images/image/app_window-512.png);
      opacity: 1;
    }

    .right {
      background-image: url(../assets/images/image/cloud_weather-512.png);
      -webkit-transform: translateX(150px) translateZ(-25px) rotateY(5deg);
      transform: translateX(150px) translateZ(-25px) rotateY(5deg);
    }

    .righter {
      background-image: url(../assets/images/image/search-512.png);
      -webkit-transform: translateX(180px) translateZ(-50px) rotateY(5deg);
      transform: translateX(180px) translateZ(-50px) rotateY(5deg);
    }

    .explainer {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      color: #fff;
      font-weight: 300;
      font-size: 2rem;
      text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
      background: linear-gradient(-45deg, #24ff71ca, #9b4effb7);
      background-color: #303050;
      border-radius: 10px;
      transition: all 0.6s ease;
    }
  }