Css анимация парения в воздухе

CSS keyframe animation floating blocks

Recently I had my portfolio reviewed and received a comment about someone liking my footer. So I decided why not write down how to create this!

This article is going to be quite a technical item. Feel free to copy/paste or ask me any questions on Facebook or Twitter if you get stuck.

Html structure permalink

div class="container"> ul class="particles"> li>li> li>li> li>li> li>li> li>li> li>li> li>li> li>li> li>li> li>li> ul> div>

Nothing exciting, right? 🤷‍♂️ We need a container, a particle list, and some particles (li’s).

Next up is the css that makes this magic happen.

CSS animated floating blocks permalink

html, body  margin: 0; padding: 0; > .container  background: #50514f; position: relative; width: 100vw; height: 100vh; > .particles  position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; margin: 0px; padding: 0px; li  position: absolute; display: block; list-style: none; width: 20px; height: 20px; background: rgba(255, 255, 255, 0.2); -webkit-animation: animate 25s linear infinite; animation: animate 25s linear infinite; bottom: -150px; &:nth-child(1)  left: 25%; width: 80px; height: 80px; -webkit-animation-delay: 0s; animation-delay: 0s; background: #f25f5c; > &:nth-child(2)  left: 10%; width: 20px; height: 20px; -webkit-animation-delay: 2s; animation-delay: 2s; -webkit-animation-duration: 12s; animation-duration: 12s; background: #ffe066; > &:nth-child(3)  left: 70%; width: 20px; height: 20px; -webkit-animation-delay: 4s; animation-delay: 4s; background: #247ba0; > &:nth-child(4)  left: 40%; width: 60px; height: 60px; -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-animation-duration: 18s; animation-duration: 18s; background: #70c1b3; > &:nth-child(5)  left: 65%; width: 20px; height: 20px; -webkit-animation-delay: 0s; animation-delay: 0s; background: #50514f; > &:nth-child(6)  left: 75%; width: 110px; height: 110px; -webkit-animation-delay: 3s; animation-delay: 3s; background: #f25f5c; > &:nth-child(7)  left: 35%; width: 150px; height: 150px; -webkit-animation-delay: 7s; animation-delay: 7s; background: #ffe066; > &:nth-child(8)  left: 50%; width: 25px; height: 25px; -webkit-animation-delay: 15s; animation-delay: 15s; -webkit-animation-duration: 45s; animation-duration: 45s; background: #247ba0; > &:nth-child(9)  left: 20%; width: 15px; height: 15px; -webkit-animation-delay: 2s; animation-delay: 2s; -webkit-animation-duration: 35s; animation-duration: 35s; background: #70c1b3; > &:nth-child(10)  left: 85%; width: 150px; height: 150px; -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-animation-duration: 11s; animation-duration: 11s; background: #50514f; > > > @-webkit-keyframes animate  0%  -webkit-transform: translateY(0) rotate(0deg); transform: translateY(0) rotate(0deg); opacity: 1; border-radius: 0; > 100%  -webkit-transform: translateY(-1000px) rotate(720deg); transform: translateY(-1000px) rotate(720deg); opacity: 0; border-radius: 50%; > > @keyframes animate  0%  -webkit-transform: translateY(0) rotate(0deg); transform: translateY(0) rotate(0deg); opacity: 1; border-radius: 0; > 100%  -webkit-transform: translateY(-1000px) rotate(720deg); transform: translateY(-1000px) rotate(720deg); opacity: 0; border-radius: 50%; > >

Ok, let’s go through what we are doing.

The container needs to be relative and have a specified width or height (it does not have to be 100%, but the particles will float inside this)

Next, the particles ul need to be absolutely positioned. And 100% of the container in both width and height. It is also crucial to include overflow: hidden; .

We use li elements; these are also absolute positioned. We define some basic parameters, which we will randomly override. Then we set them to use animation . In this case, we call the animate function, which we will declare later. We also tell it to be linear and animate countless times. And we start all blocks off -150px from the bottom.

Random sizes and colors permalink

The random sizes and colors could be more random, but I wanted to have some degree of input in this specific case and decided to use the nth-child(x) selector.

The nth-child(x) selector gets a specific selector number, so (1) is the first occurrence.

We then randomly set some attributes, so each block is different;

• left (position from the left)
• width/height (the size)
• animation-delay (how quick it shows)
• animation-duration (how fast it moves)
• background (color of the block)

CSS Keyframe animation permalink

As you can see, we use CSS @keyframes animate to define a new animation.

@keyframes animate  0%  -webkit-transform: translateY(0) rotate(0deg); transform: translateY(0) rotate(0deg); opacity: 1; border-radius: 0; > 100%  -webkit-transform: translateY(-1000px) rotate(720deg); transform: translateY(-1000px) rotate(720deg); opacity: 0; border-radius: 50%; > >

