К Новому году хочется чего-то красивого и праздничного: фейерверков, подарков, хорошего настроения и немного анимации. В этой статье собраны примеры с ресурса 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
