К Новому году хочется чего-то красивого и праздничного: фейерверков, подарков, хорошего настроения и немного анимации. В этой статье собраны примеры с ресурса codepen.io, которые подарят вам праздничное новогоднее настроение.

Елка от Dan Wilson

See the Pen 500 Baubles by Dan Wilson (@danwilson) on CodePen.0

Елка от Chris Gannon

Красивая анимация svg-ёлки на основе JavaScript-библиотеки GSAP.

See the Pen Merry Christmas Tree! by Chris Gannon (@chrisgannon) on CodePen.0

Сразу 2 новогодних елки от Paulina Hetman

Первая с музыкальным сопровождением.

See the Pen Three.js dancing Tree (for Xmas) by Paulina Hetman (@pehaa) on CodePen.0

Вторая в виде открытки.

See the Pen Santa was here. by Paulina Hetman (@pehaa) on CodePen.0

Happy New Year от Swarup Kumar Kuila

Открытка подойдет для поздравления с любым Новым годом.

See the Pen happy new year 2020 by Swarup Kumar Kuila (@uiswarup) on CodePen.18892

Открытка с текстом 2020 от Dev Loop

Наведите на цифры 2020

See the Pen 2020 Interaction by Dev Loop (@dev_loop) on CodePen.18892

С Новым годом от  Louis Hoebregts

Открой подарок и насладись анимацией! Можно приблизить любую букву и рассмотреть, что же там происходит в новом году.

See the Pen Happy New Year ! by Louis Hoebregts (@Mamboleoo) on CodePen.18892

Неоновая надпись Happy New Year с анимацией от ashish jangra

See the Pen happy new year 2016 by ashish jangra (@techdesign) on CodePen.18892

Елки с эффектом параллакса от  Dan Zen

See the Pen Happy Holidays from ZIM - Styling nth-child for CodePen Challenge by Dan Zen (@danzen) on CodePen.18892

Удивленный Дед Мороз в окне от Jordana Morais

See the Pen Pure CSS Happy Holidays! by Jordana Morais (@jordanamorais) on CodePen.18892

Спящий Санта от ChhaviKhandelwal

See the Pen Sleeping Santa by chhavi khandelwal (@ChhaviKhandelwal)
on CodePen.0

Санта. Необычный. Вид сзади.

Автор Mogeli lortkipanidze

See the Pen Merry XXX-mas by Mogeli lortkipanidze (@Hastalavistababy) on CodePen.18892

Стеклянный шар с котом и елкой от David Evans

See the Pen A very snowy Catmas! by David Evans (@dav3evans) on CodePen.18892

Поздравление с Рождеством и Новым годом от Flávio Amaral

Приятная незамысловатая  открытка с елкой и подарками.

See the Pen Css Christmas Tree by Flávio Amaral (@flavio_amaral) on CodePen.18892

С Новым кодом от isladjan

See the Pen Happy new Coding by isladjan (@isladjan) on CodePen.0

Рождественский CSS-календарь от Johnny Fekete

Кликните на каждое из чисел календаря - найдите сюрприз или прочитайте надпись "Возвращайтесь в другой день". Использован только CSS. Разметка с помощью Grid. Ссылка на codepen.io.

Календарь подарков от Olivia Ng

Основан на Grid-разметке и текстурах из градиентов.

See the Pen CSS Grid: Advent Calendar by Olivia Ng (@oliviale) on CodePen.18892

Вам подарок к Рождеству от GreenSock 

See the Pen Christmas Announcement by GreenSock (@GreenSock) on CodePen.0

Сколько времени осталось до Нового года от Peter Schmalfeldt

Таймер обратного отсчета на основе jQuery-плагина Flipclocks. CSS и JS-код нужно смотреть в настройках.

See the Pen Happy New Year by Peter Schmalfeldt (@manifestinteractive) on CodePen.18892

Счетчик обратного отсчета до Нового года от jusuf-azer