What this does is create a frame-by-frame animation. We can define 0-100% steps. In this case, I want it to go from 0 to 100% gently.

Starting at 0, we set the opacity to 1, the border radius to 0, and all the transformations to 0.

Then at 100% (result), we set it to rotate a lot by using translateY / rotate functions. We also set the opacity to 0, so it will slowly disappear. And the border-radius of 50% will turn it from a square to a ball.

Browser support permalink

CSS Animation is widely supported. Just Opera struggles.

There is no direct polyfill at the time of writing. You can, however, use the JavaScript animate(<>) function to achieve this result.

Thank you for reading, and let’s connect! permalink

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Источник

Css анимация парения в воздухе

How to Create a Floating Animation using CSS

If you are looking to create a floating animation just using CSS, then you are in the right place.

Alternatively, you can visit the CodePen to see the animation in action.

In our example, the key things we need to add are:

transition property to move the element smoothly, over a given duration
@keyframes property which specifies the animation code
animation property which applies an animation between styles
transform property which allows you to move, rotate, scale, and skew elements

In our example, we are using transform: translate([value]); to move the element up and down.

The Code

  
 
   
 
Floating CSS Animation
 
Follow Silva Web Designs:
 
      
 
 
 

 @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,[email protected],500;0,600;1,300&display=swap'); body, html < height: 100%; margin: 0; padding: 0; font-family: "Montserrat", sans-serif; background: rgb(71, 71, 181); background: -moz-linear-gradient(-45deg, rgba(26, 188, 156, 1) 0%, rgba(71, 71, 181, 1) 100%); background: -webkit-linear-gradient(-45deg, rgba(26, 188, 156, 1) 0%, rgba(71, 71, 181, 1) 100%); background: linear-gradient(135deg, rgba(26, 188, 156, 1) 0%, rgba(71, 71, 182, 1) 100%); font-weight: 600; >h1 < font-size: 24px; margin: 10px 0 20px 0; text-transform: uppercase; color: #FFF; >p < font-size: 16px; color: #FFF; >span a < font-size: 18px; color: #FFF; text-decoration: none; margin: 0 10px; transition: all 0.4s ease-in-out; >span a:hover < color: #FFF; >@keyframes float < 0% < box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6); transform: translatey(0px); >50% < box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2); transform: translatey(-20px); >100% < box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6); transform: translatey(0px); >> .container < width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; >.logo < width: 150px; height: 150px; box-sizing: border-box; border: 5px #20232c solid; border-radius: 50%; overflow: hidden; box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6); transform: translatey(0px); animation: float 6s ease-in-out infinite; >.logo img < width: 100%; height: auto; >.content < width: 100%; max-width: 600px; padding: 20px 40px; box-sizing: border-box; text-align: center; >.fa

And there you have it! A nice, smooth floating animation made purely in CSS. If you need any help, just give us a shout!

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital-related. His main expertise is with WordPress and various other CMS frameworks. If you need responsive design, SEO, speed optimisation or anything else in the world of digital, you can contact Silva Web Designs here; [email protected]

Источник

Русские Блоги

Сегодня давайте рассмотрим эффект 3D-изображения, реализованный на чистом CSS. Сначала перейдите к моему коду кода.эффектЭффект показан на следующем рисунке.

Слева — начальное состояние, а справа — эффект наведения. Принцип реализации показан на следующем рисунке: верхняя половина изображения загружается с помощью div.img, нижняя половина изображения реализуется с помощью псевдокласса .img: fefore, визуализируется заголовок изображения, а тень изображения реализуется с помощью псевдокласса .img: after.

Хорошо, давайте посмотрим на код. Первый — это очень простой HTML.

Во-вторых, CSS. CSS-код очень важен. Сначала нужно завершить макет.

