🎅 Projekt (6) Światełka choinkowe HTML i Christmas tree lights

Życzę wszystkim fajnej zimy

2021 / 2022

Zapraszam do subskrybowania strony internetowej

Feel free to subscribe to the website

Dzisiaj przedstawiam kod html i css3 do zrobienia światełek choinkowych z animacją na stronie internetowej. Poniżej jest kod cały html i css. Trzeba pamiętać, że dodatkowo powinno się dołączyć responsy wnosić strony.

Today I present the html and css3 code for making Christmas lights with animation on the website. Below is the entire html and css code. You have to remember that the website's responsiveness should also be added.

Heute präsentiere ich den HTML- und CSS3-Code zum Erstellen von Weihnachtsbeleuchtung mit Animation auf der Website. Unten ist der gesamte HTML- und CSS-Code. Sie müssen daran denken, dass auch die Reaktionsfähigkeit der Website hinzugefügt werden sollte.

🦌 🍪 🥛🍷 | 🎅🎄🎁 | ⛄ 🔥 🎄 🎁 🧦 🔔 🎶 🕯

I jak, może być ? Pamiętajcie, że na stronie blogspot w miejscu tworzenia posta, trzeba być w widoku html. Znajduje się po lewej stronie na górze. Najpierw używamy znacznika <style> tutaj wpisujemy kod css i trzeba go zamknąc </style> i następnie wpisujemy kod html.

And how can it be :)? There is a free code on the website for making a Christmas banner. Remember that on the blogspot page where the post was created, you need to be in html view. It is located on the top left. First, we use the <style> tag, here we enter the css code and we have to close it </style> and then we enter the html code.

Und wie kann es sein :)? Auf der Website gibt es einen kostenlosen Code zum Erstellen eines Weihnachtsbanners. Denken Sie daran, dass Sie sich auf der Blogspot-Seite, auf der der Beitrag erstellt wurde, in der HTML-Ansicht befinden müssen. Es befindet sich oben links. Zuerst verwenden wir das <style>-Tag, hier geben wir den CSS-Code ein und müssen ihn schließen </style> und dann geben wir den HTML-Code ein.

🦌 🍪 🥛🍷 | 🎅🎄🎁 | ⛄ 🔥 🎄 🎁 🧦 🔔 🎶 🕯

KOD HTML

KOD CSS3

body{
    margin: 0;
    padding: 0;
    background: rgb(15, 15, 15);
}
div{
    position: absolute;
    margin: 10px;
    padding: 10px;
    width: 100%;
    height: 100%;
    background: rgb(46, 2, 2);
}
ul{
    position: absolute;
    width: 100%;
    margin: 11px 0 0;
    padding: 0;
    border-top: 2px solid #2a773d;
    display: flex;

}
ul li{
    list-style: none;
    position: relative;
    top: -9px;
    width: 20px;
    height: 40px;
    border-radius: 38% 38% 50% 50%;
    background: rgba(255,255,255,.1);
    margin: 13px;
    
}
ul li::before{
content: "";
position: absolute;
top: -7px;
left: 5px;
width: 10px;
height: 8px;
background: #444444;

}
ul li::after{
    content: "";
    position: absolute;
    top: -19px;
    left: 10px;
    width: 45px;
    height: 26px;
    border-bottom: 2px solid #2a773d;
    border-radius: 0 0 35% 35%;
      
}
ul li:last-child::after
{
    border-bottom: none;
}
ul li:nth-child(3n+1)
{
    background: rgba(255,255,0,1);
    animation: animate1 1.5s linear infinite;
}
@keyframes animate1
{
    0%
    {
        background: rgba(255,255,0,.2);
    }
    50%
    {
        background: rgba(255,255,0,1);
        box-shadow: 0 0 25px rgba(255,255,0,1),0 0 45px rgba(255,255,0,1);
    }
    100%
    {
        background: rgba(255,255,0,.2);
    }
}
ul li:nth-child(3n+2)
{
    background: rgba(255,4,4,1);
    animation: animate2 1.3s linear infinite;
}
@keyframes animate2
{
    0%
    {
        background: rgb(255, 4, 4,.2);
    }
    50%
    {
        background: rgba(255,4,4,1);
        box-shadow: 0 0 25px rgba(255,4,4,1),0 0 45px rgba(255,4,4,1);
    }
    100%
    {
        background: rgba(255,4,4,.2);
    }
}
ul li:nth-child(3n+3)
{
    background: rgb(18, 223, 10);
    animation: animate3 1.1s linear infinite;
}
@keyframes animate3
{
    0%
    {
        background: rgb(18, 223, 10,.2);
    }
    50%
    {
        background: rgba(18, 223, 10,1);
        box-shadow: 0 0 25px rgba(18, 223, 10,1),0 0 45px rgba(18, 223, 10,1);
    }
    100%
    {
        background: rgba(18, 223, 10,.2);
    }
}
.zdj{
        position: relative;
        top: 12%;
       
        
    
    }

Dla was mały projekcik / zapraszam do subscrycji na Youtube :)

ATOM CRAFT MAXIMO

Szukaj na tym blogu