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);
	}
}
 

                                    
Bootstrap4 datepicker

Bootstrap4 datepicker

Changer le style du scroll bar in html

Changer le style du scroll bar in html

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é

Elastic Content Slider

Elastic Content Slider

Image hover 05

Image hover 05

Image hover Inspiration styles

Image hover Inspiration styles

Lightbox gallery style01

Lightbox gallery style01

Nav Menu style01

Nav Menu style01

Pie Charts

Pie Charts

Responsive image grid

Responsive image grid

Timeline style07

Timeline style07

bootstrap4 tabs

bootstrap4 tabs