In der heutigen CSS Anleitung zeige ich euch wie man einen animierten Background erstellen kann und zwar nur mit CSS

Video Anleitung

Quellcode

Denkt einfach daran, HTML Code in den HTML Bereich, CSS in den style.css und dann sollte es gehen 🙂

Der HTML Code

<div class="bg"></div>
    <div class="bg bg2"></div>
    <div class="bg bg3"></div>
    <div class="content">
    
        <h2>Website</h2>
        <p>Lorem ipsum dolor sit ... est Lorem ipsum dolor sit amet.</p>
    
    </div>

Der CSS Code

body {
margin: 0;
padding: 0;
}
    
.bg {
animation: slide 3s ease-in-out infinite alternate;
background: linear-gradient(-25deg, red 60%, #000 40%);
bottom: 0;
left: -100%;
    opacity: .5;
    position: fixed;
    right: 0%;
    top: 0;
    z-index: -1;

    }
    
    .bg2 {
        animation-direction: alternate-reverse;
        animation-duration: 4s;
    }
    
    .bg3 {
        animation-duration: 5s;
    }
    
    .content {
        background: rgba(0,0,0,0.5);
        color: #fff;
        padding-top: 25px;
        padding-bottom: 25px;
        padding-left: 20px;
        padding-right: 20px;
        
        margin-top: 50px;
        margin-left: 20%;
        margin-right: 20%;
    }

    h2 {
        font-size: 40px;
        
    }
    p {
        
    }
    
    @keyframes slide {
        0% {
            transform: translateX(-50%);
        }
        100% {
            transform: translateX(25%);
        }
        
    }