jquery感恩节动画效果代码-html代码-BFW代码库

jquery感恩节动画效果代码

代码语言：html

所属分类：动画

代码描述：jquery感恩节动画效果代码

代码标签：效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

    <meta charset="UTF-8">


    <style>
@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@700&display=swap");

        *,
        *:before,
        *:after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        *:before,
        *:after {
            position: absolute;
            content: "";
        }

:root {
            --container-width: 50vw;
            --color-black: #323232;
            --color-orange: #fe911b;
            --color-cream: #fef3e9;
            --max-width: 50vh;
            --text-timing: 0.25s;
            --text-unit: 10;
            --spacing-unit: 0.68;
            --degree-unit: calc(var(--spacing-unit) *2);

            --margin: 5vh;
        }

        html {
            --background-color: var(--color-cream);
            --stroke-color: var(--color-black);
        }

        html.dark-mode {
            --background-color: var(--color-black);
            --stroke-color: var(--color-cream);
        }

        body {
            width: 100%;
            height: 100vh;
            overflow: hidden;
            font-family: "Roboto Condensed", sans-serif;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background: var(--background-color);
        }

        body:before {
            width: 100%;
            height: 100%;

            z-index: 100;
        }

        #container {
            width: var(--container-width);
            height: calc(var(--container-width) *1.4);
            margin: 0 auto;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            max-width: var(--max-width);
            max-height: calc(var(--max-width) *1.4);
            margin-top: -8%;
        }

        #container > div {
            position: absolute;
        }

        #turkey-container {
            position: absolute;
            width: 43%;
            height: auto;
            margin-bottom: 35%;
            bottom: 0;
            margin-right: -6%;
        }

        #sun-container {
            position: relative;
            width: 38%;
            height: auto;
            margin-bottom: 35%;
            bottom: 0;
            opacity: 0;
        }

        .sun-animation {
            animation: fade, shift;
            animation-duration: calc(var(--text-timing) *4);
            animation-fill-mode: forwards;
            animation-delay: calc(var(--text-timing) *3);
        }

@keyframes shift {
            0% {
                margin-left: 0;
            }

            100% {
                margin-left: -12%;
            }
        }

        #rays-container {
            position: absolute;
            width: 100%;
            height: auto;
            top: 0;
            opacity: 0;
        }

        .ray-animation {
            animation: fade calc(var(--text-timing) * 3) forwards 1s;
        }

        #rays > * {
            stroke-width: 6px;
            stroke: var(--color-orange);
        }

        #turkey-container svg,
        #leaf-container svg,
        #sun-container svg,
        #rays-container svg {
            width: auto;
            height: 100%;
            display: block;
            stroke-linecap: round;
            stroke-linejoin: round;
            overflow: visible;
        }

        #turkey > *,
        #leaf > *:not(.dot) {
            fill: none;
            stroke: var(--stroke-color);
        }

        #leaf-container svg .dot {
            fill: var(--stroke-color);
        }

        .stroke-animation {
            animation: svgFill 1.25s ease-out forwards;
        }

        .ray-stroke-animation {
            animation: svgFill ease-out infinite alternate 1s;
        }

        #rays .ray:nth-of-type(odd) {
            animation-delay: 1.25s;
        }

        #rays .ray:first-of-type {
            animation-duration: 1.8s;
        }

        #rays .ray:nth-of-type(2) {
            animation-duration: 2s;
        }

        #rays .ray:nth-of-type(3) {
            animation-duration: 1.7s;
        }

        #rays .ray:nth-of-type(4) {
            animation-duration: 2.15s;
        }

        #rays .ray:nth-of-type(5) {
            animation-duration: 1.85s;
        }

        #rays .ray:nth-of-type(6) {
            animation-duration: 2.2s;
        }

        #rays .ray:nth-of-type(7) {
            animation-duration: 2.2s;
        }

        #rays .ray:nth-of-type(8) {
            animation-duration: 2.15s;
        }

        #turkey > * {
            stro.........完整代码请登录后点击上方下载按钮下载查看