Решено Украшения для сайта

Qqwer Hosms · Суббота в 16:32

Приветствую, есть ли какие либо украшения для сайта для нового года? По типу гирлянды на верх снега и т.п и куда вставлять

AIT Pestoletov · Суббота в 17:12

Снег вставлять в файловый менеджер сайта index.HTML

Снег:

Код:

<style>
        body {
            background-color: #fff;
            color: #333;
            font-family: Arial, sans-serif;
        }
        
        .snowflake {
            position: absolute;
            top: -50px;
            animation: fall linear infinite alternate;
            opacity: 0.7;
        }

        @keyframes fall {
            from {top: -50px;}
            to {top: 100vh;}
        }
    </style>
</head>
<body>
    
    <div class="snowflakes"></div>

    <script>
        function createSnow() {
            const snowContainer = document.querySelector('.snowflakes');
            
            for(let i=0; i<100; i++) {
                let flake = document.createElement('span');
                flake.classList.add('snowflake');
                flake.style.left = `${Math.random()*100}%`;
                flake.style.animationDuration = `${Math.random()*5+3}s`;
                flake.innerHTML = '❄️';
                
                snowContainer.appendChild(flake);
            }
        }
        
        window.onload = () => {
            createSnow();
        };

Гирлянда:

Код:

   <style>
    
        .garland {
            display: flex;
            justify-content: center;
            margin-top: 50px;
        }
        
        .light-bulb {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
            animation: blink 1s ease-in-out infinite alternate;
        }
        
        @keyframes blink {
            0%, 100% {opacity: 1;}
            50% {opacity: 0.3;}
        }
        
        .bulb-red {background-color: red;}
        .bulb-green {background-color: green;}
        .bulb-blue {background-color: blue;}
        .bulb-yellow{border: 2px solid yellow; background-color: transparent;}
    </style>
</head>
<body>
    
    <div class="garland">
        <div class="light-bulb bulb-red"></div>
        <div class="light-bulb bulb-green"></div>
        <div class="light-bulb bulb-blue"></div>
        <div class="light-bulb bulb-yellow"></div>
    </div>

Елка

Код:

   <style>
      
        .christmas-tree {
            position: fixed;
            right: 20px;
            top: 20px;
            z-index: 1000;
            padding: 10px;
            cursor: pointer;
        }
        
        .tree-leaf {
            width: 100px;
            height: 100px;
            background-image: url("https://via.placeholder.com/100/00ff00");
            background-size: cover;
        }
    </style>
</head>
<body>
    
    <a href="#" class="christmas-tree"><img src="https://via.placeholder.com/100/00ff00" alt="Елочная ветвь" class="tree-leaf"/></a>

Надеюсь помог.

Qqwer Hosms · Суббота в 17:43

AIT Pestoletov написал(а):

Снег вставлять в файловый менеджер сайта index.HTML

Снег:

Код:

<style>
        body {
            background-color: #fff;
            color: #333;
            font-family: Arial, sans-serif;
        }
       
        .snowflake {
            position: absolute;
            top: -50px;
            animation: fall linear infinite alternate;
            opacity: 0.7;
        }

        @keyframes fall {
            from {top: -50px;}
            to {top: 100vh;}
        }
    </style>
</head>
<body>
   
    <div class="snowflakes"></div>

    <script>
        function createSnow() {
            const snowContainer = document.querySelector('.snowflakes');
           
            for(let i=0; i<100; i++) {
                let flake = document.createElement('span');
                flake.classList.add('snowflake');
                flake.style.left = `${Math.random()*100}%`;
                flake.style.animationDuration = `${Math.random()*5+3}s`;
                flake.innerHTML = '❄️';
               
                snowContainer.appendChild(flake);
            }
        }
       
        window.onload = () => {
            createSnow();
        };

Гирлянда:

Код:

   <style>
   
        .garland {
            display: flex;
            justify-content: center;
            margin-top: 50px;
        }
       
        .light-bulb {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
            animation: blink 1s ease-in-out infinite alternate;
        }
       
        @keyframes blink {
            0%, 100% {opacity: 1;}
            50% {opacity: 0.3;}
        }
       
        .bulb-red {background-color: red;}
        .bulb-green {background-color: green;}
        .bulb-blue {background-color: blue;}
        .bulb-yellow{border: 2px solid yellow; background-color: transparent;}
    </style>
</head>
<body>
   
    <div class="garland">
        <div class="light-bulb bulb-red"></div>
        <div class="light-bulb bulb-green"></div>
        <div class="light-bulb bulb-blue"></div>
        <div class="light-bulb bulb-yellow"></div>
    </div>

Елка

Код:

   <style>
     
        .christmas-tree {
            position: fixed;
            right: 20px;
            top: 20px;
            z-index: 1000;
            padding: 10px;
            cursor: pointer;
        }
       
        .tree-leaf {
            width: 100px;
            height: 100px;
            background-image: url("https://via.placeholder.com/100/00ff00");
            background-size: cover;
        }
    </style>
</head>
<body>
   
    <a href="#" class="christmas-tree"><img src="https://via.placeholder.com/100/00ff00" alt="Елочная ветвь" class="tree-leaf"/></a>

Надеюсь помог.

В любое место кода вставлять?

AIT Pestoletov · Суббота в 18:00

Qqwer Hosms написал(а):
В любое место кода вставлять?

Дай код сайта, дам готовый с украшениями

Qqwer Hosms · Суббота в 18:02

AIT Pestoletov написал(а):
Дай код сайта, дам готовый с украшениями

В лс скинул

LIVE SAMP

Решено Украшения для сайта

Добро пожаловать!

Qqwer Hosms

AIT Pestoletov

AIT Pestoletov

Qqwer Hosms

AIT Pestoletov

Qqwer Hosms