Transitions Animations SVG Style01

<!DOCTYPE html>
<html>
<head>
  <title>Transitions & Animations Combiné avec des SVG | par NGLESSON </title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="author" content="Mezgani said">
  <meta name="copyright" content="NGLESSON">
  <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
  <div class="arrow arrow--top">
    <svg xmlns="http://www.w3.org/2000/svg" width="270.11" height="649.9" overflow="visible">
      <style>
        .geo-arrow {
          fill: none;
          stroke: #fff;
          stroke-width: 2;
          stroke-miterlimit: 10
        }
      </style>
      <g class="item-to bounce-1">
        <path class="geo-arrow draw-in" d="M135.06 142.564L267.995 275.5 135.06 408.434 2.125 275.499z" />
      </g>
      <circle class="geo-arrow item-to bounce-2" cx="194.65" cy="69.54" r="7.96" />
      <circle class="geo-arrow draw-in" cx="194.65" cy="39.5" r="7.96" />
      <circle class="geo-arrow item-to bounce-3" cx="194.65" cy="9.46" r="7.96" />
      <g class="geo-arrow item-to bounce-2">
        <path class="st0 draw-in" d="M181.21 619.5l13.27 27 13.27-27zM194.48 644.5v-552" />
      </g>
    </svg>
  </div>
  <div class="arrow arrow--bottom">
    <svg xmlns="http://www.w3.org/2000/svg" width="31.35" height="649.9" overflow="visible">
      <style>
        .geo-arrow {
          fill: none;
          stroke: #fff;
          stroke-width: 2;
          stroke-miterlimit: 10
        }
      </style>
      <g class="item-to bounce-1">
        <circle class="geo-arrow item-to bounce-3" cx="15.5" cy="580.36" r="7.96" />
        <circle class="geo-arrow draw-in" cx="15.5" cy="610.4" r="7.96" />
        <circle class="geo-arrow item-to bounce-2" cx="15.5" cy="640.44" r="7.96" />
        <g class="item-to bounce-2">
          <path class="geo-arrow draw-in" d="M28.94 30.4l-13.26-27-13.27 27zM15.68 5.4v552" />
        </g>
      </g>
    </svg>
  </div>
  <div class="main">
    <div class="main__text-wrapper">
    <h1 class="main__title">Transitions & Animations</h1>
    <h2>Combiné avec des SVG</h2>      
      <svg xmlns="http://www.w3.org/2000/svg" class="dotted-circle" width="352" height="352" overflow="visible">
        <circle cx="176" cy="176" r="174" fill="none" stroke="#fff" stroke-width="2" stroke-miterlimit="10" stroke-dasharray="12.921,11.9271"/>
      </svg>
    </div>
  </div>