See the Pen Countdown to New Year by jusuf-azer (@jusuf-azer) on CodePen.18892

Идеи для новогодних ярлыков для интернет-магазина от  Lauren Ashpole

See the Pen CSS Christmas Tags (Flip on Hover) by Lauren Ashpole (@laurenashpole) on CodePen.18892

Открытка к Рождеству и Новому году с анимацией от Pradyumna Newalkar

В стиле детской открытки.

See the Pen Christmas Greetings by Pradyumna Newalkar (@pradyumna1) on CodePen.18892

Happy New Year от Didi

Вы когда-нибудь хотели, чтобы  вас поздравили с Новым годом на разных языках? Наконец-то ваше желание сбылось. Смотрите - и наслаждайтесь.

See the Pen Happy New Year by Didi (@Didi25) on CodePen.18892

Фейерверк в честь Нового года от  Jonas Sandstedt

See the Pen Happy New Year! by Jonas Sandstedt (@sandstedt) on CodePen.18892

Воздушные шары от ilithya

Подредактированный вариант. Исходник для 2019 года.

See the Pen New Years Balloons by Elen (@ambassador) on CodePen.18892

Анимационная открытка со снеговиком от Vangel Tzo

Здесь представлен слегка отредактированный вариант для 2020 года. Исходник для 2015 смотрите по ссылке.

See the Pen Skroutz new year css animation! by Elen (@ambassador) on CodePen.18892

Новогодняя гирлянда от Imapo

See the Pen IMAPO.RU - Happy new year by Imapo (@Imapo) on CodePen.18892

Гирлянда от Zaur Tigiev

See the Pen New Year Garland — Новогодняя гирлянда by Elen (@ambassador) on CodePen.18892

Эффект печатной машинки от Karlien Huygels

Текст для поздравления с Новым годом и Рождеством появляется и исчезает, как при печати.

See the Pen CMT3 - Opdracht16 by Karlien Huygels (@KarlienHuygels) on CodePen.18892

Простая открытка со снеговиком на основе HTML/CSS от Svyatoslav Kozinets

See the Pen Snowman | Happy New Year! by Svyatoslav Kozinets (@slavent) on CodePen.18892

Открывающаяся открытка от ivan

Открытка поздравляет с приходом 2019 года, но это легко исправить в html-коде.

See the Pen Happy New Year Greeting Card by ivan (@ivanbar) on CodePen.18892

Don't Worry And Happy New Year от Isac Dias

See the Pen Don't Worry And Happy New Year by Isac Dias (@isacdias) on CodePen.18892

Надпись Happy New Year с анимацией в SVG-стиле от SnailCrusher

See the Pen Happy New Year! -- CSS Only by SnailCrusher (@Sector22) on CodePen.18892

Поздравление Happy New Year от йети, автор Laurent Heneman

See the Pen HAPPY NEW YEAR ! by Laurent Heneman (@manheman) on CodePen.18892

Дед Мороз помашет вам рукой от Inverser

Подождите 14 секунд - и Дед Мороз помашет вам рукой

See the Pen Santa waving css+png/Дед Мороз by Inverser (@inverser) on CodePen.18892

Танцующий снеговик от Christopher Voigt

See the Pen Dancing Snowman by Christopher Voigt (@chlorophyllkid) on CodePen.18892

Елка из треугольников от Prashant Sani

See the Pen Digital Christmas Tree by Prashant Sani (@Prashantsani) on CodePen.18892

Новогодний снег

Снег от Abhishek Sachan

Для снега использована анимация на основе canvas, а для текста применено свойство background-clip: text.

See the Pen Clipped Text with Animation by Elen (@ambassador) on CodePen.0

Снег от Alphardex 

See the Pen Snow (Pure CSS) by alphardex (@alphardex) on CodePen.0

Красивый снежный текст от Mark Boots

Основан на использовании css-переменных.

See the Pen Ice Text by Mark Boots (@MarkBoots) on CodePen.0

Автор: Админ

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *