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

                                    
Background overlay

Background overlay

Bootstrap 3 Popover avec html contenu

Bootstrap 3 Popover avec html contenu

Bootstrap4 datepicker

Bootstrap4 datepicker

Buttons Styles Inspirations

Buttons Styles Inspirations

Cards box with title

Cards box with title

Convertir une div en image

Convertir une div en image

Form login b4 01

Form login b4 01

Image hover style border top

Image hover style border top

Planète animée style01

Planète animée style01

Texte Block Posts Style01

Texte Block Posts Style01

Up Down Animation With CSS Style01

Up Down Animation With CSS Style01

toggle switch style03

toggle switch style03