Kleines Front-End-Übungsprojekt – es ist großartig, Bruder!

Language 2024-10-05 15:16:30 views: null

        Vorwort: Nachdem wir HTML, CSS und JavaScript gelernt haben, können wir mit einigen kleinen Projekten beginnen. Die in diesem Artikel besprochenen kleinen Projekte sind – Bao Changlian, Bruder.

✨✨✨Dies ist der BLOG von Saury Not Dreaming

✨✨✨Wenn Sie mehr wissen möchten, können Sie meine Homepage Saury Does Not Dream-CSDN Blog besuchen

Schauen wir uns zunächst die Wirkung an:

        Wie implementieren wir also einen so kleinen Fall? Im Folgenden erklären wir jeden wichtigen Teil des Codes, und die Leser können den Code anhand der Kommentare verstehen.

1. Skelett – 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>

        Nachdem wir das HTML-Skelett erstellt haben, können wir natürlich immer noch keine Ergebnisse sehen und werden es dann ändern.

2. Änderung – 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; /* 当鼠标悬停时，设置阴影效果 */
}

        Ich hoffe, dass sich die Leser beruhigen und den obigen Code lesen und den Compiler verwenden können, um die Wirkung jeder Codezeile Schritt für Schritt zu überprüfen! Hier fassen wir den obigen Code zusammen:

Dieser CSS-Code implementiert die folgenden Funktionen und Effekte:

  1. Farbvariablen definieren :

    • Verwenden Sie benutzerdefinierte CSS-Eigenschaften (Variablen), um eine Reihe von Farben wie Glanz, Primärfarbe, Sekundärfarbe, Akzentfarbe, verblasstes Schwarz und Dunkelblau zu definieren. Diese Variablen werden zur einheitlichen Verwaltung und Anwendung nachfolgender Stile verwendet.

  2. Globale Stileinstellungen :

    • Setzen Sie global paddingauf margin0 und entfernen Sie den Standardstil der Liste. Dadurch soll sichergestellt werden, dass die ursprünglichen Stile der Seitenelemente einheitlich sind und verhindert wird, dass sich Standardstile auf das Design auswirken.

  3. Seitenlayout :

    • Durch bodyden Stil der Beschriftung wird die Seite auf flexein Layout festgelegt und der Inhalt vertikal und horizontal in der Mitte angezeigt. und wird verwendet height: 100vh, um die Seitenhöhe auf die Höhe des Ansichtsfensters festzulegen und gleichzeitig die Bildlaufleisten auszublenden, um die Seite zu fixieren.

  4. Emoji-Struktur und Layout :

    • Ein Container wird verwendet #emoji, um die Gesamtgröße und Position des Emojis zu definieren, und die 3D-Transformation wird aktiviert, um nachfolgende Animationseffekte zu optimieren.

    • layerDie Klasse wird verwendet, um die grundlegenden Stile jeder Emoji-Ebene zu definieren.

  5. Grundlegender Gesichtsstil :

    • Definiert faceKlassen zum Zeichnen des Gesichts eines Emojis, einschließlich seiner Position, Größe, Hintergrundfarbe, kreisförmigen Umrandung und Schatteneffekte.

  6. Gesichtsdetails :

    • shineDieser Kurs erzeugt einen Glanzeffekt auf dem Gesicht, indem er durch die Anwendung von Farbverläufen und Transparenz Licht und Schatten simuliert.

    • eyeDie Klasse definiert den Stil der Augen, der mithilfe von Attributen wie Position, Größe, kreisförmigem Rand und Schatten verschönert wird. Das linke und das rechte Auge werden getrennt verwendet .eye.leftund positioniert .eye.right.

    • left::beforeund right::beforePseudoelemente fügten den Augen einen reflektierenden Effekt hinzu.

  7. Mundstil :

    • mouthKlasse, die zum Definieren des Erscheinungsbilds des Mundes verwendet wird, einschließlich Position, Größe, Hintergrundfarbe, Randradius und Schatteneffekte. Zusätzliche Details des Mundes wurden mithilfe von ::beforeund Pseudoelementen hinzugefügt.::after

  8. Mouseover-Effekt :

    • :hoverMouseover-Animation zu Emoticons mithilfe von Pseudoklassen hinzugefügt. Dazu gehören Veränderungen der Gesichtsfarbe, Anpassungen der Augenform und des Schattens, Veränderungen der Mundposition und -form sowie komplexe Licht- und Schatteneffekte im Mund.

  9. Übergangseffekte :

    • Für die meisten Animationen und Stiländerungen sind sanfte Übergangseffekte eingestellt, normalerweise 0,3 Sekunden, wodurch Animationen flüssiger und natürlicher werden.

Schauen wir uns nun den Effekt an:

——Wir werden feststellen, dass sich das Smiley-Gesicht nicht mit der Bewegung der Maus ändert. Zu diesem Zeitpunkt müssen wir einige interaktive Effekte hinzufügen!

3. Interaktion – 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>

——Nachdem wir den obigen Code geschrieben haben, können wir den Effekt am Anfang des Artikels erzielen! ! ! (Der Effekt ist wie folgt)

Das ist alles für diesen Artikel! ! !

Ich denke du magst

Origin blog.csdn.net/2302_80198073/article/details/141507394
Empfohlen
Rangfolge
Täglich
Mehr
2025-04-30(0)
2025-04-29(0)
2025-04-28(0)
2025-04-27(0)
2025-04-26(0)
2025-04-25(0)
2025-04-24(0)
2025-04-23(0)
2025-04-22(0)
2025-04-21(0)

Code World

© 2018 codetd.com