Главная » Web и Технологии » Простая Рождественская ёлочка для сайта на CSS

Простая Рождественская ёлочка для сайта на CSS

Можно закрыть глаза на то, что видишь. Но нельзя закрыть сердце на то, что ты чувствуешь.

78 0

2-ноября-2022, 21:55   Web и Технологии

Простая Рождественская ёлочка для сайта на CSS

Предлагаю вашему вниманию красивую рождественскую анимированную елочку на CSS для вашего веб-сайта.  Ёлочку можно использовать для оформления отдельного блока, страницы, вывода поздравлений. Всё на ваше усмотрение. Данный сниппет был найден на просторах буржу-нета. Кстати возможен конфликт стилей с Bootstrap, просто задаем всем классам свои уникальные значения. Всех с Наступающими зимними праздниками!

HTML

<div class="container">
  <div class="tree">
  </div>
  <div class="ornament large orange or1">
    <div class="shine"></div>
  </div>
  <div class="ornament medium blue or2">
    <div class="shine"></div>
  </div>
  <div class="ornament small green or3">
    <div class="shine"></div>
  </div>
  <div class="ornament small pink or4">
    <div class="shine"></div>
  </div>
  <div class="ornament large purple or5">
    <div class="shine">
    </div>
  </div>
  <div class="ornament medium purple or6">
    <div class="shine"></div>
  </div>
  <div class="ornament medium blue or7">
    <div class="shine"></div>
  </div>
  <div class="ornament large pink or8">
    <div class="shine"></div>
  </div>
  <div class="ornament medium orange or9">
    <div class="shine"></div>
  </div>
  <div class="ornament medium green or10">
    <div class="shine"></div>
  </div>
  <div class="ornament large pink or11">
    <div class="shine"></div>
  </div>
  <div class="ornament blue large or12">
    <div class="shine"></div>
  </div>
  <div class="star-light"></div>
  <div class="star"></div>
  <div class="star-highlight"></div>
  <div class="trunk"></div>
  <div class="floor"></div>
</div>




CSS

body {
  background: #051342;
}

.container {
  position: relative;
/*   background: #1c1c1c; */
  width: 460px;
  height: 460px;
  margin: auto;
/*   border: 1px solid; */
/*   border-radius: 100px; */
  margin-top: 15vh;
}

.tree {
  position: absolute;
  background: #2e7055;
  width: 65%;
  height: 70%;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  bottom: 13%;
  left: 18%;
  z-index: 2;
}

.floor {
  position: absolute;
  width: 35%;
  height: 15%;
  border-radius: 50%;
  background: #69122a;
  bottom: -8%;
  left: 32%;
}

.star {
  position: absolute;
  width: 20%;
  height: 20%;
  background: #ffdc5e;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  left: 40.5%;
  top: 5%;
  z-index: 3;
}

.star-highlight {
  position: absolute;
  width: 20%;
  height: 20%;
  background: #ffedad;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 50% 70%, 50% 60%, 50% 46%, 50% 36%);
  left: 40.5%;
  top: 5%;
  z-index: 3;
}

.star-light {
  position: absolute;
  width: 20%;
  height: 20%;
  background: #ffefb5;
  filter: opacity(.7);
  border-radius: 50%;
  left: 40.5%;
  top: 5%;
  z-index: 2;
  animation: star 3s ease-in-out infinite;
}



.trunk {
  position: absolute;
  height: 15%;
  width: 10%;
  background: #2e2713;
  bottom: 0;
  left: 45%;
  z-index:1;
}

.ornament {
  position: absolute;
  border-radius: 50%;
  z-index: 3;
}

.large {
  height: 10%;
  width: 10%;
  animation: lights 1.5s linear infinite;
}

.medium {
  height: 7%;
  width: 7%;
  animation: lights 1.4s linear infinite;
}

.small {
  width: 5%;
  height: 5%;
  animation: lights 1.2s linear infinite;
}

.orange {
   background: #FDC590;
}

.pink {
  background: #f799d2;
}

.green {
  background: #9af5c6;
}

.blue {
  background: #7dd4ff;
}

.purple {
  background: #afa6ff;
}

.or1 {
  left: 33%;
  top: 42%;
}

.or2 {
  top: 26%;
  left: 52%;
}

.or3 {
  top: 38%;
  left: 48%;
}

.or4 {
  top: 29%;
  left: 41.5%;
}

.or5 {
  top: 59%;
  left: 35%;
}

.or6 {
  top: 41%;
  left: 59%;
}

.or7 {
  top: 51%;
  right: 42%;
}

.or8 {
  top: 55%;
  right: 26%;
}

.or9 {
  top: 67%;
  left: 55%;
}

.or10 {
  top: 75%;
  left: 42%;
}

.or11 {
  top: 70%;
  left: 21%;
}

.or12 {
  top: 73%;
  right: 22.5%;
}

.shine {
  position: absolute;
  width: 60%;
  height: 60%;
  background: white;
  border-radius: 50%;
  filter: opacity(48%);
  top: 6%;
  right: 10%;
}



@keyframes lights {
  100% {
    filter: brightness(.7);
  }
  50% {
      filter: brightness(1.2);
  }
  0% {
      filter: brightness(.7);
  }
}

@keyframes star {
  100% {
    transform: scale(.5);
  }
  50% {
    transform: scale(1.1);
  }
  0% {
      transform: scale(.5);
  }
}

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
Человек быстро решит загадку пять умножить на пять и минус 25 ?