Рождественская елка на CSS для сайта

От классики до абстракционизма, Рождественская елка Эндрю Хоукса состоит из множества разноцветных треугольников, каждый из которых снабжен эффектом переворота, вызываемым курсором. Ключевой особенностью решения является то, что при каждой перекомпиляции SCSS дерево выглядит по-разному. Этот блок также украшен падающим снегом, который создает прекрасное зимнее настроение.

HTML

<div class="container">
  <div class="tree">
    <div class="tree__row">
      <div class="tree__node"></div>
    </div>
    <div class="tree__row">
      <div class="tree__node"></div>
      <div class="tree__node"></div>
      <div class="tree__node"></div>
    </div>
    <div class="tree__row">
      <div class="tree__node"></div>
      <div class="tree__node"></div>
      <div class="tree__node"></div>
      <div class="tree__node"></div>
      <div class="tree__node"></div>
    </div>
    <div class="tree__row">
      <div class="tree__node"></div>
      <div class="tree__node"></div>
      <div class="tree__node"></div>
      <div class="tree__node"></div>
      <div class="tree__node"></div>
      <div class="tree__node"></div>
      <div class="tree__node"></div>
    </div>
    <div class="tree__row">
      <div class="tree__node"></div>
      <div class="tree__node"></div>
      <div class="tree__node"></div>
      <div class="tree__node"></div>
      <div class="tree__node"></div>
    </div>
    <div class="tree__row">
      <div class="tree__node"></div>
      <div class="tree__node"></div>
      <div class="tree__node"></div>
      <div class="tree__node"></div>
      <div class="tree__node"></div>
      <div class="tree__node"></div>
      <div class="tree__node"></div>
    </div>
    <div class="tree__row">
      <div class="tree__node"></div>
      <div class="tree__node"></div>
      <div class="tree__node"></div>
      <div class="tree__node"></div>
      <div class="tree__node"></div>
      <div class="tree__node"></div>
      <div class="tree__node"></div>
      <div class="tree__node"></div>
      <div class="tree__node"></div>
    </div>
    <div class="tree__row">
      <div class="tree__node"></div>
      <div class="tree__node"></div>
      <div class="tree__node"></div>
      <div class="tree__node"></div>
      <div class="tree__node"></div>
      <div class="tree__node"></div>
      <div class="tree__node"></div>
      <div class="tree__node"></div>
      <div class="tree__node"></div>
      <div class="tree__node"></div>
      <div class="tree__node"></div>
    </div>
    <div class="tree__row">
      <div class="tree__node"></div>
      <div class="tree__node"></div>
      <div class="tree__node"></div>
      <div class="tree__node"></div>
      <div class="tree__node"></div>
      <div class="tree__node"></div>
      <div class="tree__node"></div>
      <div class="tree__node"></div>
      <div class="tree__node"></div>
    </div>
    <div class="tree__row">
      <div class="tree__node"></div>
      <div class="tree__node"></div>
      <div class="tree__node"></div>
      <div class="tree__node"></div>
      <div class="tree__node"></div>
      <div class="tree__node"></div>
      <div class="tree__node"></div>
      <div class="tree__node"></div>
      <div class="tree__node"></div>
      <div class="tree__node"></div>
      <div class="tree__node"></div>
    </div>
    <div class="tree__row">
      <div class="tree__node"></div>
      <div class="tree__node"></div>
      <div class="tree__node"></div>
      <div class="tree__node"></div>
      <div class="tree__node"></div>
      <div class="tree__node"></div>
      <div class="tree__node"></div>
      <div class="tree__node"></div>
      <div class="tree__node"></div>
      <div class="tree__node"></div>
      <div class="tree__node"></div>
      <div class="tree__node"></div>
      <div class="tree__node"></div>
    </div>
    <div class="tree__row">
      <div class="tree__node"></div>
      <div class="tree__node"></div>
      <div class="tree__node"></div>
      <div class="tree__node"></div>
      <div class="tree__node"></div>
      <div class="tree__node"></div>
      <div class="tree__node"></div>
      <div class="tree__node"></div>
      <div class="tree__node"></div>
      <div class="tree__node"></div>
      <div class="tree__node"></div>
      <div class="tree__node"></div>
      <div class="tree__node"></div>
      <div class="tree__node"></div>
      <div class="tree__node"></div>
    </div>
  </div>
