A small project for front-end practice—it includes face-changing, bro!

Preface: After learning HTML, CSS, and JavaScript, we can start doing some small projects. The small project discussed in this article is - the one that can change faces, brother.

✨✨✨This is the blog of Sanma who doesn’t dream

✨✨✨If you want to learn more, you can visit my homepage Sanma Don't Dream - CSDN Blog

Let's take a look at the effect first:

So how do we implement such a small case? In the following, we explain each important code segment, and readers can understand the code according to the comments.

1. Skeleton - HTML code

HTML code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>秋刀鱼不做梦</title>
    <!-- 引入外部样式表 -->
    <link rel="stylesheet" href="./表情.css">
</head>

<body>
    <!-- 表情图标的列表 -->
    <ul id="emoji">
        <!-- 第一层，深度为0.2 -->
        <li class="layer" data-depth="0.2">
            <!-- 面部 -->
            <div class="face"></div>
        </li>
        <!-- 第二层，深度为0.3 -->
        <li class="layer" data-depth="0.3">
            <!-- 光泽 -->
            <div class="shine"></div>
        </li>
        <!-- 第三层，深度为0.8 -->
        <li class="layer" data-depth="0.8">
            <!-- 左眼 -->
            <div class="eye left"></div>
        </li>
        <!-- 第三层，深度为0.8 -->
        <li class="layer" data-depth="0.8">
            <!-- 右眼 -->
            <div class="eye right"></div>
        </li>
        <!-- 第三层，深度为0.8 -->
        <li class="layer" data-depth="0.8">
            <!-- 嘴巴 -->
            <div class="mouth"></div>
        </li>
    </ul>
</body>

</html>

Of course, after we build the HTML skeleton, we still can't see any results, so let's modify it.

2. Modification - CSS code

CSS code:

:root {
    --shine: rgb(251, 136, 200); /* 定义自定义属性：光泽颜色 */
    --primary-color: rgb(248, 175, 40); /* 定义自定义属性：主色 */
    --secondary-color: rgb(230, 63, 2); /* 定义自定义属性：次色 */
    --accent-color: rgb(58, 25, 25); /* 定义自定义属性：强调色 */
    --black-fade: rgb(120, 40, 6); /* 定义自定义属性：淡化的黑色 */
    --dark-blue: rgb(84, 84, 174); /* 定义自定义属性：深蓝色 */
}

* {
    padding: 0; /* 重置所有元素的内边距为0 */
    margin: 0; /* 重置所有元素的外边距为0 */
    list-style: none; /* 去掉列表项的默认样式 */
}

body {
    display: flex; /* 采用flex布局 */
    align-items: center; /* 垂直方向居中 */
    justify-content: center; /* 水平方向居中 */
    height: 100vh; /* 高度设为视口高度 */
    overflow: hidden; /* 隐藏超出视口的内容 */
    background-color: #9197f1; /* 设置背景颜色为淡紫色 */
}

#emoji {
    position: relative; /* 相对定位 */
    width: 450px; /* 宽度设为450像素 */
    height: 400px; /* 高度设为400像素 */
    transform: translate3d(0, 0, 0); /* 启用3D转换，保持默认值 */
}

.layer {
    position: absolute; /* 绝对定位 */
    width: 100%; /* 宽度设为父元素的100% */
    height: 100%; /* 高度设为父元素的100% */
}

.face {
    position: absolute; /* 绝对定位 */
    top: 0; right: 0; bottom: 0; left: 0; /* 四边都设为0以居中 */
    margin: auto; /* 自动计算外边距，以保证居中 */
    width: 230px; /* 宽度设为230像素 */
    height: 230px; /* 高度设为230像素 */
    background-color: #FECA32; /* 设置背景颜色为黄色 */
    border-radius: 100%; /* 圆形边框 */
    box-shadow: inset rgba(0, 0, 0, 0.4) 0 0 30px; /* 内部投影，制造深度感 */
    transition: .3s; /* 设置过渡效果时间为0.3秒 */
}

.shine {
    position: absolute; /* 绝对定位 */
    top: 0; right: 0; bottom: 0; left: 0; /* 四边都设为0以居中 */
    margin: auto; /* 自动计算外边距，以保证居中 */
    width: 194px; /* 宽度设为194像素 */
    height: 206px; /* 高度设为206像素 */
    background: linear-gradient(to bottom, #FFFFFF,
            rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0)); /* 设置线性渐变背景 */
    border-radius: 100%; /* 圆形边框 */
    opacity: 0.8; /* 设置不透明度为0.8 */
}

.eye {
    width: 24px; /* 眼睛的宽度 */
    height: 38px; /* 眼睛的高度 */
    background-color: #A1620F; /* 眼睛的背景颜色 */
    border-radius: 100%; /* 圆形边框 */
    box-shadow: inset rgba(0, 0, 0, 0.5) 0 6px 12px,
        rgba(255, 255, 255, 0.2) 0 2px 0 2px; /* 内部和外部的阴影 */
    transition: .3s; /* 过渡效果时间为0.3秒 */
}

