文字走光动画效果圣诞快乐-html代码-BFW代码库

代码语言：html

所属分类：动画

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <style>
@import url("https://fonts.googleapis.com/css?family=Bad+Script");
        * {
            margin: 0;
            padding: 0;
        }
        body {
            font-family: "Bad Script",
            -apple-system, BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Oxygen-Sans,Ubuntu,Cantarell,sans-serif;
        }
        body, #siteWrapper {
            height: 100%;
            overflow-x: hidden;
        }
        #siteWrapper {
            width: 100vw;
            min-height: 100vh;
            background-color: #fa3e38;
            background-image: repeating-linear-gradient(transparent, transparent 50px, rgba(0,0,0,.4) 50px, rgba(0,0,0,.4) 53px, transparent 53px, transparent 63px, rgba(0,0,0,.4) 63px, rgba(0,0,0,.4) 66px, transparent 66px, transparent 116px, rgba(0,0,0,.5) 116px, rgba(0,0,0,.5) 166px, rgba(255,255,255,.2) 166px, rgba(255,255,255,.2) 169px, rgba(0,0,0,.5) 169px, rgba(0,0,0,.5) 179px, rgba(255,255,255,.2) 179px, rgba(255,255,255,.2) 182px, rgba(0,0,0,.5) 182px, rgba(0,0,0,.5) 232px, transparent 232px),
            repeating-linear-gradient(270deg, transparent, transparent 50px, rgba(0,0,0,.4) 50px, rgba(0,0,0,.4) 53px, transparent 53px, transparent 63px, rgba(0,0,0,.4) 63px, rgba(0,0,0,.4) 66px, transparent 66px, transparent 116px, rgba(0,0,0,.5) 116px, rgba(0,0,0,.5) 166px, rgba(255,255,255,.2) 166px, rgba(255,255,255,.2) 169px, rgba(0,0,0,.5) 169px, rgba(0,0,0,.5) 179px, rgba(255,255,255,.2) 179px, rgba(255,255,255,.2) 182px, rgba(0,0,0,.5) 182px, rgba(0,0,0,.5) 232px, transparent 232px),
            repeating-linear-gradient(125deg, transparent, transparent 2px, rgba(0,0,0,.2) 2px, rgba(0,0,0,.2) 3px, transparent 3px, transparent 5px, rgba(0,0,0,.2) 5px);
            box-shadow: inset 0px 0px 150px 120px rgba(0, 0, 0, 0.85);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
        }
        #treeContainer {
            margin-top: 80px;
            width: 320px;
            height: 400px;
            position: relative;
            display: flex;
            flex-direction: row;
            justify-content: center;
        }
        #tree {
            position: relative;
            border-radius: 20px;
            width: inherit;
        }
        .star {
            background: #ffd700;
            clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
            height: 38px;
            width: 40px;
            transform: translateY(-20%);
            position: absolute;
            z-index: 8;
        }
        .ball {
            border-radius: 50%;
            position: absolute;
            width: 20px;
            height: 20px;
            background:
            radial-gradient(rgb(14, 12, 12) 15%, transparent 16%) 0 0,
            radial-gradient(rgb(231, 22, 22) 15%, transparent 16%) 4px 3.5px,
            radial-gradient(rgba(105, 66, 66, 0.1) 15%, transparent 20%) 0 0.5px,
            radial-gradient(rgba(194, 57, 57, 0.1) 15%, transparent 20%) 4px 3.5px;
            background-color: #dfc63b;
            background-size: 8px 8px;
            box-shadow: 3px 3px 10px 1px rgb(32, 31, 31);
            z-index: 1;
        }
        .layerContainer {
            height: 60px;
            width: 60px;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            border-radius: 0 0 10px 10px;
        }
        .layer {
            flex-direction: row;
            justify-content: center;
            position: relative;
            background-color: green;
            width: 60px;
            height: 60px;
            border-radius: 0 10px 35px 10px;
            transform-origin: center;
            transform: rotateZ(45deg) translateX(20%) translateY(20%);
            box-shadow: 2px 10px 2px  rgba(43, 43, 43, 0.158);
        }
        .edge {
            position: absolute;
        }
        .edge.left {
            left: 0;
            bottom: 0;
            width: 25px;
            height: 30px;
            border-radius: 0 10px 35px 10px;
            transform: translateY(50%) translateX(0);
        }
        .edge.right {
            top: 0;
            right: 0;
            width: 30px;
            height: 25px;
            border-radius: 0 10px 35px 10px;
            transform: translateY(0) translateX(50%);
        }
        #tree .layerContainer:nth-child(1) {
            transform-origin: left;
            transform: scale(0.8) translateY(0%) translateX(-50%);
            z-index: 5;
        }
        #tree .layerContainer:nth-child(2) {
            z-index: 4;
            transform-origin: left;
            transform: scale(1.5) translateY(40%) translateX(-50%);
        }
        #tree .layerContainer:nth-child(3) {
            z-index: 3;
            transform-origin: left;
            transform: scale(2) translateY(60%) translateX(-50%);
        }
        #tree .layerContainer:nth-child(4) {
            z-index: 2;
            transform-origin: left;
            transform: scale(2.5) translateY(80%) translateX(-50%);
        }
        #tree .layerContainer:nth-child(5) {
            z-index: 1;
            transform-origin: left;
            transform: scale(2.8) translateY(100%) translateX(-50%);
        }
        #tree .layerContainer:nth-child(5) .layer {
            border-radius: 0 10px 40px 10px;
        }
        #tree .layerContainer:nth-child(5) .layer .edge {
            border-radius: 0 10px 35px 10px;
        }
        .stem {
            border-radius: 0 0 3px 3px;
            height: 25px;
            width: 25px;
            position: absolute;
            transform-origin: left;
            left: 50%;
            transform: translateX(-50%);
            z-index: -1;
            background-color: #a04d04;
            box-shadow: 0 0 10px 5px rgb(19, 18, 18);
            /* background: linear-gradient(0deg, #6d411b 0%, #140e0e 64%); */
        }
        #tree .layerContainer:nth-child(odd) .layer,	#tree .layerContainer:nth-child(odd) .edge {
            background-color: rgb(14, 110, 14);
        }
        #tree .layerContainer:nth-child(even) .layer, #tree .layerContainer:nth-child(even) .edge {
            background-color: #0f880f;
        }
        #tree .ball.a {
            transform: scale(1.3);
            margin-left: 18px
        }
        #tree .ball.b {
            transform: scale(0.8);
            margin-top: 10px
        }
        #tree .ball.c {
            transform: scale(0.7);
            margin-left: 38px
        }
        #tree .ball.d {
            transform: scale(0.55);
        }
        #tree .ball.e {
            transform: scale(0.55);
            margin-top: -10px
        }
        #tree .ball.f {
            transform: scale(0.55);
            margin-left: 0.........完整代码请登录后点击上方下载按钮下载查看