</div>
<div class="snow">
  <div class="snow__flake"></div>
  <div class="snow__flake"></div>
  <div class="snow__flake"></div>
  <div class="snow__flake"></div>
  <div class="snow__flake"></div>
  <div class="snow__flake"></div>
  <div class="snow__flake"></div>
  <div class="snow__flake"></div>
  <div class="snow__flake"></div>
  <div class="snow__flake"></div>
  <div class="snow__flake"></div>
  <div class="snow__flake"></div>
  <div class="snow__flake"></div>
  <div class="snow__flake"></div>
  <div class="snow__flake"></div>
  <div class="snow__flake"></div>
  <div class="snow__flake"></div>
  <div class="snow__flake"></div>
  <div class="snow__flake"></div>
  <div class="snow__flake"></div>
  <div class="snow__flake"></div>
  <div class="snow__flake"></div>
  <div class="snow__flake"></div>
  <div class="snow__flake"></div>
  <div class="snow__flake"></div>
  <div class="snow__flake"></div>
  <div class="snow__flake"></div>
  <div class="snow__flake"></div>
  <div class="snow__flake"></div>
  <div class="snow__flake"></div>
  <div class="snow__flake"></div>
  <div class="snow__flake"></div>
  <div class="snow__flake"></div>
  <div class="snow__flake"></div>
  <div class="snow__flake"></div>
  <div class="snow__flake"></div>
  <div class="snow__flake"></div>
  <div class="snow__flake"></div>
  <div class="snow__flake"></div>
  <div class="snow__flake"></div>
</div>

SCSS

// Quick N Dirty
// Works in latest Chrome & FF

@import "bourbon";

// Basic Reset

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

html {
  font-size: 16px;
}

body {
  font-family: 'Roboto', sans-serif;
  background: #222;
}

// Colour Vars

$c_0: #f79fc5;
$c_1: #ff6d51;
$c_2: #f3b140;
$c_3: #f9d53a;
$c_4: #87b1d3;
$c_5: #5bd9c3;
$c_6: #7861be;
$c_7: #a9c688;

$color-list: $c_0, $c_1, $c_2, $c_3, $c_4, $c_5, $c_6, $c_7;

// Container

.container {
  @include display(flex);
  position: relative;
  z-index: 100;
  @include justify-content(center);
  @include align-items(center);
  height: 100%;
  height: 100vh;
}

// Tree

