前端练习小项目——包变脸的，老弟 ！

笑看天下无敌手  金牌会员 | 2024-8-27 12:11:59 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 974|帖子 974|积分 2922

        前言：在学习完HTML、CSS、JavaScript之后，我们就可以开始做一些小项目了，本篇文章所讲的小项目为——包变脸的，老弟。
   

  ✨✨✨这里是秋刀鱼不做梦的BLOG
  ✨✨✨想要了解更多内容可以访问我的主页秋刀鱼不做梦-CSDN博客
  先让我们看一下结果：


        那么我们怎样去实现这样的小案例呢？在下文中我们对每一段重要的代码都进行了解释，读者可以根据解释对代码进行明白。

1.骨架 —— HTML代码

HTML代码：
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1">
  8.     <title>秋刀鱼不做梦</title>
  9.     <!-- 引入外部样式表 -->
  10.     <link rel="stylesheet" href="./表情.css">
  11. </head>
  13. <body>
  14.     <!-- 表情图标的列表 -->
  15.     <ul id="emoji">
  16.         <!-- 第一层，深度为0.2 -->
  17.         <li class="layer" data-depth="0.2">
  18.             <!-- 面部 -->
  19.             <div class="face"></div>
  20.         </li>
  21.         <!-- 第二层，深度为0.3 -->
  22.         <li class="layer" data-depth="0.3">
  23.             <!-- 光泽 -->
  24.             <div class="shine"></div>
  25.         </li>
  26.         <!-- 第三层，深度为0.8 -->
  27.         <li class="layer" data-depth="0.8">
  28.             <!-- 左眼 -->
  29.             <div class="eye left"></div>
  30.         </li>
  31.         <!-- 第三层，深度为0.8 -->
  32.         <li class="layer" data-depth="0.8">
  33.             <!-- 右眼 -->
  34.             <div class="eye right"></div>
  35.         </li>
  36.         <!-- 第三层，深度为0.8 -->
  37.         <li class="layer" data-depth="0.8">
  38.             <!-- 嘴巴 -->
  39.             <div class="mouth"></div>
  40.         </li>
  41.     </ul>
  42. </body>
  44. </html>
复制代码
        固然，当我们搭建好HTML骨架之后，我们现在还是看不到任何的结果的，接下来然我们对其进行修饰。

2.修饰 —— CSS代码

