中秋特辑——3D动态礼盒贺卡（可监听鼠标移动）

不念不忘少年蓝@ 2023-10-16 12:51 5阅读 0赞

## 前言 ##

![在这里插入图片描述][0422b4369a3549b3a39da19588ab88f4.png]  
「作者主页」：[雪碧有白泡泡][Link 1]  
「个人网站」：[雪碧的个人网站][Link 2]  
「推荐专栏」：

> ★[java一站式服务][java] ★  
> ★ [React从入门到精通][React]★  
> ★[前端炫酷代码分享][Link 3] ★  
> ★ [从0到英雄，vue成神之路][0_vue]★  
> ★ [uniapp-从构建到提升][uniapp-]★  
> ★ [从0到英雄，vue成神之路][0_vue 1]★  
> ★ [解决算法，一个专栏就够了][Link 4]★  
> ★ [架构咱们从0说][0]★  
> ★ [数据流通的精妙之道][Link 5]★  
> ★[后端进阶之路][Link 6]★

![请添加图片描述][c7f3e6b8a7624a9eabbea77dbcbca119.jpeg]

#### 文章目录 ####

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

## 先上效果 ##

### 简单预览 ###

![在这里插入图片描述][020adb32fdf3440e9fb11c94e7f8d9ac.png]

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

![在这里插入图片描述][040decad083b4c549b43a88295a55983.png]  
可随鼠标移动

## 核心代码 ##

### 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` 类，则移除该类；否则添加该类。  
        ![在这里插入图片描述][c2eaf9d7d1434d2990e878ce3c3980e0.png]

### 部分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”用于控制卡片的显示效果。**  
![在这里插入图片描述][5340df0bf11347cf82cbc59079b48bb1.png]

## 精彩福利 ##

![在这里插入图片描述][6f7aa362b5d142d495428b63ab071746.png]

> 点击下方地址进入，里面有送书活动还有百度周边放送  
> [链接地址][Link 7]可以私信我进群哦![请添加图片描述][353ccb93391a4855b58ee77fa1ff70c7.jpeg]

[0422b4369a3549b3a39da19588ab88f4.png]: https://img-blog.csdnimg.cn/0422b4369a3549b3a39da19588ab88f4.png
[Link 1]: https://blog.csdn.net/Why_does_it_work?spm=1011.2415.3001.5343
[Link 2]: https://sprite.inscode.cc/
[java]: https://blog.csdn.net/why_does_it_work/category_12379581.html
[React]: http://t.csdn.cn/69y5b
[Link 3]: https://blog.csdn.net/why_does_it_work/category_12378617.html
[0_vue]: http://t.csdn.cn/X1kpw
[uniapp-]: https://blog.csdn.net/why_does_it_work/category_12363697.html
[0_vue 1]: https://blog.csdn.net/why_does_it_work/category_12376654.html
[Link 4]: https://blog.csdn.net/why_does_it_work/category_12381051.html
[0]: https://blog.csdn.net/why_does_it_work/category_12381055.html
[Link 5]: https://blog.csdn.net/why_does_it_work/category_12381058.html
[Link 6]: https://blog.csdn.net/why_does_it_work/category_12397959.html?spm=1001.2014.3001.5482
[c7f3e6b8a7624a9eabbea77dbcbca119.jpeg]: https://img-blog.csdnimg.cn/c7f3e6b8a7624a9eabbea77dbcbca119.jpeg
[020adb32fdf3440e9fb11c94e7f8d9ac.png]: https://img-blog.csdnimg.cn/020adb32fdf3440e9fb11c94e7f8d9ac.png
[040decad083b4c549b43a88295a55983.png]: https://img-blog.csdnimg.cn/040decad083b4c549b43a88295a55983.png
[c2eaf9d7d1434d2990e878ce3c3980e0.png]: https://img-blog.csdnimg.cn/c2eaf9d7d1434d2990e878ce3c3980e0.png
[5340df0bf11347cf82cbc59079b48bb1.png]: https://img-blog.csdnimg.cn/5340df0bf11347cf82cbc59079b48bb1.png
[6f7aa362b5d142d495428b63ab071746.png]: https://img-blog.csdnimg.cn/6f7aa362b5d142d495428b63ab071746.png
[Link 7]: http://t.csdn.cn/H20Od
[353ccb93391a4855b58ee77fa1ff70c7.jpeg]: https://img-blog.csdnimg.cn/353ccb93391a4855b58ee77fa1ff70c7.jpeg