! Сегодня

Главная » Web и Технологии » Красивые движущиеся облака на CSS

Красивые движущиеся облака на CSS

Я сделал предложение своей жене на третий день знакомства, и всю жизнь жалел лишь о двух потерянных днях...

21-сентября-2023, 21:08   18   0

Красивые движущиеся облака на CSS

При помощи CSS  можно создать красивый эффект движущихся облаков по верх фонового изображения. Для этого вам всего лишь нужно скачать картинки облачка, установить небольшой фрагмент HTML  кода . Облака можно скачать ниже в галереи изображений. Класс .cloud отвечает за основной блок и его размеры, .cloudcontent за информацию на основном  блоке. 

И так приступим к поэтапной установке красивых движущихся облаков на сайт.

HTML

<div class="cloud">
    <div class="cloudcontent">
      Просто текст на фоне
    </div>
    <img src="cloud-01.png" alt="" class="cloud1">
    <img src="cloud-02.png" alt="" class="cloud2">
    <img src="cloud-03.png" alt="" class="cloud3">
    <img src="cloud-04.png" alt="" class="cloud4">
</div>


CSS

.cloud {
    overflow: hidden;
    position: relative;
    width:100%;
    padding-bottom: 56.25%;
    height: 0;
    background: url(mountain.jpg);
    background-size: cover;
}
.cloudcontent {
    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
}


Поделиться

Tags

  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent
Имя Гагарина ?

Редакторы выбирают

Web и Технологии