CSS代码：
  1. :root {
  2.     --shine: rgb(251, 136, 200); /* 定义自定义属性：光泽颜色 */
  3.     --primary-color: rgb(248, 175, 40); /* 定义自定义属性：主色 */
  4.     --secondary-color: rgb(230, 63, 2); /* 定义自定义属性：次色 */
  5.     --accent-color: rgb(58, 25, 25); /* 定义自定义属性：强调色 */
  6.     --black-fade: rgb(120, 40, 6); /* 定义自定义属性：淡化的黑色 */
  7.     --dark-blue: rgb(84, 84, 174); /* 定义自定义属性：深蓝色 */
  8. }
  10. * {
  11.     padding: 0; /* 重置所有元素的内边距为0 */
  12.     margin: 0; /* 重置所有元素的外边距为0 */
  13.     list-style: none; /* 去掉列表项的默认样式 */
  14. }
  16. body {
  17.     display: flex; /* 采用flex布局 */
  18.     align-items: center; /* 垂直方向居中 */
  19.     justify-content: center; /* 水平方向居中 */
  20.     height: 100vh; /* 高度设为视口高度 */
  21.     overflow: hidden; /* 隐藏超出视口的内容 */
  22.     background-color: #9197f1; /* 设置背景颜色为淡紫色 */
  23. }
  25. #emoji {
  26.     position: relative; /* 相对定位 */
  27.     width: 450px; /* 宽度设为450像素 */
  28.     height: 400px; /* 高度设为400像素 */
  29.     transform: translate3d(0, 0, 0); /* 启用3D转换，保持默认值 */
  30. }
  32. .layer {
  33.     position: absolute; /* 绝对定位 */
  34.     width: 100%; /* 宽度设为父元素的100% */
  35.     height: 100%; /* 高度设为父元素的100% */
  36. }
  38. .face {
  39.     position: absolute; /* 绝对定位 */
  40.     top: 0; right: 0; bottom: 0; left: 0; /* 四边都设为0以居中 */
  41.     margin: auto; /* 自动计算外边距，以保证居中 */
  42.     width: 230px; /* 宽度设为230像素 */
  43.     height: 230px; /* 高度设为230像素 */
  44.     background-color: #FECA32; /* 设置背景颜色为黄色 */
  45.     border-radius: 100%; /* 圆形边框 */
  46.     box-shadow: inset rgba(0, 0, 0, 0.4) 0 0 30px; /* 内部投影，制造深度感 */
  47.     transition: .3s; /* 设置过渡效果时间为0.3秒 */
  48. }
  50. .shine {
  51.     position: absolute; /* 绝对定位 */
  52.     top: 0; right: 0; bottom: 0; left: 0; /* 四边都设为0以居中 */
  53.     margin: auto; /* 自动计算外边距，以保证居中 */
  54.     width: 194px; /* 宽度设为194像素 */
  55.     height: 206px; /* 高度设为206像素 */
  56.     background: linear-gradient(to bottom, #FFFFFF,
  57.             rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0)); /* 设置线性渐变背景 */
  58.     border-radius: 100%; /* 圆形边框 */
  59.     opacity: 0.8; /* 设置不透明度为0.8 */
  60. }
  62. .eye {
  63.     width: 24px; /* 眼睛的宽度 */
  64.     height: 38px; /* 眼睛的高度 */
  65.     background-color: #A1620F; /* 眼睛的背景颜色 */
  66.     border-radius: 100%; /* 圆形边框 */
  67.     box-shadow: inset rgba(0, 0, 0, 0.5) 0 6px 12px,
  68.         rgba(255, 255, 255, 0.2) 0 2px 0 2px; /* 内部和外部的阴影 */
  69.     transition: .3s; /* 过渡效果时间为0.3秒 */
  70. }
  72. .eye.left {
  73.     position: absolute; /* 绝对定位 */
  74.     top: 0; right: 70px; bottom: 40px; left: 0; /* 通过设置边距实现眼睛的位置 */
  75.     margin: auto; /* 自动计算外边距，以保证居中 */
  76. }
  78. .eye.right {
  79.     position: absolute; /* 绝对定位 */
  80.     top: 0; right: 0; bottom: 40px; left: 70px; /* 通过设置边距实现眼睛的位置 */
  81.     margin: auto; /* 自动计算外边距，以保证居中 */
  82. }
  84. .left::before {
  85.     content: ""; /* 添加伪元素 */
  86.     position: absolute; /* 绝对定位 */
  87.     z-index: 3; /* 设置堆叠顺序 */
  88.     width: 100px; /* 宽度设为100像素 */
  89.     height: 85px; /* 高度设为85像素 */
  90.     border-radius: 50%; /* 边框半径设为50% */
  91.     background: radial-gradient(circle at 0 0, transparent 80%,
  92.             var(--black-fade)80%, var(--black-fade)90%, transparent 90%); /* 径向渐变背景 */
  93.     bottom: 80px; /* 距底部80像素 */
  94.     right: 0px; /* 距右边0像素 */
  95.     transform: rotatez(25deg); /* 旋转25度 */
  96.     opacity: 0; /* 不透明度设为0 */
  97. }
  99. .right::before {
  100.     content: ""; /* 添加伪元素 */
  101.     position: absolute; /* 绝对定位 */
  102.     z-index: 3; /* 设置堆叠顺序 */
  103.     width: 100px; /* 宽度设为100像素 */
  104.     height: 85px; /* 高度设为85像素 */
  105.     border-radius: 50%; /* 边框半径设为50% */
  106.     background: radial-gradient(circle at 100% 0, transparent 80%,
  107.             var(--black-fade)80%, var(--black-fade)90%, transparent 90%); /* 径向渐变背景 */
  108.     bottom: 80px; /* 距底部80像素 */
  109.     left: 0px; /* 距左边0像素 */
  110.     transform: rotatez(-25deg); /* 旋转-25度 */
  111.     opacity: 0; /* 不透明度设为0 */
  112. }
  114. .mouth {
  115.     position: absolute; /* 绝对定位 */
  116.     top: 88px; /* 距顶部88像素 */
  117.     right: 0; bottom: 0; left: 0; /* 左右和底部设为0以居中 */
  118.     margin: auto; /* 自动计算外边距，以保证居中 */
  119.     overflow: hidden; /* 隐藏超出元素范围的内容 */
  120.     width: 94px; /* 宽度设为94像素 */
  121.     height: 48px; /* 高度设为48像素 */
  122.     transition: .3s; /* 过渡效果时间为0.3秒 */
  123. }
  125. .mouth:before {
  126.     position: absolute; /* 绝对定位 */
  127.     top: 0; right: 0; bottom: 10px; left: 0; /* 设置上下左右距离居中 */
  128.     margin: auto; /* 自动计算外边距，以保证居中 */
  129.     content: ""; /* 伪元素内容为空 */
  130.     width: 100%; /* 宽度设为父元素的100% */
  131.     height: 100%; /* 高度设为父元素的100% */
  132.     background-color: #6E440B; /* 背景颜色设为深棕色 */
  133.     border-radius: 100%; /* 圆形边框 */
  134.     box-shadow: rgba(255, 255, 255, 0.25) 0 3px 0; /* 阴影效果 */
  135.     transform: scale(1); /* 缩放比例设为1 */
  136. }
  138. .mouth:after {
  139.     position: absolute; /* 绝对定位 */
  140.     top: 0; right: 0; bottom: 26px; left: 0; /* 设置上下左右距离居中 */
  141.     margin: auto; /* 自动计算外边距，以保证居中 */
  142.     content: ""; /* 伪元素内容为空 */
  143.     width: calc(100% - 20px); /* 宽度设为父元素宽度减20像素 */
  144.     height: 100%; /* 高度设为父元素的100% */
  145.     background-color: #FECA32; /* 背景颜色设为黄色 */
  146.     border-radius: 100%; /* 圆形边框 */
  147.     box-shadow: rgba(0, 0, 0, 0.8) 0 4px 4px -4px; /* 阴影效果 */
  148.     transform-origin: 50% 100%; /* 设置变换的原点为元素的底部中心 */
  149.     transform: scale(1.6); /* 缩放比例设为1.6 */
  150. }
  152. /* hover 状态 */
  153. #emoji:hover .face {
  154.     background-color: rgb(230, 80, 7); /* 当鼠标悬停时，改变面部背景颜色为橙红色 */
  155. }
  157. #emoji:hover .eye {
  158.     height: 30px; /* 当鼠标悬停时，改变眼睛的高度为30像素 */
  159.     box-shadow: inset rgba(0, 0, 0, 0.5) 0 6px 12px,
  160.         rgba(250, 160, 55, .3) 0 2px 0 2px; /* 当鼠标悬停时，改变眼睛的阴影效果 */
  161. }
  163. #emoji:hover .left,
  164. #emoji:hover .right {
  165.     top: 45px; /* 当鼠标悬停时，调整眼睛的上边距为45像素 */
  166.     bottom: 40px; /* 当鼠标悬停时，调整眼睛的下边距为40像素 */
  167. }
  169. #emoji:hover .left::before,
  170. #emoji:hover .right::before {
  171.     opacity: 1; /* 当鼠标悬停时，显示眼睛的光效 */
  172.     bottom: 40px; /* 当鼠标悬停时，调整光效的底部距离为40像素 */
  173.     transition: .3s; /* 设置过渡效果时间为0.3秒 */
  174. }
  176. #emoji:hover .mouth {
  177.     overflow: visible; /* 当鼠标悬停时，显示超出元素范围的内容 */
  178.     top: 120px; /* 当鼠标悬停时，调整嘴巴的顶部距离为120像素 */
  179.     width: 84px; /* 当鼠标悬停时，调整嘴巴的宽度为84像素 */
  180.     height: 35px; /* 当鼠标悬停时，调整嘴巴的高度为35像素 */
  181.     transform: translate3d(0, 0, 0); /* 重置3D转换 */
  182.     background: var(--black-fade); /* 背景颜色设为淡化的黑色 */
  183.     border-radius: 60%/80%; /* 当鼠标悬停时，调整嘴巴的边框半径 */
  184.     box-shadow: inset 0 0 10px 1px black; /* 当鼠标悬停时，设置内部阴影效果 */
  185. }
  187. #emoji:hover .mouth:before {
  188.     opacity: 0; /* 当鼠标悬停时，隐藏嘴巴的前景内容 */
  189. }
  191. #emoji:hover .mouth:after {
  192.     transform: scale(1); /* 当鼠标悬停时，将嘴巴后景内容缩放至原始大小 */
  193.     width: 68px; /* 当鼠标悬停时，调整后景内容的宽度为68像素 */
  194.     height: 75px; /* 当鼠标悬停时，调整后景内容的高度为75像素 */
  195.     background: linear-gradient(90deg, transparent 45%, var(--black-fade)50%, transparent 55%),
  196.         radial-gradient(circle at 50% 10%, rgb(240, 40, 115), var(--shine)55%); /* 设置渐变背景颜色 */
  197.     background-repeat: no-repeat; /* 禁止背景图案的重复 */
  198.     background-size: 100% 50%, 100% 100%; /* 设置背景图案的大小 */
  199.     top: 15px; /* 当鼠标悬停时，调整后景内容的顶部距离为15像素 */
  200.     bottom: auto; /* 当鼠标悬停时，禁用底部对齐 */
  201.     left: 50%; /* 当鼠标悬停时，将后景内容水平居中 */
  202.     margin: auto -34px; /* 当鼠标悬停时，调整后景内容的外边距 */
  203.     border-radius: 7px 7px 50% 50%/10% 10% 50% 50%; /* 当鼠标悬停时，调整后景内容的边框半径 */
  204.     filter: blur(2px); /* 当鼠标悬停时，应用2像素的模糊滤镜 */
  205.     box-shadow: inset 0 -2px 3px 0 mediumvioletred,
  206.         inset 0 -5px 10px 7px rgb(240, 40, 115), 0 5px 10px 1px black; /* 当鼠标悬停时，设置阴影效果 */
  207. }
