Задний фон css анимация

31 CSS Animated Backgrounds

Collection of hand-picked free HTML and CSS animated background code examples from Codepen, Github and other resources. Update of April 2021 collection. 9 new items.

Related Articles

Author

Links

Made with

About a code

CSS Only Pattern Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Gradient Background with Waves

Gradient background with some waves on the bottom of the page. If you want a different background for you website or app this is a simple way.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Blurred Animated Gradients

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Bubble Background Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Hexagon Background with 0 HTML

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

CSS linear-gradient Animations

Animating a stack of linear-gradients.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Floating Color Orbs

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Shooting Star

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Bubble Float

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Falling Leaves CSS Animation

October falling leaves CSS animation CSS no JavaScript.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Noise Background

CSS only animated static noise background.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Pattern Animation (Infinite)

Used Flexbox to vertically and horizontally center text. Used keyframes to set an infinite scroll.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Only CSS: Warning

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Cool Mountain Background

Cool mountain background with animations — slightly responsive.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Animated Ripples Background

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Infinite SVG Triangle Fusion

Triangles are created. Triangles are destroyed.
And so on and so forth. I am creating 60 SVGs that each contain 4 triangles (polygons). Each polygon loops through a color and animates outward from the center point of its parent SVG every 1 second. The entire animation repeats infinitely every 4 seconds.
Each div has a clip-path to create a hexagon mask. When the hexagons are snapped together, the expanding triangles bleed evenly into the triangles of the adjacent hexagons until they disappear.
I used CSS Grid as a starting point, but I was still left with a bunch of well-mannered hexagons with empty space in between. To «connect» the hexagons, I identified the nth-children that corresponds to a row and moved them up and over via transform: translate;

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Источник

Анимированный фон веб-страницы на чистых HTML и CSS

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

Перевод статьи «Amazing Pure HTML and CSS background animations».

Анимации — это круто, правда? Они добавляют изюминку на сайт и позволяют ему выделиться на фоне конкурентов. Но бывает, что вы решили создать сайт исключительно на HTML и CSS, и это несколько ограничивает полет вашей фантазии. И совершенно зря! Даже если у вас в наборе только эти два инструмента, вы все равно можете достигнуть потрясающих визуальных эффектов. В этой статье вы найдете несколько идей, от которых сможете отталкиваться в дальнейшем.

Диагональный градиент

Написать такой код легко, а эффект получается очень интересный.

Скольжение диагоналей

Предыдущий эффект был очень ненавязчивым, а этот гарантированно привлекает внимание.

Анимированный фон

Обратите внимание, насколько прост сам бэкграунд и насколько меняется его восприятие благодаря анимации.

Бесконечный паттерн

Отдельное спасибо @keyframes за бесконечную прокрутку!

Прекрасный анимированный бэкграунд

Просто задержитесь на мгновение и насладитесь тем, насколько привлекательна эта анимация. Такое приятное смешение цветов, а между тем оно совершенно не отвлекает внимание от названия на переднем плане.

Анимированный «лесной» фон

Плавающие квадраты

See the Pen Pure Css Animated Background by Mohammad Abdul Mohaiman (@mohaiman) on CodePen.

Снова диагональные линии

Плывущие облака

Да, в названии заявлено, что все на чистом СSS, но когда я увидел этот фон, не смог не добавить его в коллекцию, несмотря на то, что здесь использован CSS(Less).

Надеюсь, эти идеи вдохновят вас на создание собственных интересных эффектов. Поиграйтесь с приведенными CodePen-ми: возможно, таким образом и у вас родится замечательная идея.

Источник