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

Елка от Dan Wilson

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

Елка от Chris Gannon

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

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

3D-елка от Wakana Y.K.

Рассмотри елку со всех сторон! На основе Three.js.

See the Pen Happy Holidays! 2023 by Wakana Y.K. (@wakana-k) on CodePen.

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

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

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

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

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

Анимация цифр 2024 от Chris Gannon

See the Pen Iridescent 2024 by Chris Gannon (@chrisgannon) on CodePen.

Еще одна анимация цифр, регулируемая ползунком. Автор David East

See the Pen CSS Party by David East (@davideast) on CodePen.

Happy New Year от Swarup Kumar Kuila

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

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

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

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

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

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

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

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

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

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

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

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

Зимний дворик от Ivan Grozdic

See the Pen Magical Winter - pure css - #02 by Ivan Grozdic (@ig_design) on CodePen.

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

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

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

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

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

Автор Mogeli lortkipanidze

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

Санта останавливается здесь от Chris Gannon

See the Pen Santa Stop Here! by Chris Gannon (@chrisgannon) on CodePen.

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

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

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

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

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

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

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

Рождественская бомба от Chris Gannon

Бомба не страшная, а поздравительная.

See the Pen Christmas Bomble by Chris Gannon (@chrisgannon) on CodePen.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Merry Christmas от  Jon Kantner

See the Pen Christmas Holly and Stroke Animation by Jon Kantner (@jkantner) on CodePen.

Happy New Year от Didi

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

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

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

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

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

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

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

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

Подарок от от Jon Kantner

See the Pen Shiny Jumping Present by Jon Kantner (@jkantner) on CodePen.

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

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

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

Снег от Abhishek Sachan

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

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

Снег от Alphardex 

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

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

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

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

Загрузчик в стиле Рождества от Jon Kantner

See the Pen Loading Christmas by Jon Kantner (@jkantner) on CodePen.

Больше загрузчиков вы найдете в этой статье.

 

Автор: Админ

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

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