复制代码
        希望读者可以静下心来阅读一下上述代码，而且可以利用编译器一步一步的查看各行代码的结果！这里我们在对上述的代码进行总结：

这段CSS代码实现了以下功能和结果：

   

  • 界说颜色变量：

    • 利用CSS自界说属性（变量）界说了一组颜色，如亮度（shine）、重要颜色、次要颜色、夸大色、淡化的黑色和深蓝色。这些变量用于后续样式的统一管理和应用。

  • 全局样式设置：

    • 设置了全局的padding、margin为0，并去除了列表的默认样式。这是为了确保页面元素的初始样式统一，避免默认样式影响设计。

  • 页面结构：

    • 通过body标签的样式，设置页面为flex结构，内容垂直和水平居中显示。并利用height: 100vh将页面高度设置为视口高度，同时潜伏了滚动条以固定页面。

  • 表情符号结构和结构：

    • 利用#emoji容器界说表情符号的整体尺寸和位置，而且启用了3D转换，以优化后续动画结果。
    • layer类用于界说表情符号各层的基础样式。

  • 面部基础样式：

    • 界说了face类用于绘制表情符号的脸部，包括其位置、巨细、配景颜色、圆形边框和阴影结果。

  • 面部细节：

    • shine类创建了脸部的光泽结果，通过渐变和透明度的应用，模拟光影。
    • eye类界说了眼睛的样式，利用位置、巨细、圆形边框、阴影等属性进行美化。左右眼分别利用.eye.left和.eye.right定位。
    • left::before和right::before伪元素添加了眼睛的反光结果。

  • 嘴巴样式：

    • mouth类用于界说嘴巴的外观，包括位置、尺寸、配景颜色、边框半径和阴影结果。利用::before和::after伪元素添加了嘴巴的额外细节。

  • 鼠标悬停结果：

    • 利用:hover伪类为表情符号添加了鼠标悬停时的动画结果。包括脸部颜色变化、眼睛形状和阴影的调解、嘴巴位置和形状的变化、以及嘴巴内部的复杂光影结果。

  • 过渡结果：

    • 为大多数动画和样式变化设置了平滑的过渡结果，通常为0.3秒，使得动画更加流畅和天然。

  现在再让我们看一下结果：


——我们会发现，笑容不会跟随着鼠标的移动发生变化，这时间我们就需要加上一些交互结果了！

3.交互 —— JavaScript代码

JavaScript代码：
  1. <!-- 导入Parallax视差插件 -->
  2. <script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/2.1.3/parallax.min.js"></script>
  3. <script>
  4.     var options = {
  5.         invertX: false,   // 水平方向反转
  6.         invertY: false,   // 垂直方向反转
  7.         limitX: 40,   // 水平方向限制
  8.         limitY: 40// 垂直方向限制
  9.     }
  10.     var emoji = document.getElementById('emoji');  // 获取元素id为emoji的DOM对象
  11.     var parallax = new Parallax(emoji, options);   // 创建新的视差对象并传入emoji和options参数
  13. </script>
复制代码
——编写好上述代码之后，我们就可以实现文章开始时的结果了！！！（结果如下）


以上就是本篇文章的全部内容了！！！


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

笑看天下无敌手

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

存储 挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表