HTML 和 CSS 如何熬制出大锅的动态奇幻 “心灵鸡汤”

前端Hardy
98 阅读4分钟

这段代码是一个 HTML 页面，它包含了 CSS 样式和一些 HTML 结构，用于创建一个动态的“大锅”（cauldron）动画效果。大锅中包含冒泡效果和一个搅拌勺（ladle）的旋转动画。

演示效果

HTML&CSS

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公众号关注：前端Hardy</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        .canva {
            background: beige;
            height: 100vh;
            width: 100vw;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            box-sizing: border-box;
        }

        .cauldronBody {
            position: absolute;
            top: 0px;
            width: 75px;
            height: 70px;
            background: dimgrey;
            border-radius: 50px;
        }

        .cauldronLid {
            position: relative;
            top: -5px;
            width: 70px;
            height: 35px;
            border-radius: 50%;
            border: solid beige 1px;
            background-color: dimgrey;
            display: flex;
            justify-content: center;
        }

        .outerLid {
            position: absolute;
            border: solid dimgrey 10px;
            width: 70px;
            height: 35px;
            border-radius: 50%;
            box-sizing: border-box;
        }

        .innerLid {
            position: absolute;
            top: 14px;
            width: 50px;
            height: 15px;
            background-color: beige;
            border-radius: 50%;
        }

        .cauldronLegs {
            position: absolute;
            top: 60px;
            display: flex;
            width: 55px;
            justify-content: space-between;
            border-top-color: dimgrey;
        }

        .leg {
            height: 15px;
            width: 10px;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
            background-color: dimgrey;
        }

        #leg1 {
            transform: skew(-10deg);
        }

        #leg2 {
            transform: skew(10deg);
        }

        .ladle {
            position: absolute;
            top: -26px;
            width: 5px;
            height: 40px;
            background-color: dimgrey;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            border: solid 1px beige;
            animation: rotateLadle 3s linear infinite;
        }

        .bubbles {
            position: absolute;
            top: -80px;
            width: 50px;
            height: 100px;
            display: flex;
            align-items: end;
            justify-content: center;
        }

        .bubbleContainer {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: end;
        }

        .bubbleBound {
            position: absolute;
            display: flex;
            align-items: end;
            box-sizing: border-box;
        }

        #bubbleBound1 {
            width: 10px;
            height: 10px;
            left: 10px;
        }

        #bubbleBound2 {
            width: 20px;
            height: 20px;
            left: 20px;
        }

        #bubbleBound3 {
            width: 15px;
            height: 15px;
            left: 30px;
        }

        .bubble {
            border-radius: 50%;
            border: solid 2px beige;
            box-sizing: border-box;
        }

        .opaqueBackground {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: beige;
            opacity: 0.5;
        }

        #bubble1 {
            animation: animateBubble ease-in-out 6s 2s infinite;
        }

        #bubble2 {
            animation: animateBubble ease-in-out 5s 1s infinite;
        }

        #bubble3 {
            animation: animateBubble ease-in-out 4s infinite;
        }

        @keyframes animateBubble {
            0% {
                transform: scale(0);
            }

            15% {
                width: 100%;
                height: 100%;
                border-color: dimgrey;
                transform: scale(1) translate(0, -5px);
            }

            95% {
                width: 100%;
                height: 100%;
                border-color: dimgrey;
                transform: translate(0, -100px);
            }

            99% {
                width: 100%;
                height: 100%;
                transform: translate(0, -100px) scale(1.2);
            }

            100% {
                width: 100%;
                height: 100%;
                transform: translate(0, -100px) scale(0);
            }
        }

        @keyframes rotateLadle {
            0% {
                transform: translate(20px, 2px) rotate(15deg);
            }

            25% {
                transform: translate(0, -1px) rotate(0);
            }

            50% {
                transform: translate(-20px, 2px) rotate(-15deg);
            }

            75% {
                transform: translate(0, 5px) rotate(0);
            }

            100% {
                transform: translate(20px, 2px) rotate(15deg);
            }
        }
    </style>
</head>

<body>
    <div class="canva">
        <div class="container">
            <div class="cauldronBody">
            </div>
            <div class="cauldronLid">
                <div class="innerLid"></div>
                <div class="outerLid"> </div>
            </div>
            <div class="ladle"></div>
            <div class="bubbles">
                <div class="bubbleContainer">
                    <div class="bubbleBound" id="bubbleBound1">
                        <div class="bubble" id="bubble1">
                            <div class="opaqueBackground"></div>
                        </div>
                    </div>
                    <div class="bubbleBound" id="bubbleBound2">
                        <div class="bubble" id="bubble2">
                            <div class="opaqueBackground"></div>
                        </div>
                    </div>
                    <div class="bubbleBound" id="bubbleBound3">
                        <div class="bubble" id="bubble3">
                            <div class="opaqueBackground"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="cauldronLegs">
                <div class="leg" id="leg1"></div>
                <div class="leg" id="leg2"></div>
            </div>
        </div>
    </div>
</body>

</html>

HTML 结构

  • canva: 创建一个类名为“canva”的 div 元素，用于包含整个动画效果。
  • container: 包含大锅的各个部分。
  • cauldronBody: 创建大锅的主体部分。
  • cauldronLid: 创建大锅的盖子部分，包含内外两层。
  • innerLid: 大锅盖子的内层。
  • outerLid: 大锅盖子的外层。
  • ladle: 创建搅拌勺部分。
  • bubbles: 包含冒泡效果的容器。
  • bubbleContainer: 包含三个冒泡效果的容器。
  • bubbleBound: 包含单个冒泡效果的边界。
  • bubble: 创建冒泡效果，包含一个半透明背景。
  • opaqueBackground: 半透明背景。
  • cauldronLegs: 包含大锅的两个支撑腿。
  • leg leg1: 第一个支撑腿。
  • leg leg2: 第二个支撑腿。

CSS 样式

  • .canva: 设置动画容器的样式，包括背景色、尺寸和对齐方式。
  • .container: 设置大锅容器的样式，包括显示方式和对齐方式。
  • .cauldronBody: 设置大锅主体的样式，包括位置、尺寸、背景色和圆角。
  • .cauldronLid: 设置大锅盖子的样式，包括位置、尺寸、边框和背景色。
  • .outerLid 和 .innerLid: 分别设置大锅盖子的外层和内层的样式。
  • .cauldronLegs: 设置大锅支撑腿的样式，包括位置、尺寸和对齐方式。
  • .leg: 设置单个支撑腿的样式，包括尺寸、圆角和背景色。
  • .ladle: 设置搅拌勺的样式，包括位置、尺寸、背景色和旋转动画。
  • .bubbles: 设置冒泡效果容器的样式，包括位置、尺寸和对齐方式。
  • .bubbleContainer: 设置冒泡效果的容器样式。
  • .bubbleBound: 设置单个冒泡效果的边界样式。
  • .bubble: 设置冒泡效果的样式，包括圆角、边框和动画效果。
  • .opaqueBackground: 设置冒泡效果的半透明背景样式。
  • @keyframes animateBubble: 定义冒泡效果的动画，使泡泡从底部向上移动并逐渐变大。
  • @keyframes rotateLadle: 定义搅拌勺的旋转动画，使搅拌勺在大锅上方来回旋转。
avatar
文章
阅读
粉丝