BLOGTOP

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.

Вы здесь » BLOGTOP » Уголок wap мастера » CSS/HTML » CSS анимированные облака

CSS анимированные облака

Страница: 1
Ответить

Сообщений 1 страница 1 из 1

1

  • Автор: МАЧОнаДАЧЕ
  • Владелец "BT"
  • МАЧОнаДАЧЕ
  • Откуда: Новокузнецк
  • Зарегистрирован: 2022-03-17
  • Приглашений: 0
  • Сообщений: 782
  • Уважение: [+56/-1]
  • Позитив: [+34/-2]
  • Пол: Мужской
  • Возраст: 41 [1983-02-26]
  • Провел на форуме:
    17 дней 18 часов
  • Голосовые уведомления: 1
  • https://dl.dropboxusercontent.com/s/6xj5hs016td5dci/pelevin-otryvok.mp3

https://i.imgur.com/tJ5itHO.gif Анимированные облака с помощью CSS3 как средство анимации без использования JavaScript

Красивый CSS эффект, накладывающий летящие облака на вашу фоновую фотографию или шапку сайта

Рабочий пример
[html]<style> .cloud {
    overflow: hidden;
    position: relative;
    width:100%;
    padding-bottom: 56.25%;
    height: 0;
    background: url(https://i.imgur.com/pOKivQB.png);
    background-size: cover;
}
.cloud-content {
    position: relative;
    padding:30px;
    color: #337AB7;
    font-size:22px;
    font-weight:bold;
    z-index:100;
}
.cloud img {
    width: 100%;
    left: 0;
    top: 0;
    position: absolute;
    -webkit-user-select: none;
    -moz-user-select: none; 
    -ms-user-select: none;
    user-select: none;   
    pointer-events: none;
}
@-webkit-keyframes animCloud {
    from {
        -webkit-transform: translateX(100%)
    }
    to {
        -webkit-transform: translateX(-100%)
    }
}
@-moz-keyframes animCloud {
    from {
        -moz-transform: translateX(100%)
    }
    to {
        -moz-transform: translateX(-100%)
    }
}
@keyframes animCloud {
    from {
        -webkit-transform: translateX(100%);
        -moz-transform: translateX(100%);
        -ms-transform: translateX(100%);
        -o-transform: translateX(100%);
        transform: translateX(100%)
    }
    to {
        -webkit-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        -o-transform: translateX(-100%);
        transform: translateX(-100%)
    }
}
.cloud1 {
    -webkit-animation: animCloud 20s infinite linear;
    -moz-animation: animCloud 20s infinite linear;
    animation: animCloud 20s infinite linear
}
.cloud2 {
    -webkit-animation: animCloud 40s infinite linear;
    -moz-animation: animCloud 40s infinite linear;
    animation: animCloud 40s infinite linear
}
.cloud3 {
    -webkit-animation: animCloud 60s infinite linear;
    -moz-animation: animCloud 60s infinite linear;
    animation: animCloud 60s infinite linear
}
.cloud4 {
    -webkit-animation: animCloud 80s infinite linear;
    -moz-animation: animCloud 80s infinite linear;
    animation: animCloud 80s infinite linear
} </style>
<div class="cloud">
    <div class="cloud-content">
        Текст на фоне
    </div>
    <img src="https://i.imgur.com/VZg0Ywh.png" alt="" class="cloud1">
    <img src="https://i.imgur.com/WjQH496.png" alt="" class="cloud2">
    <img src="https://i.imgur.com/27rFvYX.png" alt=""
class="cloud3">
    <img src="https://i.imgur.com/VZg0Ywh.png" alt="" class="cloud4">
</div>
[/html]

CSS:

Код:
.cloud {
    overflow: hidden;
    position: relative;
    width:100%;
    padding-bottom: 56.25%;
    height: 0;
    background: url(https://i.imgur.com/pOKivQB.png);
    background-size: cover;
}
.cloud-content {
    position: relative;
    padding:30px;
    color: #337AB7;
    font-size:22px;
    font-weight:bold;
    z-index:100;
}
.cloud img {
    width: 100%;
    left: 0;
    top: 0;
    position: absolute;
    -webkit-user-select: none;
    -moz-user-select: none;  
    -ms-user-select: none;
    user-select: none;   
    pointer-events: none;
}
@-webkit-keyframes animCloud {
    from {
        -webkit-transform: translateX(100%)
    }
    to {
        -webkit-transform: translateX(-100%)
    }
}
@-moz-keyframes animCloud {
    from {
        -moz-transform: translateX(100%)
    }
    to {
        -moz-transform: translateX(-100%)
    }
}
@keyframes animCloud {
    from {
        -webkit-transform: translateX(100%);
        -moz-transform: translateX(100%);
        -ms-transform: translateX(100%);
        -o-transform: translateX(100%);
        transform: translateX(100%)
    }
    to {
        -webkit-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        -o-transform: translateX(-100%);
        transform: translateX(-100%)
    }
}
.cloud1 {
    -webkit-animation: animCloud 20s infinite linear;
    -moz-animation: animCloud 20s infinite linear;
    animation: animCloud 20s infinite linear
}
.cloud2 {
    -webkit-animation: animCloud 40s infinite linear;
    -moz-animation: animCloud 40s infinite linear;
    animation: animCloud 40s infinite linear
}
.cloud3 {
    -webkit-animation: animCloud 60s infinite linear;
    -moz-animation: animCloud 60s infinite linear;
    animation: animCloud 60s infinite linear
}
.cloud4 {
    -webkit-animation: animCloud 80s infinite linear;
    -moz-animation: animCloud 80s infinite linear;
    animation: animCloud 80s infinite linear
}

HTML:

Код:
<div class="cloud">
    <div class="cloud-content">
        Текст на фоне
    </div>
    <img src="https://i.imgur.com/VZg0Ywh.png" alt="" class="cloud1">
    <img src="https://i.imgur.com/WjQH496.png" alt="" class="cloud2">
    <img src="https://i.imgur.com/27rFvYX.png" alt="" 
class="cloud3">
    <img src="https://i.imgur.com/VZg0Ywh.png" alt="" class="cloud4">
</div>
картинки для примера
Подпись автора

вопрос по ◆ВТ◆ в личку

вопрос по ◆ВТ◆ в тему

0

Ответить
Страница: 1

Быстрый ответ

Напишите ваше сообщение и нажмите «Отправить»


упс таблица

Откуда гость?
ВНИМАНИЕ! В подписи запрещены ссылки на конкурирующие сайты или форумы!

Вы здесь » BLOGTOP » Уголок wap мастера » CSS/HTML » CSS анимированные облака