/ * Импорт шрифтов * / @import url(http://fonts.googleapis.com/css?family=Montserrat); / * Градиентный фон * / body < min-height:600px; background: linear-gradient( hsl(200,51%,40%), #E0D7A3); >/ * Чтобы добиться полного эффекта анимации, мы помещаем контейнер вне изображения, * / .container < width:300px; height:380px; margin:50px auto; / * Унифицируйте глубину 3D анимации * / perspective: 1000px; >.img < width:100%; height:100%; background: url("http://www.cmen.cc/uploadfile/2013/1212/20131212044827530.jpg"); background-size:100%; position:relative; >.img:before < content:attr(data-text); width:100%; height:40px; position:absolute; top:100%; left:0; background: url("http://www.cmen.cc/uploadfile/2013/1212/20131212044827530.jpg") left bottom; background-size:100%; / * Установить стиль шрифта заголовка картинки * / font-size: 1.6vw; font-family: Montserrat, Arial, sans-serif; color:#fff; text-shadow:1px 1px 3px #000; text-align:center; line-height:40px; / * Сложите нижнюю часть изображения * / transform-style: preserve-3d; transform-origin: center top; transition:all 1s transform; transform:rotateX(-80deg); >.img:after < content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 0 100px 50px rgba(0, 0, 0, .2), inset 0 0 250px 250px rgba(0, 0, 0, .2); / * Параметры теневой анимации * / perspective: 1000px; transform-style: preserve-3d; transform-origin: center bottom; transform: rotateX(90deg) translateZ(-80px) scale(0.75); >/ * Сложить изображение после наведения мыши * / .container:hover .img < transform: rotateX(75deg) translateZ(50px); >/ * Анимация тени после наведения мыши * / .container:hover .img:after

Я считаю, что вы должны быть в состоянии понять это в сочетании с комментариями, и больше не будете конкретно объяснять процесс написания кода. Вы можете перейти к codepen для редактирования или загрузки этого онлайн.эффект。

Вы также можете посмотреть на другой эффект «3D эффект оригами с чистым CSSMove Пожалуйста, двигайтесьздесь。

Источник

🎅MnogoBlog

⛄как создать сайт на wordpress, настроить и оптимизировать wordpress

Летающие шарики для сайта с помощью CSS

Здравствуйте, сегодня бы хотелось представить вам интересный CSS код, создающий парящие в воздухе шарики.
Скачать исходники для статьи можно ниже

В итоге у нас должно получиться следующее (скриншот шариков):

Демо-пример можно посмотреть здесь (летающие шарики) – летающие шарики на сайте.

Как это воссоздать на своем сайте – все достаточно просто!

.container < padding: 10px; margin: 0 auto; position: relative; >.balloon < width: 738px; margin: 0 auto; padding-top: 30px; position: relative; >.balloon > div < width: 104px; height: 140px; background: rgba(182, 15, 97, 0.9); border-radius: 0; border-radius: 80% 80% 80% 80%; margin: 0 auto; position: absolute; padding: 10px; box-shadow: inset 17px 7px 10px rgba(182, 15, 97, 0.9); -webkit-transform-origin: bottom center; >.balloon > div:nth-child(1) < background: rgba(182, 15, 97, 0.9); left: 0; box-shadow: inset 10px 10px 10px rgba(135, 11, 72, 0.9); -webkit-animation: balloon1 6s ease-in-out infinite; -moz-animation: balloon1 6s ease-in-out infinite; -o-animation: balloon1 6s ease-in-out infinite; animation: balloon1 6s ease-in-out infinite; >.balloon > div:nth-child(1):before < color: rgba(182, 15, 97, 0.9); >.balloon > div:nth-child(2) < background: rgba(242, 112, 45, 0.9); left: 120px; box-shadow: inset 10px 10px 10px rgba(222, 85, 14, 0.9); -webkit-animation: balloon2 6s ease-in-out infinite; -moz-animation: balloon2 6s ease-in-out infinite; -o-animation: balloon2 6s ease-in-out infinite; animation: balloon2 6s ease-in-out infinite; >.balloon > div:nth-child(2):before < color: rgba(242, 112, 45, 0.9); >.balloon > div:nth-child(3) < background: rgba(45, 181, 167, 0.9); left: 240px; box-shadow: inset 10px 10px 10px rgba(35, 140, 129, 0.9); -webkit-animation: balloon4 6s ease-in-out infinite; -moz-animation: balloon4 6s ease-in-out infinite; -o-animation: balloon4 6s ease-in-out infinite; animation: balloon4 6s ease-in-out infinite; >.balloon > div:nth-child(3):before < color: rgba(45, 181, 167, 0.9); >.balloon > div:nth-child(4) < background: rgba(190, 61, 244, 0.9); left: 360px; box-shadow: inset 10px 10px 10px rgba(173, 14, 240, 0.9); -webkit-animation: balloon1 5s ease-in-out infinite; -moz-animation: balloon1 5s ease-in-out infinite; -o-animation: balloon1 5s ease-in-out infinite; animation: balloon1 5s ease-in-out infinite; >.balloon > div:nth-child(4):before < color: rgba(190, 61, 244, 0.9); >.balloon > div:nth-child(5) < background: rgba(180, 224, 67, 0.9); left: 480px; box-shadow: inset 10px 10px 10px rgba(158, 206, 34, 0.9); -webkit-animation: balloon3 5s ease-in-out infinite; -moz-animation: balloon3 5s ease-in-out infinite; -o-animation: balloon3 5s ease-in-out infinite; animation: balloon3 5s ease-in-out infinite; >.balloon > div:nth-child(5):before < color: rgba(180, 224, 67, 0.9); >.balloon > div:nth-child(6) < background: rgba(242, 194, 58, 0.9); left: 600px; box-shadow: inset 10px 10px 10px rgba(234, 177, 15, 0.9); -webkit-animation: balloon2 3s ease-in-out infinite; -moz-animation: balloon2 3s ease-in-out infinite; -o-animation: balloon2 3s ease-in-out infinite; animation: balloon2 3s ease-in-out infinite; >.balloon > div:nth-child(6):before < color: rgba(242, 194, 58, 0.9); >.balloon > div:before < color: rgba(182, 15, 97, 0.9); position: absolute; bottom: -11px; left: 52px; content:"▲"; font-size: 1em; >span < font-size: 4.8em; color: white; position: relative; top: 30px; left: 50%; margin-left: -27px; >/*BALLOON 1 4*/ @-webkit-keyframes balloon1 < 0%, 100% < -webkit-transform: translateY(0) rotate(-6deg); >50% < -webkit-transform: translateY(-20px) rotate(8deg); >> @-moz-keyframes balloon1 < 0%, 100% < -moz-transform: translateY(0) rotate(-6deg); >50% < -moz-transform: translateY(-20px) rotate(8deg); >> @-o-keyframes balloon1 < 0%, 100% < -o-transform: translateY(0) rotate(-6deg); >50% < -o-transform: translateY(-20px) rotate(8deg); >> @keyframes balloon1 < 0%, 100% < transform: translateY(0) rotate(-6deg); >50% < transform: translateY(-20px) rotate(8deg); >> /* BAllOON 2 5*/ @-webkit-keyframes balloon2 < 0%, 100% < -webkit-transform: translateY(0) rotate(6eg); >50% < -webkit-transform: translateY(-30px) rotate(-8deg); >> @-moz-keyframes balloon2 < 0%, 100% < -moz-transform: translateY(0) rotate(6deg); >50% < -moz-transform: translateY(-30px) rotate(-8deg); >> @-o-keyframes balloon2 < 0%, 100% < -o-transform: translateY(0) rotate(6deg); >50% < -o-transform: translateY(-30px) rotate(-8deg); >> @keyframes balloon2 < 0%, 100% < transform: translateY(0) rotate(6deg); >50% < transform: translateY(-30px) rotate(-8deg); >> /* BAllOON 0*/ @-webkit-keyframes balloon3 < 0%, 100% < -webkit-transform: translate(0, -10px) rotate(6eg); >50% < -webkit-transform: translate(-20px, 30px) rotate(-8deg); >> @-moz-keyframes balloon3 < 0%, 100% < -moz-transform: translate(0, -10px) rotate(6eg); >50% < -moz-transform: translate(-20px, 30px) rotate(-8deg); >> @-o-keyframes balloon3 < 0%, 100% < -o-transform: translate(0, -10px) rotate(6eg); >50% < -o-transform: translate(-20px, 30px) rotate(-8deg); >> @keyframes balloon3 < 0%, 100% < transform: translate(0, -10px) rotate(6eg); >50% < transform: translate(-20px, 30px) rotate(-8deg); >> /* BAllOON 3*/ @-webkit-keyframes balloon4 < 0%, 100% < -webkit-transform: translate(10px, -10px) rotate(-8eg); >50% < -webkit-transform: translate(-15px, 20px) rotate(10deg); >> @-moz-keyframes balloon4 < 0%, 100% < -moz-transform: translate(10px, -10px) rotate(-8eg); >50% < -moz-transform: translate(-15px, 10px) rotate(10deg); >> @-o-keyframes balloon4 < 0%, 100% < -o-transform: translate(10px, -10px) rotate(-8eg); >50% < -o-transform: translate(-15px, 10px) rotate(10deg); >> @keyframes balloon4 < 0%, 100% < transform: translate(10px, -10px) rotate(-8eg); >50% < transform: translate(-15px, 10px) rotate(10deg); >>

Этот код нужно вставить в файл стилей вашего сайта, например, для сайтов на wordpress – это style.css – то есть заходим в панель управления wordpress, в левом меню выбираем пункт “Внешний вид” и его подпункт “Редактор”, справа в списке шаблонов выбираем файл – style.css, спускаемся в самый его низ и вставляем вышеуказанный код.

2. Далее нужно вставить код блоков – которые и будут создавать летающие шарики на сайте – его нужно вставить в том месте, где вы хотите видеть их (шарики):

Для примера, давайте расположим шарики в самом верху вашего сайта, для этого заходим в панель управления wordpress, в левом меню выбираем пункт “Внешний вид” и его подпункт “Редактор”, справа в списке шаблонов выбираем файл – header.php, в его коде ищем тег (идет после тега ) и после него и вставляем “код блоков шаров” (вышеуказанный код), как то так:

. > 
☺ 
 
B 
 
D 
 
A 
 
Y 
 
!