.eye.left {
    position: absolute; /* 绝对定位 */
    top: 0; right: 70px; bottom: 40px; left: 0; /* 通过设置边距实现眼睛的位置 */
    margin: auto; /* 自动计算外边距，以保证居中 */
}

.eye.right {
    position: absolute; /* 绝对定位 */
    top: 0; right: 0; bottom: 40px; left: 70px; /* 通过设置边距实现眼睛的位置 */
    margin: auto; /* 自动计算外边距，以保证居中 */
}

.left::before {
    content: ""; /* 添加伪元素 */
    position: absolute; /* 绝对定位 */
    z-index: 3; /* 设置堆叠顺序 */
    width: 100px; /* 宽度设为100像素 */
    height: 85px; /* 高度设为85像素 */
    border-radius: 50%; /* 边框半径设为50% */
    background: radial-gradient(circle at 0 0, transparent 80%,
            var(--black-fade)80%, var(--black-fade)90%, transparent 90%); /* 径向渐变背景 */
    bottom: 80px; /* 距底部80像素 */
    right: 0px; /* 距右边0像素 */
    transform: rotatez(25deg); /* 旋转25度 */
    opacity: 0; /* 不透明度设为0 */
}

.right::before {
    content: ""; /* 添加伪元素 */
    position: absolute; /* 绝对定位 */
    z-index: 3; /* 设置堆叠顺序 */
    width: 100px; /* 宽度设为100像素 */
    height: 85px; /* 高度设为85像素 */
    border-radius: 50%; /* 边框半径设为50% */
    background: radial-gradient(circle at 100% 0, transparent 80%,
            var(--black-fade)80%, var(--black-fade)90%, transparent 90%); /* 径向渐变背景 */
    bottom: 80px; /* 距底部80像素 */
    left: 0px; /* 距左边0像素 */
    transform: rotatez(-25deg); /* 旋转-25度 */
    opacity: 0; /* 不透明度设为0 */
}

.mouth {
    position: absolute; /* 绝对定位 */
    top: 88px; /* 距顶部88像素 */
    right: 0; bottom: 0; left: 0; /* 左右和底部设为0以居中 */
    margin: auto; /* 自动计算外边距，以保证居中 */
    overflow: hidden; /* 隐藏超出元素范围的内容 */
    width: 94px; /* 宽度设为94像素 */
    height: 48px; /* 高度设为48像素 */
    transition: .3s; /* 过渡效果时间为0.3秒 */
}

.mouth:before {
    position: absolute; /* 绝对定位 */
    top: 0; right: 0; bottom: 10px; left: 0; /* 设置上下左右距离居中 */
    margin: auto; /* 自动计算外边距，以保证居中 */
    content: ""; /* 伪元素内容为空 */
    width: 100%; /* 宽度设为父元素的100% */
    height: 100%; /* 高度设为父元素的100% */
    background-color: #6E440B; /* 背景颜色设为深棕色 */
    border-radius: 100%; /* 圆形边框 */
    box-shadow: rgba(255, 255, 255, 0.25) 0 3px 0; /* 阴影效果 */
    transform: scale(1); /* 缩放比例设为1 */
}

.mouth:after {
    position: absolute; /* 绝对定位 */
    top: 0; right: 0; bottom: 26px; left: 0; /* 设置上下左右距离居中 */
    margin: auto; /* 自动计算外边距，以保证居中 */
    content: ""; /* 伪元素内容为空 */
    width: calc(100% - 20px); /* 宽度设为父元素宽度减20像素 */
    height: 100%; /* 高度设为父元素的100% */
    background-color: #FECA32; /* 背景颜色设为黄色 */
    border-radius: 100%; /* 圆形边框 */
    box-shadow: rgba(0, 0, 0, 0.8) 0 4px 4px -4px; /* 阴影效果 */
    transform-origin: 50% 100%; /* 设置变换的原点为元素的底部中心 */
    transform: scale(1.6); /* 缩放比例设为1.6 */
}

/* hover 状态 */
#emoji:hover .face {
    background-color: rgb(230, 80, 7); /* 当鼠标悬停时，改变面部背景颜色为橙红色 */
}

#emoji:hover .eye {
    height: 30px; /* 当鼠标悬停时，改变眼睛的高度为30像素 */
    box-shadow: inset rgba(0, 0, 0, 0.5) 0 6px 12px,
        rgba(250, 160, 55, .3) 0 2px 0 2px; /* 当鼠标悬停时，改变眼睛的阴影效果 */
}

#emoji:hover .left,
#emoji:hover .right {
    top: 45px; /* 当鼠标悬停时，调整眼睛的上边距为45像素 */
    bottom: 40px; /* 当鼠标悬停时，调整眼睛的下边距为40像素 */
}

#emoji:hover .left::before,
#emoji:hover .right::before {
    opacity: 1; /* 当鼠标悬停时，显示眼睛的光效 */
    bottom: 40px; /* 当鼠标悬停时，调整光效的底部距离为40像素 */
    transition: .3s; /* 设置过渡效果时间为0.3秒 */
}

