Planète animée style01

<!DOCTYPE html>
<html>
<head>
    <title>PLANET ANIMÉE STYLE01 | par MEZGANI SAID</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="keyword" content="PLANET ANIMÉE STYLE01">
    <meta name="author" content="Mezgani said">
    <meta name="copyright" content="NGLESSON">
	<link rel="stylesheet" href="style.css" type="text/css">   
</head>
<body>
<div class="planet-holder">
  <div class="planet">
    <div class="cloud"></div>
    <div class="cloud"></div>
    <div class="cloud"></div>
    <div class="cloud"></div>
    <div class="cloud"></div>
    <div class="cloud"></div>
  </div>
  <div class="outer">
    <div class="outerClouds"></div>
    <div class="outerClouds"></div>
    <div class="outerClouds"></div>
    <div class="outerClouds"></div>
    <div class="outerClouds"></div>
    <div class="outerClouds"></div>
    <div class="outerClouds"></div>
  </div>
  <div class="text">NGLESSON.COM</div>
</div>
</body>
</html>

@import url("https://fonts.googleapis.com/css2?family=Exo&display=swap");
* {
	 margin: 0;
	 padding: 0;
}
 body {
	 background: black;
	 height: 100vh;
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 font-family: "Exo", sans-serif;
}
 .planet-holder {
	 position: relative;
	 padding: 113px;
	 border-radius: 100%;
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 overflow: hidden;
	 transform: scale(0);
	 animation: planetScale 0.5s cubic-bezier(0.64, 0.57, 0.67, 1.53) forwards;
}
 @keyframes planetScale {
	 to {
		 transform: scale(1);
	}
}
 .planet-holder .outer {
	 position: absolute;
	 height: 100%;
	 width: 100%;
}
 .planet-holder .outer .outerClouds:nth-child(1) {
	 position: absolute;
	 width: 134px;
	 height: 31px;
	 background: #b50086;
	 border-radius: 16px;
	 left: 8%;
	 top: 52%;
	 transform: rotate(-20deg) translate(-150%);
	 animation: outerClouds 5s linear infinite 0.5s;
}
 .planet-holder .outer .outerClouds:nth-child(2) {
	 position: absolute;
	 width: 35px;
	 height: 35px;
	 background: #b50086;
	 border-radius: 100px;
	 left: 23%;
	 top: 72%;
	 transform: rotate(-20deg) translate(-150%);
	 animation: outerClouds2 10s linear infinite 0.5s;
}
 .planet-holder .outer .outerClouds:nth-child(3) {
	 position: absolute;
	 width: 178px;
	 height: 27px;
	 background: #efe933;
	 border-radius: 16px;
	 left: 24%;
	 top: 2%;
	 transform: rotate(-20deg) translate(-150%);
	 animation: outerClouds 6s linear infinite 1.2s;
}
 .planet-holder .outer .outerClouds:nth-child(4) {
	 position: absolute;
	 width: 35px;
	 height: 35px;
	 background: #efe933;
	 border-radius: 100px;
	 left: 81%;
	 top: 55%;
	 transform: rotate(-20deg) translate(-150%);
	 animation: outerClouds2 9s linear infinite 0.8s;
}
 .planet-holder .outer .outerClouds:nth-child(5) {
	 position: absolute;
	 width: 135px;
	 height: 45px;
	 background: #9a5edc;
	 border-radius: 100px;
	 left: 42%;
	 top: 84%;
	 transform: rotate(-20deg) translate(-150%);
	 animation: outerClouds 4s linear infinite 0.6s;
}
 .planet-holder .outer .outerClouds:nth-child(6) {
	 position: absolute;
	 width: 135px;
	 height: 45px;
	 background: #3fe279;
	 border-radius: 100px;
	 left: 12%;
	 top: 29%;
	 transform: rotate(-20deg) translate(-150%);
	 animation: outerClouds 7s linear infinite 1.2s;
}
 .planet-holder .outer .outerClouds:nth-child(7) {
	 position: absolute;
	 width: 25px;
	 height: 25px;
	 background: #efe933;
	 border-radius: 100px;
	 left: 49%;
	 top: 10%;
	 transform: rotate(-20deg) translate(-150%);
	 animation: outerClouds2 7s linear infinite 1.1s;
}
 @keyframes outerClouds {
	 from {
		 transform: rotate(-20deg) translate(-150%);
	}
	 to {
		 transform: rotate(-20deg) translate(400px);
	}
}
 @keyframes outerClouds2 {
	 0% {
		 transform: rotate(-20deg) translate(-150%);
	}
	 50% {
		 transform: rotate(-20deg) translate(110%);
	}
	 100% {
		 transform: rotate(-20deg) translate(-150%);
	}
}
 .planet-holder .planet {
	 position: relative;
	 width: 200px;
	 height: 200px;
	 background: #dd008d;
	 background: linear-gradient(345deg, rgba(221, 0, 141, 1) 0%, rgba(87, 87, 221, 1) 87%);
	 border-radius: 100%;
	 overflow: hidden;
}
 .planet-holder .planet .cloud:nth-child(1) {
	 position: absolute;
	 width: 120px;
	 height: 39px;
	 background: #56bbbb;
	 border-radius: 21px;
	 top: 46%;
	 left: 41%;
	 transform: rotate(-20deg) translate(-150%);
	 animation: innerClouds 7s linear infinite;
}
 .planet-holder .planet .cloud:nth-child(2) {
	 position: absolute;
	 width: 28px;
	 height: 28px;
	 background: #ff64e5;
	 border-radius: 16px;
	 top: 3%;
	 left: 31%;
	 transform: rotate(-20deg) translate(-180%);
	 animation: innerClouds2 5s linear infinite;
}
 .planet-holder .planet .cloud:nth-child(3) {
	 position: absolute;
	 width: 148px;
	 height: 17px;
	 background: #ff64e5;
	 border-radius: 16px;
	 top: 80%;
	 left: 27%;
	 transform: rotate(-20deg) translate(-150%);
	 animation: innerClouds 8s linear infinite 2s;
}
 .planet-holder .planet .cloud:nth-child(4) {
	 position: absolute;
	 width: 148px;
	 height: 17px;
	 background: #56bbbb;
	 border-radius: 16px;
	 left: 8%;
	 top: 16%;
	 transform: rotate(-20deg) translate(-150%);
	 animation: innerClouds 8s linear infinite 1s;
}
 .planet-holder .planet .cloud:nth-child(5) {
	 position: absolute;
	 width: 35px;
	 height: 35px;
	 background: #18e08d;
	 border-radius: 100%;
	 top: 53%;
	 left: 60%;
	 transform: rotate(-20deg) translate(-150%);
	 animation: innerClouds2 8s linear infinite;
}
 .planet-holder .planet .cloud:nth-child(6) {
	 left: 22%;
	 position: absolute;
	 width: 148px;
	 height: 25px;
	 background: #18e08d;
	 border-radius: 16px;
	 top: 31%;
	 transform: rotate(-20deg) translate(-150%);
	 animation: innerClouds 7s linear infinite 4s;
}
 @keyframes innerClouds {
	 from {
		 transform: rotate(-20deg) translate(-150%);
	}
	 to {
		 transform: rotate(-20deg) translate(110%);
	}
}
 @keyframes innerClouds2 {
	 0% {
		 transform: rotate(-20deg) translate(-150%);
	}
	 50% {
		 transform: rotate(-20deg) translate(110%);
	}
	 100% {
		 transform: rotate(-20deg) translate(-150%);
	}
}
 .planet-holder .text {
	 color: #fff;
	 border-top: 4px solid #fff;
	 border-bottom: 4px solid #fff;
	 text-align: center;
	 padding: 15px 0;
	 padding-top: 15px;
	 padding-right: 0px;
	 padding-bottom: 15px;
	 padding-left: 0px;
	 font-size: 25px;
	 width: 290px;
	 position: absolute;
	 transform: rotate(25deg) scale(0);
	 animation: titleAnim 0.5s cubic-bezier(0.24, 0.97, 0.37, 1.53) forwards 0.5s;
}
 @keyframes titleAnim {
	 0% {
		 transform: rotate(25deg) scale(0);
	}
	 45% {
		 transform: rotate(-5deg) scale(1);
	}
	 85% {
		 transform: rotate(5deg) scale(1);
	}
	 100% {
		 transform: rotate(0deg) scale(1);
	}
}

                                    
toggle switch style03

toggle switch style03

Triangle Background css 01

Triangle Background css 01

Input range slider HTML style05

Input range slider HTML style05

Header with background animate 01

Header with background animate 01

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é

Compteur avec b4

Compteur avec b4

Chercher un mot sur la liste

Chercher un mot sur la liste

Calculer la some des colones avec jquery

Calculer la some des colones avec jquery

Bootstrap Cookie Alert pages

Bootstrap Cookie Alert pages

Background overlay

Background overlay

Ajouter une pagination1

Ajouter une pagination1

Ajouter supprimer une tr dans une table

Ajouter supprimer une tr dans une table