首页 > 其他分享 >圣诞老人html-css和js没发奥

圣诞老人html-css和js没发奥

时间：2024-11-19 22:20:21浏览次数：1  
标签：10 000000 miterlimit 没发 width stroke html css fill 

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Jingle bells rock!</title>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div id="snow"></div>

<svg version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
     x="0px" y="0px" width="453px" height="378.5px" viewBox="0 0 463 378.5" style="enable-background:new 0 0 463 378.5;"
     xml:space="preserve">
<style type="text/css">
    .st0{fill:#BA883A;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
    .st1{fill:#331111;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
    .st2{fill:#F4D187;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
    .st3{fill:#CC903D;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
    .st4{fill:#331111;stroke:#14100B;stroke-width:2;stroke-miterlimit:10;}
    .st5{fill:#331111;stroke:#BA883A;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
    .st6{fill:#331111;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
    .st7{fill:#BA883A;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
    .st8{fill:#BD2026;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
    .st9{fill:#891C35;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
    .st10{fill:#F7F0F0;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
    .st11{fill:#DBA328;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
    .st12{fill:#F2F2F9;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
    .st13{fill:#F2F2F9;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:10;}
    .st14{fill:#7D4D53;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
    .st15{fill:#89555F;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
    .st16{fill:#684147;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
    .st17{fill:#3D272D;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
    .st18{fill:#331F24;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
    .st19{fill:#FFFFFF;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
    .st20{fill:#F2E4E9;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
    .st21{fill:#F7F5F6;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
    .st22{fill:#F2CED8;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
</style>
<defs>
</defs>
<g id="deer_1_">
    <g id="arm2_1_">
        <path class="st0" d="M202.8,276.6c0,0-8.8-66.4-33.7-61.1c-24.9,5.3,5.7,20.6,5.7,20.6s18.9,9.3,19.4,40.5H202.8z"/>
        <g id="arm_5_">
            <path class="st1" d="M197.9,274.9c0,0-14.2,3.6-7.4,20.5c6.8,16.9,17,2.8,17,2.8s19.2,5.1,8-15.5
                C215.5,282.7,209.1,268.6,197.9,274.9z"/>
        </g>
    </g>
    <g id="arm_4_">
        <path class="st0" d="M76.8,222.3c0,0-57.5-21-59.5-39.5s13,2.5,13,2.5s38,25.3,49.5,28.4S76.8,222.3,76.8,222.3z"/>
        <path class="st1" d="M17.1,187.3c0,0,14.7,0.1,12.4-17.9s-15.7-7.1-15.7-7.1s-17.2-9.8-11.8,13C2.1,175.2,4.7,190.5,17.1,187.3z"
            />
    </g>
    <g id="leg2_1_">
        <path class="st0" d="M92.3,323.3c0,0-3.8,21.5,6.5,36s10.8-36,10.8-36H92.3z"/>
        <path class="st1" d="M87.6,369.5c0,0,14,7.8,27.7,0c0,0-3.8-17.2-13.9-16S87.6,369.5,87.6,369.5z"/>
    </g>
    <g id="leg1_1_">
        <path class="st0" d="M145.6,323.3c0,0-3.8,21.5,6.5,36s10.8-36,10.8-36H145.6z"/>
        <path class="st1" d="M140,369.5c0,0,14,7.8,27.7,0c0,0-3.8-17.2-13.9-16C143.7,354.8,140,369.5,140,369.5z"/>
    </g>
    <g id="body_2_">
        <path id="body_3_" class="st2" d="M88.8,194.8c0,0-36,29-28.2,95.5s122.6,54.5,124.9,3c2.3-51.5-29.2-103.7-29.2-103.7L88.8,194.8
            z"/>
        <path class="st3" d="M71.6,316.5c0,0,5.2-93.2,49.7-97c0,0,29.5-5.2,49.3,101.5C170.6,321,125.8,360.8,71.6,316.5z"/>
    </g>
    <g id="head_1_">
        <g>
            <path class="st4" d="M143.8,87.8c0,0,26.7-18.7,45-14.3c0,0-6,27.3-39.5,36L143.8,87.8z"/>
            <path class="st5" d="M149.3,95.1c0,0,12.6-19,34.7-17.4"/>
        </g>
        <path class="st2" d="M162.8,29c0,0-9.2-30.5-17.2-25.5c0,0-4.2,0.5,1.8,7s10.2,29.2,9.5,32s-2.5,8.2-5,7.5c0,0-4.5-21-20.2-23.5
            s-1.2,6.2-1.2,6.2s17,11.5,13.5,27.2s-28.5,19-28.5,19l27.5,11.4c0,0-0.2-9.6,7.8-21.6c0,0,24.8-1.8,26-7.3c1.2-5.5-10.8-6-22.5,0
            c0,0,1.5-8.7,3.5-7.7s4.8-5.8,27.9-9.2c0,0,16.2-8.6-9.7-4.5c0,0-7,0.4-14.2,4.5c0,0,13.2-11.5,12.8-32.5s-7.6-5.5-7.6-5.5
            S163.3,16,162.8,29z"/>
        <g>
            <path class="st6" d="M86.4,93.2c0,0-18.5-19.7-51.5-9.7c0,0,3.7,29,44.3,34L86.4,93.2z"/>
            <path class="st5" d="M83.9,101.4c0,0-19.7-21.9-44.6-14.7"/>
        </g>
        <path class="st2" d="M74.6,33.7c0,0,8.7-30.5,16.1-25.5c0,0,4,0.5-1.6,7c-5.6,6.5-9.6,29.2-8.9,32c0.7,2.8,2.3,8.2,4.7,7.5
            c0,0,4.2-21,18.9-23.5s1.2,6.2,1.2,6.2S89.1,48.9,92.4,64.7c3.3,15.8,26.7,19,26.7,19L93.4,95.1c0,0,0.2-9.6-7.2-21.6
            c0,0-23.2-1.8-24.3-7.3c-1.2-5.5,10.1-6,21,0c0,0-1.4-8.7-3.3-7.7s-4.5-5.8-26.1-9.2c0,0-15.2-8.6,9-4.5c0,0,6.6,0.4,13.3,4.5
            c0,0-12.4-11.5-11.9-32.5s7.1-5.5,7.1-5.5S74.2,20.7,74.6,33.7z"/>
        <path class="st7" d="M115.3,73.4c0,0-38.5-0.7-40.8,69c-2.3,69.7,8.3,68,47,69.3c38.7,1.3,55.9-18.7,42.3-77.7
            C149.3,71.1,139.2,74.4,115.3,73.4z"/>
        <circle cx="105.1" cy="129" r="7.2"/>
        <circle cx="133.1" cy="129" r="7.2"/>
        <ellipse class="st8" cx="119.1" cy="176.5" rx="30.2" ry="18.2"/>
    </g>
</g>
<g id="santa_2_">
    <g class="body">
        <path class="st9" d="M218.2,271.9c0,0,1.5,11.5,15.4,23.5v38.8l23.4,3.8c0,0,12.5-21.8,12-30.5c0,0,19.5,9,46.5,0.5
        c0,0-4.2,18.8,1.7,29l29.6-0.5c0,0,3.8-28.2-2-51.2L218.2,271.9z"/>
    <path id="coat-fur_1_" class="st10" d="M221.9,243.9c0,0-11.2,11.5-12.7,27s126,36,169,13c0,0-4-26-12.5-31.5
        S341.1,273.4,221.9,243.9z"/>
    <path id="coat_1_" class="st9" d="M287.2,120c0,0-46.3,42.3-66.3,101.9c-21.2,63,101.8,51.5,101.8,51.5s37.5-2,45-16
        S330.3,142.6,287.2,120z"/>
    <g id="belt_1_">
        <path id="stroke_1_" class="st10" d="M218.7,233.7c0,0,66.5,29.1,147.2,5.1c0,0,3.5,10.4,2.9,16c0,0-66.1,21.2-145.6-3.8
            C223.1,251.1,216.5,241.3,218.7,233.7z"/>
        <path id="knob_1_" class="st11" d="M307.2,242.5c0,0-17.8,2.4-26.8,0.1c0,0-1.8,16.6-1.8,17.8s-1.1,6.1,4.3,6.4s23.4,0.2,25.1-2.1
            S309.2,248.8,307.2,242.5z M303.5,261.1c0,0-5.2,1.1-12.4,1.8s-6.5-4.2-6.5-4.2V249c15.1-1.6,18.6,0,18.6,0
            C305.6,254.1,303.5,261.1,303.5,261.1z"/>
    </g>
    <g id="arm_3_">
        <path id="sleave_1_" class="st9" d="M241.7,148.7c0,0-19,17.2-36,23.3l3.5,27.4c0,0,38.6-11.4,48.1-26.5c9.4-15.1,0,0,0,0
            L241.7,148.7"/>
        <g id="hand_1_">
            <path class="st12" d="M209.5,206.2l-2.4,0.6c-6.4,1.6-12.9-2.4-14.5-8.8l-4.3-17.7c-1.6-6.4,2.4-12.9,8.8-14.5l2.4-0.6
                c6.4-1.6,12.9,2.4,14.5,8.8l4.3,17.7C219.9,198.1,215.9,204.6,209.5,206.2z"/>
            <path class="st13" d="M203.3,170.4c0,0-5.9-3.7-6.6-15c-0.7-11.3-2-19.7-8.3-14.3c-6.3,5.3-3.2,40,3.2,59.7
                S218.3,199.7,203.3,170.4z"/>
            
                <ellipse transform="matrix(0.9967 -8.174965e-02 8.174965e-02 0.9967 -14.6884 15.6977)" class="st12" cx="184.4" cy="187.2" rx="18" ry="24.8"/>
        </g>
    </g>
    <g id="bag_1_">
        <path class="st14" d="M346.7,139.4c0,0,15.3-16.7,36.7,29c0,0,17-6.7,22.3,26.7c0,0-3.8,14.7-36.9,7.3
            C368.8,202.4,361.1,148.8,346.7,139.4z"/>
        <path class="st14" d="M411.1,211.3c0,0,56,24.4,37,82.9s-101.3,28.9-101.3,28.9s-70-28.9,5.3-114.6
            C352.1,208.5,384.1,198.9,411.1,211.3z"/>
        <path class="st15" d="M368.5,220.7c0,0,28.2,24.3,47.5-8.3c0,0,7-21.7-22.3-19S364.4,211.4,368.5,220.7z"/>
        <path class="st16" d="M363.7,213.7c0,0,11,15.3,14.5,0c0,0,33.5,18,4.2-30.7c-29.3-48.7-35.7,38.7-35.7,38.7
            S360.3,234.6,363.7,213.7z"/>
    </g>
    <path id="hand2_1_" class="st12" d="M370.2,171c0,0-9.6,10.9-1.4,15.7s21.9,12.1,22.9-8.7s-17.1-45.8-33.2-28.3
        c-16.1,17.5-0.5,38.9,7,31.5"/>
    </g>
    <g id="shoe1_1_">
        <path class="st17" d="M265.2,325.9c0,0-12.6,9.8-33.7-8.7c0,0-2.5,25.2,2.5,33.2C234,350.4,248.9,380.5,265.2,325.9z"/>
        <path class="st18" d="M242.8,339.3c0,0-21.6,1.5-21.1,33.4c0,0,38.2,6.4,45.6,0S251.6,331.6,242.8,339.3z"/>
    </g>
    <g id="shoe2_1_">
        <path class="st17" d="M349.7,325.9c0,0-15.3,12.3-39.2-2.4c0,0,2.8,25.1,9.1,32.2C319.6,355.7,342.9,382.5,349.7,325.9z"/>
        <path class="st18" d="M331.6,341.3c0,0-21.6,1.5-21.1,33.4c0,0,38.2,6.4,45.6,0S340.3,333.6,331.6,341.3z"/>
    </g>
    <g class="face">
        <g id="hat_2_">
            <path class="st9" d="M325.7,68.1c0,0,10.5-34-63.9-37.7c0,0-47.8,6.3-56.4,37.7s-17,33.9-17,33.9s23.3,24.4,49.7-25.2l-11.6,17.7
                L325.7,68.1z"/>
            <circle class="st19" cx="191.6" cy="113.3" r="17.6"/>
            <path class="st10" d="M277.1,94.4c-29.7,10.6-24.7,1.7-47,19.9c0,0-18.3-2.2,0-23.8s62.3-35,84-30.3c21.7,4.7,32.7,12.3,15.3,24.7
                C312.1,97.1,287.2,90.7,277.1,94.4z"/>
        </g>
        <path id="face_1_" class="st20" d="M227.1,108.7c0,0,9,72.9,74.7,63.3s27.7-93.9,27.7-93.9S283.4,66.7,227.1,108.7z"/>
        <path id="beard_1_" class="st21" d="M275.1,157.2c0,0,12.2,10,23.8,8.7c11.7-1.3,16.9-20.3,16.9-20.3s27.6-11.3,20.2-35.2
            c-7.3-23.8-2.2-22.3-2.2-22.3s9.5,1.8,13.3,12.8l-3.3,1c0,0,9,8.2,9.2,13l-3.3,0.8c0,0,7.7,4.3,7.2,15.5c0,0-4.3,0.7-4.8-0.8
            c0,0,5.8,3.8,6.5,21.8l-4.2-1.9c0,0,6.5,7.7,3,13.1l-4.7-1.3c0,0,6.8,12.3-3,12.3c0,0,6.2,10.7-3.7,15c0,0,3.3,6.3-2,14.2l-2.3-3.3
            c0,0,1.5,10.2-3.5,14.5l-2.8-2.2c0,0,4.2,6.2-3.5,11.2l-2.8-4.5c0,0,2.7,11.7-1.2,14.3l-4.2-2.7c0,0,3,9-0.7,11l-3.8-2.3l-3.8,6.3
            c0,0-5.2-2.7-5.3-7.3l-3.7,3.2c0,0-6.5-8-6.5-10c0,0-1.5,6.3-8.2-3c0,0,0.2,4.8-6-1.7s-6.8-7.7-6.8-7.7s0.5,4.7-5.8,0.7
            c-6.3-4-6.8-6-6.8-6s1.3,5.8-2.2,3.3s-6.8-10.2-7-12.8l-1.3,4.7c0,0-15.3-12.8-18.3-27.7l-3.2,4.2c0,0-6.5-9.4-4.2-18.8
            c0,0-2.8-0.9-3,3.6c-0.2,4.5-4.5-7.5,1-19c0,0-4.7-0.3-4.5,3.7c0.2,4-1.3-8.8,1.7-16.5l-4.3,3.3c0,0,1.8-26,9.2-27.8
            c7.3-1.8,8.7,14.4,8.7,14.4s1.8,23.7,30.3,23.1L275.1,157.2z"/>
        <g id="nose-mustache_1_">
            <path class="st10" d="M290.5,134.6c0,0-13.1-4.7-25.8,11.8s-24.8,20.3-24.8,20.3s35.2,18.2,56-13c0,0,29.3,17.2,53.8-6
                c0,0-13-13-26.3-16.3C310.1,128.1,299.2,126.4,290.5,134.6z"/>

                <ellipse transform="matrix(0.9528 -0.3036 0.3036 0.9528 -28.1864 94.7316)" class="st22" cx="290.5" cy="138" rx="15.9" ry="12.3"/>
        </g>
        <circle id="eye-right_1_" cx="315.8" cy="115.7" r="4.2"/>
        <circle id="eye-left_1_" cx="261.8" cy="127.7" r="4.2"/>
        <path id="brow-right_1_" class="st10" d="M299.6,101.1c0,0,12.2-8.7,22.7-6.4c0,0,8.4,3.8-1.3,8.2c0,0-10.2-3.3-20.3,6.6
            C300.6,109.5,288.8,108.9,299.6,101.1z"/>
        <path id="brow-left_1_" class="st10" d="M247.6,114.1c0,0,12.2-8.7,22.7-6.4c0,0,8.4,3.8-1.3,8.2c0,0-10.2-3.3-20.3,6.6
            C248.6,122.5,236.8,121.9,247.6,114.1z"/>
    </g>
</g>
</svg>

<svg version="1.1" class="snowbg" x="0px" y="0px" width="704px" height="153.1px" viewBox="0 0 704 153.1" style="enable-background:new 0 0 704 153.1;">
<style type="text/css">
    .st0xx{fill:#FFFFFF;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
</style>
<defs>
</defs>
<path class="st0xx" d="M1,48.1c0,0,97-46,233,18s233-29,233-29s129-85,236,6v109H1V48.1z"/>
</svg>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/howler/2.0.2/howler.min.js'></script>

    <script src="js/index.js"></script>

</body>
</html>

 

标签：10,000000,miterlimit,没发,width,stroke,html,css,fill
From： https://www.cnblogs.com/muzhaodi/p/18555726

相关文章

  • 2025年前端面试准备css篇
    1.css盒子模型css包含了内容(content),内边距(padding),边框(border),外边距(margin)等因素。css标准盒子模型宽包括：margin+border+padding+widthIE盒子模型的宽包括：border+padding+width 2.css选择器优先级id选择器:#main{}class选择器:.main{}......
  • 【前端基础】1.CSS文件的加载和解析顺序
    HTML中，使用<link>标签先后加载两个CSS文件，其加载和解析顺序主要遵循以下规则：      CSS文件的加载与解析在现代浏览器中是边加载边解析的过程，而不是等所有CSS文件加载完毕后再进行解析。1.加载顺序：CSS文件按照<link>标签在HTML中的书写顺序加载。......
  • CSS在Table列右上角添加标记简单实现
    实现效果代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>TableRibbonDemo</......
  • 从五种网页布局到八种常用布局四十二种CSS方法
    /*contentstyleend*//*五种布局一、流式布局相对于屏幕大小设置元素百分百自适应。float:right或left二、网格布局Grid二位表格（网格）。display:grid。三、弹性布局Flexbox容器内自动调整元素大小和位置。display:flex;四、浮动布局float多列布局。overflow:hidden;floa......
  • MSHTA（Microsoft HTML Application Host）是一个 Microsoft Windows 系统中用于执行 .hta
    MSHTA（MicrosoftHTMLApplicationHost）是一个MicrosoftWindows系统中用于执行.hta（HTML应用程序）文件的程序。它的全名是MicrosoftHTMLApplicationHost，是一个执行HTML应用程序的可执行文件。.hta文件是一种包含HTML、CSS和JavaScript的文件，它可以像传统的桌面应用程......
  • 大学生HTML期末大作业——HTML+CSS+JavaScript南宁绿城
    HTML+CSS+JS【旅游网站】网页设计期末课程大作业web前端开发技术web课程设计网页规划与设计......
  • Vue项目，在less/scss中使用变量
    vue组件中，如何在less/scss中使用变量，以二次封装el-tab样式组件为例<!--*@description封装el-tab样式!--><template><divclass="tab-comp":style="{'--item-max-width':itemMaxWidth,'--tab-comp-height':height,'--tabs-lab......
  • CSS盒子模型的外边距详解
    CSS盒子模型的外边距（margin）是控制元素之间间距的重要属性。以下是与CSS盒子模型外边距相关的所有重要知识点：一、外边距的概念外边距是指盒子边框与其他元素边框之间的空白区域。它用于控制元素之间的距离，从而调整页面布局。二、外边距的设置在CSS中，可以使用margin属性......
  • HTML·第八章 利用CSS制作导航栏菜单
    8.1水平顶部导航栏水平顶部导航栏（HorizontalTopNavigationBar）是网页设计中常用的一种导航栏布局，通常位于页面的顶部，以水平的方式排列导航选项。这种布局便于用户快速访问网站的主要部分。常见的设计元素包括菜单项、图标、搜索框、以及用户信息等。一、水平顶部导航栏......
  • 第八章 利用CSS制作导航菜单
    8.1水平顶部导航栏8.1.1简单水平导航栏的设计与实现8.1.1.1导航栏的创建通常使用HTML的无序列表（<ul>）和列表项（<li>）来创建导航栏的基本结构。通过CSS对列表进行样式设置，去除默认的列表样式，如项目符号等，使其呈现为水平排列的导航栏<!DOCTYPEhtml><html> <head> <......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99