前言

「作者主页」：雪碧有白泡泡

「个人网站」：雪碧的个人网站

「推荐专栏」：

★java一站式服务 ★

★ React从入门到精通★

★前端炫酷代码分享 ★

★ 从0到英雄，vue成神之路★

★ uniapp-从构建到提升★

★ 从0到英雄，vue成神之路★

★ 解决算法，一个专栏就够了★

★ 架构咱们从0说★

★ 数据流通的精妙之道★

★后端进阶之路★

文章目录

• 前言
• 先上效果
• • 简单预览
  • 核心代码
  • • script代码
    • 部分css代码
    • 精彩福利

      先上效果

      简单预览

      

      这里可以直接 看查源码内容， 刷新，最后一个是 放大**跳转网页** 点击运行后即可有如下效果，拖动鼠标即可

      

      可随鼠标移动

      核心代码

      script代码

      代码解释

      1. 当 top 元素被点击时，给 content 元素添加 moveOut 类，并在 500 毫秒后给 card 元素添加 showCard 类。

      2. 当鼠标移动到 card 元素上时，给 imgBox 元素添加 imgBoxAct 类；当鼠标移出 card 元素时，移除 imgBoxAct 类。

      3. 定义了四个函数：

         • hasClass(obj, cls)：判断 obj 元素是否包含 cls 类。

         • addClass(obj, cls)：给 obj 元素添加 cls 类。

         • Object.prototype.removeClass：给 obj 元素移除 cls 类。

         • toggleClass(obj, cls)：如果 obj 元素包含 cls 类，则移除该类；否则添加该类。

           

      部分css代码

      这段代码是一个CSS样式表，用于设计一个网页的背景和一个卡片的样式。以下是每个部分的解释：

      .bg{
        width: 100vw;
        height: 100vh;
        background:#f39c72;
        padding-top: 140px;
        font-family: "楷体","楷体_GB2312";
      }
      

      这段代码定义了一个类名为“bg”的元素，它的宽度和高度分别为视口的宽度和高度，背景颜色为橙色，顶部有一个内边距为140像素的空白区域，字体为“楷体”。

      .bg:before{
        background-size:cover;
        background:url(../images/moonCakeBg.png) repeat center;
        content:"";
        position:absolute;
        top:0;
        bottom:0;
        right:0;
        left:0;
        animation:bgMove 10s infinite linear;
      }
      

      这段代码定义了一个伪元素，它是“bg”元素的前置元素。它的背景图片是一个月饼的图片，重复平铺，居中对齐。它的位置是绝对定位，占据整个视口，有一个名为“bgMove”的动画，持续时间为10秒，无限循环，线性变化。

      .card{
        position:absolute;
        z-index: 4;
        width:350px;
        height:600px;
        left:50%;
        top:50%;
        display: none;
        cursor: pointer;
        transform:translate(-50%,-50%);
        background: url(../images/cardBg2.png)no-repeat;
        background-size:100% 100%;
        transform-style:preserve-3d;
        perspective:1700px;
        background-color:#6375fd;
        box-shadow:inset 300px 0 50px rgba(0,0,0,.5),0 20px 100px rgba(0,0,0,.5);
        transition:1s;
      }
      

      这段代码定义了一个类名为“card”的元素，它是一个卡片。它的位置是绝对定位，居中对齐。它的宽度和高度分别为350像素和600像素。它的背景图片是一个蓝色的图片，不重复平铺，居中对齐。它的变换样式是3D保留，透视点距离为1700像素。它的背景颜色是深蓝色，有一个阴影效果。它的过渡效果持续1秒。

      .card:hover{
        /* perspective:2000px; */
        box-shadow:inset 20px 0 50px rgba(0,0,0,.5),0 20px 100px rgba(0,0,0,.5);
      }
      

      这段代码定义了当鼠标悬停在“card”元素上时的样式。它的阴影效果会变化。

      .card .imgBox{
        width:100%;
        height:100%;
        position:relative;
        transform-origin:left;
        background: url(../images/ByteDance.png)no-repeat;
        background-size:100% 100%;  
        transition:1s;
      }
      .imgBoxAct{
        background: url(../images/cardBg1.png)no-repeat!important;
        background-size:100% 100%!important; 
        
      }
      .card:hover .imgBox{
        transform:rotatey(-135deg);
      }
      

      这段代码定义了一个类名为“imgBox”的元素，它是“card”元素的子元素，用于显示卡片的图片。它的宽度和高度分别为100%。它的位置是相对定位。它的变换原点是左侧。不重复平铺，居中对齐。它的过渡效果持续1秒。当鼠标悬停在“card”元素上时，它会旋转135度。此外，还定义了一个类名为“imgBoxAct”的元素，用于显示卡片的背景图片。

      .card .details{
        position:absolute;
        top:0;
        left:0;
        box-sizing:border-box;
        z-index:-1;
        transition: all .2s ease-in-out;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 100%;
        height: 100%;
        padding: 130px 40px 50px;
      }
      .detailsContent p{
        font-size: 16px;
        line-height: 24px;
        color: #302a28;
      }
      .card .details:hover{
        transform: scale(1.1);
        text-shadow:10px 40px 50px #6375fd;
      }
      h3{
        font-size: 24px;
        line-height: 24px;
        color: #2d6da7;
      }
      p{
        font-size: 14px;
        line-height: 8px;
        color: #2d6da7;
      }
      

      这段代码定义了一个类名为“details”的元素，它是“card”元素的子元素，用于显示卡片的详细信息。它的位置是绝对定位，左上角对齐。它的盒模型是border-box。它的z-index为-1，表示它在“card”元素的下方。它的过渡效果持续0.2秒。它的子元素是一个标题和一段文本。当鼠标悬停在“details”元素上时，它会放大1.1倍，并且有一个文本阴影效果。

      .showCard{
        display: block!important;
        animation: showCard 1s  linear!important;
        animation-fill-mode:forwards!important;
      }
      @keyframes bgMove{
        0%{
          background-position:0px 0px;
        }
         100%{
          background-position:200px 298px;
        }
      }
      @keyframes showCard{
        0%{
          transform:translate(-80%,140%) scale(1);
        }
        70%{
          transform:translate(-10%,-40%) scale(1.4);
        }
         100%{
          transform:translate(-10%,-50%) scale(1.2);
        }
      }
      

      这段代码定义了一个类名为“showCard”的元素，用于显示卡片。它的显示方式为块级元素。它有一个名为“showCard”的动画，持续时间为1秒，线性变化。动画结束后，元素的状态将保持在最后一帧。此外，还定义了两个关键帧动画，分别是“bgMove”和“showCard”。其中，“bgMove”用于控制背景图片的移动，“showCard”用于控制卡片的显示效果。

      

      精彩福利

      

      点击下方地址进入，里面有送书活动还有百度周边放送

      链接地址可以私信我进群哦