! Сегодня

Главная » Web и Технологии » Минималистичная елка для сайта на CSS

Минималистичная елка для сайта на CSS

Если хочешь узнать человека, не слушай, что о нём говорят другие, послушай, что он говорит о других.

22-ноября-2023, 21:40   1   0

Минималистичная елка  для сайта на CSS

Предлагаю вашему вниманию очередной вариант минималистичной елки  для сайта на CSS.  Как и в предыдущем варианте елка сделана на SVG.

Размер ёлки и цвет задается в классе #xtree, а цвет звезды и скорость ее вращения в #star.

HTML

<svg version="1.1" id="xtree" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 50 50">
    <g>
        <g>
            <polygon id="star" points="22.64,7.797 25,6.557 27.359,7.797 26.909,5.17 28.816,3.31 26.181,2.925 25,0.535 23.82,2.925 21.183,3.31 
            23.092,5.17 " />
        </g>
        <g>
            <g>
                <polygon points="34.784,19.016 35.636,19.016 25,8.381 18.218,15.162             "/>
            </g>
            <g>
                <path d="M34.506,27.173l-1.98,0.349c0.323,0.192,0.553,0.532,0.553,0.938c0,0.611-0.496,1.105-1.106,1.105
                c-0.611,0-1.104-0.496-1.104-1.105c0-0.266,0.105-0.498,0.259-0.688l-3.443,0.611c0.85,0.074,1.524,0.761,1.524,1.631
                c0,0.916-0.743,1.656-1.656,1.656c-0.919,0-1.658-0.741-1.658-1.656c0-0.655,0.387-1.209,0.938-1.479l-4.348,0.772
                c0.299,0.151,0.51,0.456,0.51,0.813c0,0.51-0.411,0.922-0.921,0.922c-0.509,0-0.918-0.412-0.918-0.922
                c0-0.242,0.096-0.456,0.248-0.62l-10.007,1.776l-2.513,2.513l27.466,2.003l-1.467-1.468h6.776L34.506,27.173z"/>
            </g>
            <g>
                <path d="M16.694,25.974l-3.181,3.182l24.243-4.304l-4.407-4.404l-6.46-1.504c0.371,0.354,0.604,0.853,0.604,1.407
                c0,1.077-0.872,1.95-1.949,1.95c-1.076,0-1.946-0.873-1.946-1.95c0-0.877,0.58-1.607,1.375-1.852l-3.319-0.773
                c0.12,0.203,0.205,0.426,0.205,0.676c0,0.756-0.614,1.37-1.37,1.37c-0.754,0-1.367-0.614-1.367-1.37
                c0-0.476,0.258-0.876,0.628-1.121l-2.963-0.689l-2.425,2.425h3.715l-6.957,6.957L16.694,25.974L16.694,25.974z"/>
            </g>
            <g>
                <path d="M43.016,42.46l-4.811-4.813L33.437,37.3c0.258,0.265,0.42,0.623,0.42,1.018c0,0.81-0.654,1.465-1.462,1.465
                c-0.807,0-1.46-0.655-1.46-1.465c0-0.481,0.251-0.889,0.614-1.153l-8.133-0.594c0.205,0.207,0.332,0.488,0.332,0.801
                c0,0.634-0.512,1.147-1.146,1.147c-0.632,0-1.144-0.511-1.144-1.147c0-0.381,0.197-0.701,0.484-0.909l-3.998-0.294
                c0.54,0.32,0.907,0.9,0.907,1.571c0,1.011-0.82,1.829-1.832,1.829c-1.008,0-1.827-0.818-1.827-1.829
                c0-0.762,0.466-1.414,1.128-1.689l-2.73-0.199l-6.606,6.608h15.829l-1.257,6.979h6.889l-1.259-6.978H43.016z"/>
            </g>
        </g>
    </g>
</svg>


CSS

#star {
    animation: spin 6s linear infinite;
    transform-origin: center;
    fill: #eb2700;
}
#xtree {
    margin: 0 auto;
    width: 400px;
    display: block;
    fill: #3c9c33;
}
@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

Поделиться

Tags

  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent
Что приходит после зимы ?

Редакторы выбирают

Web и Технологии