</body>
</html>
 body {
	 background: linear-gradient(#3800e7, #8a15ff);
	 height: 100vh;
	 font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
	 font-family: "DM Mono", monospace;
	 font-weight: 300;
	 overflow: hidden;
	 color: white;
	 text-align: center;
}
 h1 {
	 font-size: 3em;
	 margin-bottom: 0.2em;
}
 h2 {
	 font-size: 2em;
}
 .main {
	 height: 100vh;
	 display: flex;
	 flex-direction: column;
	 flex-wrap: wrap;
	 position: relative;
	 justify-content: center;
	 align-items: center;
}
 .main:before, .main:after {
	 content: "";
	 display: block;
	 position: absolute;
	 z-index: -3;
}
 .main:before {
	 right: 0;
	 bottom: -19;
	 height: 30em;
	 width: 30em;
	 border-radius: 30em;
	 background: linear-gradient(#3800e7, #8a15ff);
	 align-self: flex-end;
	 animation: gradient-fade 8s ease-in-out 3s infinite alternate;
}
 .main:after {
	 top: 0;
	 left: 30;
	 height: 10em;
	 width: 10em;
	 border-radius: 10em;
	 background: linear-gradient(#3800e7, #8a15ff);
	 animation: gradient-fade-alt 6s ease-in-out 3s infinite alternate;
}
 .main__text-wrapper {
	 position: relative;
	 padding: 2em;
}
 .main__text-wrapper:before, .main__text-wrapper:after {
	 content: "";
	 display: block;
	 position: absolute;
}
 .main__text-wrapper:before {
	 z-index: -1;
	 top: -3em;
	 right: -3em;
	 width: 13em;
	 height: 13em;
	 opacity: 0.7;
	 border-radius: 13em;
	 background: linear-gradient(#15e0ff, #8a15ff);
	 animation: rotation 7s linear infinite;
}
 .main__text-wrapper:after {
	 z-index: -1;
	 bottom: -20em;
	 width: 20em;
	 height: 20em;
	 border-radius: 20em;
	 background: linear-gradient(#d000c5, #8a15ff);
	 animation: rotation 7s linear infinite;
}
 .arrow {
	 z-index: 1000;
	 opacity: 0.5;
	 position: absolute;
}
 .arrow--top {
	 top: 0;
	 left: -5em;
}
 .arrow--bottom {
	 bottom: 0;
	 right: 3em;
}
 .circle {
	 transform: translate(50%, -50%) rotate(0deg);
	 transform-origin: center;
}
 .circle--ltblue {
	 height: 20em;
	 width: 20em;
	 border-radius: 20em;
	 background: linear-gradient(#15e0ff, #3800e7);
}
 .backdrop {
	 position: absolute;
	 width: 100vw;
	 height: 100vh;
	 display: block;
	 background-color: pink;
}
 .dotted-circle {
	 position: absolute;
	 top: 0;
	 right: 0;
	 opacity: 0.3;
	 animation: rotation 38s linear infinite;
}
 .draw-in {
	 stroke-dasharray: 1000;
	 stroke-dashoffset: 1000;
	 animation: draw 15s ease-in-out alternate infinite;
}
 @keyframes draw {
	 from {
		 stroke-dashoffset: 1000;
	}
	 to {
		 stroke-dashoffset: 0;
	}
}
 .item-to {
	 animation-duration: 10s;
	 animation-iteration-count: infinite;
	 transform-origin: bottom;
}
 .bounce-1 {
	 animation-name: bounce-1;
	 animation-timing-function: ease;
}
 .bounce-2 {
	 animation-name: bounce-2;
	 animation-timing-function: ease;
}
 .bounce-3 {
	 animation-name: bounce-3;
	 animation-timing-function: ease;
}
 @keyframes bounce-1 {
	 0% {
		 transform: translateY(0);
	}
	 50% {
		 transform: translateY(50px);
	}
	 100% {
		 transform: translateY(0);
	}
}
 @keyframes bounce-2 {
	 0% {
		 transform: translateY(0);
	}
	 50% {
		 transform: translateY(-30px);
	}
	 100% {
		 transform: translateY(0);
	}
}
 @keyframes bounce-3 {
	 0% {
		 transform: translateY(0);
	}
	 50% {
		 transform: translateY(30px);
	}
	 100% {
		 transform: translateY(0);
	}
}
 @keyframes rotation {
	 from {
		 transform: rotate(0deg);
	}
	 to {
		 transform: rotate(360deg);
	}
}
 @keyframes gradient-fade {
	 from {
		 transform: translate(10%, -10%) rotate(0deg);
	}
	 to {
		 transform: translate(50%, -50%) rotate(360deg);
	}
}
 @keyframes gradient-fade-alt {
	 from {
		 transform: translate(-20%, 20%) rotate(0deg);
	}
	 to {
		 transform: translate(-60%, 60%) rotate(360deg);
	}
}
 

                                    
Ajouter supprimer une tr dans une table avec l'insertion des options sur une balise select

Ajouter supprimer une tr dans une table avec l'insertion des options sur une balise select

Buttons Styles Inspirations

Buttons Styles Inspirations

Carousel 8 bloc with B4

Carousel 8 bloc with B4

Create icon animate with svg

Create icon animate with svg

Créer un effet de défilement vers le bas de la souris animé

Créer un effet de défilement vers le bas de la souris animé

Form login et créer un compte style01

Form login et créer un compte style01

Image hover 01

Image hover 01

Page 404 exemple 01

Page 404 exemple 01

Partager sur les réseaux sociaux

Partager sur les réseaux sociaux

Timeline style02

Timeline style02

input radio checkbox b4 style

input radio checkbox b4 style

texte animate css

texte animate css