! Сегодня

Главная » Web и Технологии » Новогодняя кнопка Вверх для сайта

Новогодняя кнопка Вверх для сайта

Не всегда просит прощения тот, кто виноват. Просит прощения тот, кто дорожит отношениями.

6-декабря-2023, 21:59   14   0

Новогодняя кнопка Вверх для сайта

Простая красивая новогодняя кнопка на верх для сайта в виде Санта Клауса.

HTML

<div class="santa-container">
    <a href="#">    
        <span class="santa">
            <span class="cap"></span>
            <span class="head">
                <span class="eyes"></span>
            </span>
            <span class="hand"></span>
            <span class="hand left"></span>
            <span class="body">
                <span class="arrow"></span>
            </span>
            <span class="legs"></span>
        </span>
    </a>
</div>


CSS

Изменить масштаб Санты можно  через свойство transform: scale(0.3);

:root{
    scroll-behavior:smooth
}    
.santa-container {
    position: fixed;
    z-index: 99999;
    bottom: 10px;
    right: 110px;
    transform: scale(0.3);
}
.santa-container *, 
.santa-container *:after, 
.santa-container *:before {
    box-sizing: border-box;
    content: '';
    position: absolute;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.1);
}
.santa {
    width: 300px;
    height: 300px;
    margin: auto;
    left: 0;
    right: 0;
    bottom: 75px;
    z-index: 25;
}
.santa:after {
    background: #3e3e3e;
    position: absolute;
    width: 200px;
    height: 200px;
    z-index: 1;
    right: -10px;
    top: -5px;
}
.santa .cap {
    background: #fff;
    width: 20px;
    height: 20px;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 7;
    top: -85px;
}
.santa .cap:after {
    width: 70px;
    height: 70px;
    background: #f00;
    left: -24px;
    top: 9px;
    z-index: 3;
}
.santa .cap:before {
    background: #fff;
    width: 80px;
    height: 50px;
    left: -30px;
    z-index: 5;
    top: 23px;
    border-radius: 50% 50% 0 0;
}
.santa .head {
    background: #E2D7C7;
    z-index: 10;
    width: 50px;
    height: 50px;
    left: 0;
    right: 0;
    margin: auto;
    top: -40px;
}
.santa .head:before {
    width: 100px;
    height: 100px;
    background: #fff;
    top: 10px;
    left: -25px;
}
.santa .head:after {
    background: #E2D7C7;
    width: 24px;
    height: 12px;
    z-index: 3;
    left: 0;
    right: 0;
    margin: auto;
    top: 30px;
    border-radius: 0 0 20px 20px;
}
.santa .head .eyes {
    width: 8px;
    height: 8px;
    background: #000;
    z-index: 4;
    left: 14px;
    top: 5px;
    box-shadow: 15px 0 #3e3e3e;
}
.santa .body {
    left: 0;
    top: 0;
    width: 300px;
    height: 300px;
    background: #f00;
    overflow: hidden;
    z-index: 5;
}
.santa .arrow {
    background-image: url("dаta:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='18 15 12 9 6 15'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: cover;
    width: 250px;
    height: 250px;
    left: 30px;
    top: 52px;
    transition: 0.2s;
}
.santa .arrow:hover {
    top: 40px;
}
.santa .hand {
    left: -20px;
    top: 120px;
    background: #fff;
    height: 60px;
    width: 60px;
    z-index: 7;
}
.santa .hand:after {
    height: 30px;
    width: 30px;
    background: #E2D7C7;
    left: 20px;
    bottom: 10px;
}
.santa .hand.left {
    left: auto;
    right: 45px;
    top: 5px;
}
.santa .hand.left:after {
    bottom: 30px;
    left: 12px;
}
.santa .legs, 
.santa .legs:after {
    width: 20px;
    height: 60px;
    z-index: 10;
    background: #f00;
    bottom: -45px;
    left: 128px;
    border-radius: 0 0 10px 10px;
    border-bottom: 20px solid #3e3e3e;
}
.santa .legs:after {
    left: 31px;
    bottom: -20px;
}    
 
.dmtop {
    display: none;
}


Вот в принципе и всё. Всех с наступающими праздниками!!!

Поделиться

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
2+2*2= ?

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

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