#emoji:hover .mouth {
    overflow: visible; /* 当鼠标悬停时，显示超出元素范围的内容 */
    top: 120px; /* 当鼠标悬停时，调整嘴巴的顶部距离为120像素 */
    width: 84px; /* 当鼠标悬停时，调整嘴巴的宽度为84像素 */
    height: 35px; /* 当鼠标悬停时，调整嘴巴的高度为35像素 */
    transform: translate3d(0, 0, 0); /* 重置3D转换 */
    background: var(--black-fade); /* 背景颜色设为淡化的黑色 */
    border-radius: 60%/80%; /* 当鼠标悬停时，调整嘴巴的边框半径 */
    box-shadow: inset 0 0 10px 1px black; /* 当鼠标悬停时，设置内部阴影效果 */
}

#emoji:hover .mouth:before {
    opacity: 0; /* 当鼠标悬停时，隐藏嘴巴的前景内容 */
}

#emoji:hover .mouth:after {
    transform: scale(1); /* 当鼠标悬停时，将嘴巴后景内容缩放至原始大小 */
    width: 68px; /* 当鼠标悬停时，调整后景内容的宽度为68像素 */
    height: 75px; /* 当鼠标悬停时，调整后景内容的高度为75像素 */
    background: linear-gradient(90deg, transparent 45%, var(--black-fade)50%, transparent 55%),
        radial-gradient(circle at 50% 10%, rgb(240, 40, 115), var(--shine)55%); /* 设置渐变背景颜色 */
    background-repeat: no-repeat; /* 禁止背景图案的重复 */
    background-size: 100% 50%, 100% 100%; /* 设置背景图案的大小 */
    top: 15px; /* 当鼠标悬停时，调整后景内容的顶部距离为15像素 */
    bottom: auto; /* 当鼠标悬停时，禁用底部对齐 */
    left: 50%; /* 当鼠标悬停时，将后景内容水平居中 */
    margin: auto -34px; /* 当鼠标悬停时，调整后景内容的外边距 */
    border-radius: 7px 7px 50% 50%/10% 10% 50% 50%; /* 当鼠标悬停时，调整后景内容的边框半径 */
    filter: blur(2px); /* 当鼠标悬停时，应用2像素的模糊滤镜 */
    box-shadow: inset 0 -2px 3px 0 mediumvioletred,
        inset 0 -5px 10px 7px rgb(240, 40, 115), 0 5px 10px 1px black; /* 当鼠标悬停时，设置阴影效果 */
}

I hope readers can calm down and read the above code, and use the compiler to check the effect of each line of code step by step! Here we summarize the above code:

This CSS code implements the following functions and effects:

Define a color variable :

A set of colors, such as shine, primary color, secondary color, accent color, faded black, and dark blue, are defined using CSS custom properties (variables). These variables are used for unified management and application of subsequent styles.

Global style settings :

The global CSS style is set paddingto margin0 and the default style of the list is removed. This is to ensure that the initial style of the page elements is unified and to avoid the default style affecting the design.

Page Layout :

Through bodythe style of the tag, the page is set to flexlayout, and the content is centered vertically and horizontally. height: 100vhThe page height is set to the viewport height, and the scroll bar is hidden to fix the page.

Emoji structure and layout :

A container is used #emojito define the overall size and position of the emoji, and 3D transformations are enabled to optimize subsequent animation effects.

layerClass is used to define the basic styles of each layer of emoji.

Basic facial style :

Defines facethe class used to draw the emoticon face, including its position, size, background color, circular border, and shadow effects.

Facial details :

shineThe class creates a glossy effect on the face, simulating light and shadow through the application of gradients and transparency.

eyeThe class defines the style of the eyes, using properties such as position, size, circular border, shadow, etc. to beautify them. The left and right eyes are used .eye.leftand .eye.rightpositioned separately.

left::beforeThe and right::beforepseudo-elements add a reflective effect to the eyes.

Mouth style :

mouthClasses are used to define the appearance of the mouth, including position, size, background color, border radius, and shadow effects. Additional details of the mouth are added using ::beforeand pseudo-elements.::after

Mouse hover effects :

Pseudo-classes are used :hoverto add animation effects to emojis when the mouse is hovering. This includes changes in face color, adjustments to eye shape and shadows, changes in mouth position and shape, and complex light and shadow effects inside the mouth.

Transition Effects :

Smooth transition effects are set for most animations and style changes, usually 0.3 seconds, making the animation more fluid and natural.

Now let's take a look at the effect:

——We will find that the smiley face does not change with the movement of the mouse. At this time, we need to add some interactive effects!

3. Interaction - JavaScript code

JavaScript code:

<!-- 导入Parallax视差插件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/2.1.3/parallax.min.js"></script>
<script>
    var options = {
        invertX: false,   // 水平方向反转
        invertY: false,   // 垂直方向反转
        limitX: 40,   // 水平方向限制
        limitY: 40// 垂直方向限制
    }
    var emoji = document.getElementById('emoji');  // 获取元素id为emoji的DOM对象
    var parallax = new Parallax(emoji, options);   // 创建新的视差对象并传入emoji和options参数

</script>

——After writing the above code, we can achieve the effect at the beginning of the article! ! ! (The effect is as follows)

The above is the entire content of this article!!!