Renatoo // Design & Technology Logo

Kontakt

Rotating Background Card

Tutorial: Rotating Background Card

Derzeit funktioniert dieses Beispiel nur mit dem Chrome, Opera und Edge Browser. Ein Update für Firefox werden wir demnächst veröffentlichen.

Erste Karte

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Zweite Karte

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Dritte Karte

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Rotating Background Card Layout CSS

				
					    selector{
        --first-color: #5ddcff;
        --second-color: #3c67e3;
        --third-color: #4e00c2;
    }
    @property --rotate {
      syntax: "<angle>";
      initial-value: 132deg;
      inherits: false;
    }
    selector::before, selector::after{
        opacity: 0;
        content: "";
        transition: all 0.5s ease-in-out;
    }
    selector:hover::before, selector:hover::after{
        position: absolute;
        z-index: -1;
        background-image: linear-gradient(
        var(--rotate)
        , var(--first-color), var(--second-color) 43%, var(--third-color));
        animation: spin 2.5s linear infinite;
        opacity: 1;
    }
    selector:hover::before {
      width: 104%;
      height: 104%;
      border-radius: 8px;
      top: -2%;
      left: -2%;
    }
    selector:hover::after {
      top: 0;
      left: 0;
      right: 0;
      height: 100%;
      width: 100%;
      transform: scale(0.9);
      filter: blur(70px);
    }
    @keyframes spin {
      0% {
        --rotate: 0deg;
      }
      100% {
        --rotate: 360deg;
      }
    }
				
			

Kontakt

Analytics

CRM Systeme

Tools

Social Media

© 2022 Renatoo // Design & Technology