Рождественская елка на 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));
  }

}

Категории

Интересное

Массаж для увеличение груди в домашних условиях

Битва на реке Талас

Серебряное женское кольцо UMCHO

Объявление типа документа в HTML

Мистер Уксус - Английская сказка

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

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

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

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

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

Заработок, Продвижение

Поделиться

Tags

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

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

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

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

10 распространенных ошибок в CSS

Падающий снег для сайта на CSS и JS

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

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

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

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

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

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

Заработок, Продвижение

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

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

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