.tree {
  
  &__row {
    @include display(flex);
    @include justify-content(center);
    @include align-items(center);
  }
  
  &__node {
    z-index: 100;
    width: 0;
    height: 0;
    margin: 0 -10px;
    border-style: solid;
    @include transition(transform 0.8s ease);
    @include transform(rotateY(0deg) scale(1.01));
    will-change: transform;
    @include animation-name(sparkle);
    @include animation-timing-function(ease);
    @include animation-duration(1s);
    @include animation-iteration-count(infinite);
    
    &:hover {
      @include transform(rotateY(180deg) scale(0.99));
    }
    
    &:nth-of-type(odd) {
      border-width: 0 20px 34.6px 20px;
      border-top-color: transparent !important;
      border-right-color: transparent !important;
      border-bottom-color: $c_1;
      border-left-color: transparent !important;
    }
    
    &:nth-of-type(even) {
      border-width: 34.6px 20px 0 20px;
      border-top-color: $c_3;
      border-right-color: transparent !important;
      border-bottom-color: transparent !important;
      border-left-color: transparent !important;
    }
    
    // Colour shift

    @each $colour in $color-list {

      $i: index($color-list, $colour);
      $n: random(7);
      
      &:nth-of-type(#{$i}n+#{$n}) {
        border-color: $colour;
      }
      
    }
    
    // Load random animation
    
    @each $colour in $color-list {
      $i: index($color-list, $colour);
      $n: random(9);
      $a: random(1500) + 1000;
      
      &:nth-of-type(#{$i}n+#{$n}) {
        @include animation-duration(#{$a}ms);
      }
      
    }

  }
 
}

// Snow

.snow {
  position: absolute;
  z-index: 1;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.3;
  overflow: hidden;
  
  &__flake {
    position: absolute;
    top: -300px;
    left: 0;
    width: 300px;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 300px 1200px;
    background-position: top left;
    background-image: url(https://andrew-hawkes-media.s3.amazonaws.com/codepen/snow/snow-flake-1.png);
    @include animation-name(snowflake);
    @include animation-timing-function(linear);
    @include animation-duration(10s);
    @include animation-iteration-count(infinite);
    
    // Flake random

    @for $i from 1 through 40 {
      $left: (2.5% * $i);
      $a: random(3000) + 1000;

      &:nth-of-type(#{$i}n) {
        left: $left;
        @include animation-duration(#{$a}ms);
      }

    }
    
    &:nth-of-type(2n) {
      background-image: url(https://andrew-hawkes-media.s3.amazonaws.com/codepen/snow/snow-flake-2.png);
    }

    &:nth-of-type(3n) {
      background-image: url(https://andrew-hawkes-media.s3.amazonaws.com/codepen/snow/snow-flake-3.png);
    }

    &:nth-of-type(4n) {
      background-image: url(https://andrew-hawkes-media.s3.amazonaws.com/codepen/snow/snow-flake-4.png);
    }
    
  }
  
}


// Message

.message {
  display: block;
  position: fixed;
  z-index: 500;
  right: 20px;
  bottom: 20px;
  width: 280px;
  padding: 20px;
  background: rgba(255,255,255,0.4);
  
  &__text {
    margin: 0 0 14px 0;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.25;
    color: #fff;

    &:last-of-type {
      margin: 0;
    }
    
    a {
      color: $c_2;
      text-decoration: none;
      @include transition(color 0.25s ease-in-out);
      
      &:hover,
      &:focus {
        color: lighten($c_2, 20%); 
      }
      
    }
  }
  
}


// Animations

@include keyframes(sparkle) {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

@include keyframes(snowflake) {
  0% {
    opacity: 0;
    @include transform(translate3d(0,0,0));
  }
  40% {
    opacity: 1;
  }
  
  80% {
    opacity: 1;
  }
  
  100% {
    opacity: 0;
    @include transform(translate3d(60%,120%,0));
  }

}

Категории

Интересное

Котик качается на шаре - анимация на html и css

Подставка для цветов заказать в Ленгере

Гарри Гудини в Москве

Музей Д Орсе небольшая история

Раскрывающаяся открытка Санта-Клауса на CSS

Творческий уголок

Сварную сетку покупай – доверяй, но проверяй!

Как правильно разметить и отрезать лист, трубу или уголок болгаркой

История развития сварки

Как разрезать металлический отвод на два под углом в 45 градусов

Что такое MIG/MAG/TIG/MMA сварка: принципы работы, отличия и использование

Поделиться

Tags

Красивая открытка С Рождеством или Новым годом на CSS

3D-анимация «Рождественская елка» в стиле Minecraft для сайта

Жуткий дом анимация на CSS к Хеллоуину

Новогодняя мотня от Яндекса 2.1

Схема электропроводки УАЗ 3741 Буханка

О слове любви и нежности

Творческий уголок

Схема электропроводки УАЗ 3741 Буханка

5 признаков хорошего масляного фильтра

Что такое MIG/MAG/TIG/MMA сварка: принципы работы, отличия и использование

Схема электропроводки УАЗ 469

Можно ли защитить кузов от коррозии навсегда?

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

Гирлянда для сайт на чистом CSS

Адаптивный шаблон SSGV2 для DLE 15.х в стиле FLAT