Вы здесь: Главная » CSS » CSS анимация » Новогодние открытки с codepen.io

Новогодние открытки с codepen.io

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

Поскольку впереди нас ждет 2020 год, то начнем с открыток в его честь.

Happy New Year 2020 от 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

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

Автор 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

Сколько времени осталось до Нового года от 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

Простая анимация со снегом от Abhishek Sachan

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

See the Pen Clipped Text with 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

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

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