Css Code Only Pixeldev Code

body {
  text-align:center;
}
header {
  display:inline-table;
  vertical-align:middle;
  margin:1em ;
  padding:0.5em 1em;
  background:
    linear-gradient(
      to right,
      transparent 20%,
      turquoise 20%,
      turquoise 80%,
      transparent 80%
    ) bottom no-repeat,
    linear-gradient(
      to top,
      turquoise 0%,
      turquoise 300%
    ) right 300% no-repeat,
    linear-gradient(
      to right,
      turquoise 0%,
      turquoise 100%
    )   9000% 0 no-repeat,
    linear-gradient(
      to top,
      turquoise 0%,
      turquoise 300%
    ) left 9000% no-repeat
    ;  
  transition:background-size 2s ease-in;
}
header, header ~ header:hover {
  background-size: 
    100% 8px, 
    3px 0, 
    3px 3px, 
    3px 0;

}
header:hover, header ~ header {
  background-size: 
    200% 3px , 
    3px 100%, 
    100% 3px, 
    3px 100%;
  transition:background-size 2s ease-in-out;
}

span {
  font-size:4em;
  display:inline-block;
  vertical-align:middle;
  background:turquoise;
  border-radius:100%;
  box-shadow:0 0 5px;
}

74

Border Animation

By: rald_dev

*, html,body{
	padding:0px;
	margin:0px;
	box-sizing:border-box;
	font-family:'Poppins', sans-serif;
}
::selection{
	background-color:#2d98da;
	color:#fff;
}
body{
	background-color:#227093;
	display:flex;
	justify-content:center;
	align-items:center;
	width:100%;
	min-height:100vh;
}
.Box{
	position:relative;
	width:150px;
	height:150px;
	border:3px solid rgba(255,255,255,.2);
	border-radius:50%;
	text-align:center;
	line-height:150px;
	color:#57beec;
	font-size:20px;
	box-shadow:0px 0px 10px rgba(0,0,0,.2);
	font-weight:bold;
}
.Box:before{
	content:'';
	position:absolute;
	top:-3px;
	left:-3px;
	width:100%;
	height:100%;
	background-color:transparent;
	border:3px solid transparent;
	border-top:3px solid #57beec;
	border-right:3px solid #57beec;
	border-radius:50%;
	transform:rotate(0deg);
	animation:SpanLoading 2s linear infinite;
}
.Box span{
	position:absolute;
	top: 50%;
	left:50%;
	width:50%;
	height:3px;
	background-color:transparent;
	transform-style:preserve-3d;
	transform-origin:left;
	transform:rotate(42deg);
	animation:Loading 2s linear infinite;
}
.Box span:before{
	content:'';
	position:absolute;
	width:15px;
	height:15px;
	border-radius:50%;
	background-color:#57beec;
	right:-7px;
	bottom:-7px;
	box-shadow:0px 0px 10px #57beec;
}

@keyframes Loading{
	0%{
	transform:rotate(42deg);
	}
	100%{
	transform:rotate(402deg);
	}
}

@keyframes SpanLoading{
	0%{
	transform:rotate(0deg);
	}
	100%{
	transform:rotate(360deg);
	}
}

74

Glowing Loader Ring Animation

By: rald_dev

body{
	margin: 0;
	padding: 0;
	font-family: 'Abril Fatface', serif;
}

.slider{
	height: 600px;
	background-color: #293132;
	text-align: center;
	position: relative;
	animation: slideColor 10s forwards infinite;
}

.caption{
	line-height: 100px;
	font-size: 60px;
	color: #fff;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	text-shadow: 0px 5px 5px rgba(0,0,0,.25);
	margin-left: -300px;
}

.text-box{
	display: inline-block;
	position: relative;
}

.text-box div{
	display: inline-block;
	position: absolute;
	top: -200px;
	transform: rotateX(-90deg);
	opacity: 0;
	text-shadow: 0px 5px 5px rgba(0,0,0,.25);
	animation-timing-function: ease;
}

.text-box div:nth-child(1){
	animation: rollDown 10s forwards infinite;
}

.text-box div:nth-child(2){
	animation: rollDown2 10s forwards infinite;
}

.text-box div:nth-child(3){
	animation: rollDown3 10s forwards infinite;
}

@keyframes rollDown {
	0%{
		top: -200px;
		transform: rotateX(-90deg);
	}
	11%{
		top: -74px;
		transform: rotateX(0deg);
		opacity: 1;
	}
	22%{
		top: -74px;
		transform: rotateX(0deg);
		opacity: 1;
	}
	33%{
		top: 50px;
		transform: rotateX(30deg);
		opacity: 0;
	}
}

@keyframes rollDown2 {
	33%{
		top: -200px;
		transform: rotateX(-90deg);
	}
	44%{
		top: -74px;
		transform: rotateX(0deg);
		opacity: 1;
	}
	55%{
		top: -74px;
		transform: rotateX(0deg);
		opacity: 1;
	}
	66%{
		top: 50px;
		transform: rotateX(30deg);
		opacity: 0;
	}
}

@keyframes rollDown3 {
	66%{
		top: -200px;
		transform: rotateX(-90deg);
	}
	77%{
		top: -74px;
		transform: rotateX(0deg);
		opacity: 1;
	}
	88%{
		top: -74px;
		transform: rotateX(0deg);
		opacity: 1;
	}
	99%{
		top: 50px;
		transform: rotateX(30deg);
		opacity: 0;
	}
}

@keyframes slideColor{
	0%{
		background-color: #387780;
	}
	33%{
		background-color: #3f88c5;
	}
	66%{
		background-color: #588b8b;
	}
	100%{
		background-color: #387780;
	}
}

73

Rolling text animation

By: rald_dev

73

Ringing call pluse animation

By: rald_dev

<div class="wrapper">
      <header>
         <h2>Menu</h2>
      </header>
      <div class="navigationDesktop">
         <nav>
            <ul>
               <li><a href="#">Programming</a>
                  <ul>
                     <li><a href="#">C++</a></li>
                     <li><a href="#">C#</a></li>
                     <li><a href="#">Java</a></li>
                     <li><a href="#">Web Development</a>
                        <ul>
                           <li><a href="#">Javascript</a></li>
                           <li><a href="#">PHP</a></li>
                           <li><a href="#">Ruby</a></li>
                        </ul>
                     </li>
                     <li><a href="#">Python</a></li>
                  </ul>
               </li>
               <li><a href="#">OS</a>
                  <ul>
                     <li><a href="#">Windows</a></li>
                     <li><a href="#">Macintosh</a></li>
                     <li><a href="#">Linux</a></li>
                  </ul>
               </li>
               <li><a href="#">Projects</a>
                  <ul>
                     <li><a href="#">Android</a></li>
                     <li><a href="#">iOS</a></li>
                     <li><a href="#">Web</a></li>
                     <li><a href="#">Windows</a></li>
                  </ul>
               </li>
               <li><a href="about.html">About</a></li>
            </ul>
         </nav>
      </div>
   </div>
   <footer>
      Menu CSS © 2024
   </footer>

*{
	padding:0;
	margin:0;
	box-sizing:border-box;
}

.wrapper{
  min-height: calc(100vh - 70px);
  width:100%;
position: relative;
}
html{
	height: 100%;
}
body{
	height:100%;
	background:#ddd;
}

h2{
	padding:40px;
	background:#112233;
	color:#f0f1f5;
	font-family: big john;
	text-align: center;
	font-size:30pt;
	letter-spacing: 15px;
}

.navigationDesktop{
	background:#fc575e;
}

nav {
	height:40px;
	width:560px; 
	margin:0 auto;
	text-align: center;
	text-transform: uppercase;
}

nav a{
	display:block;
	text-decoration: none;
	font-family: monospace;
	font-weight: bold;
	font-size:13pt;
	color:#112233;
}

nav a:hover{
	background:#223433;
	color:#f0f1f5;
}

nav ul{
	list-style: none;
}

nav ul li{
	float:left;
	width:140px;
	height:40px;
	line-height: 40px;
	background:#fc575e;
}

nav ul ul li{
position: relative;
	display:none;
}

nav ul ul ul{
	display:none;
}

nav ul li:hover ul li{
	display: block;
   animation: navmenu 600ms forwards;
}

@keyframes navmenu{
	0%{
		opacity:0; 
		top:-10px;
	}
	100%{
		opacity:0.9;
		top:0px;
	}
}

nav ul ul li:hover ul{
	display:block;
	position:absolute;
	width:140px;
	left:140px;
	top:0px;
}

article{
	padding:10px;
	font-family: arial;
}

footer{
height: 70px;
	border-top:2px solid #fc575e;
	padding:20px;
	width: 100%;
	text-align: center;
	background:#112233;
	color:#fff;
	font-family: sans-serif;
	font-weight: bold;
	font-size:11pt;
	text-transform: uppercase;
}

73

Navigation Menu with Footer Menu

By: rald_dev

73

Facebook Loading Animation

By: rald_dev

body{
  background: #333642;
}

.box-canvas{
  position: relative;
  margin: auto;
  display: block;
  margin-top: 8%;
  margin-bottom: 8%;
  width: 250px;
  height:600px;
}

.cog-one {
  --cog-color: #898888;
  --cog-accent-color: #A5A2A2;
  --cog-inner-size: 30px;
  --cog-outer-size: 50px;
  
  --start-rotation: 360deg;
  --end-rotation: 0deg;
}

.cog-two {
  --cog-color: #A16036;
  --cog-accent-color: #BC7F60;
  --cog-inner-size: 15px;
  --cog-outer-size: 40px;
  
  --start-rotation: 16deg;
  --end-rotation: 376deg;
  
  left: 120px;
  top: 110px;
  
  transform: rotate(var(--start-rotation));
}

.cog-three {
  --cog-color: #F1B72E;
  --cog-accent-color: #FFD100;
  --cog-inner-size: 20px;
  --cog-outer-size: 50px;
  
  --start-rotation: 300deg;
  --end-rotation: -60deg;
  
  left: 33px;
  top: 210px;
  
  transform: rotate(var(--start-rotation));
  
}

.cog {
  position: absolute;
  width: var(--cog-inner-size);
  height: var(--cog-inner-size);
  background: transparent;
  border-radius: 50%;
  border: var(--cog-outer-size) solid var(--cog-color);
  
  animation: 5s cogRotate infinite linear;
}

@keyframes cogRotate {
  0% {
    transform: rotate(var(--start-rotation));
  }
  
  100% {
    transform: rotate(var(--end-rotation))
  }
}

/* Inner circle accent */
.cog::before {
  content: '';
  position: absolute;
  width: calc(var(--cog-inner-size) + 10px);
  height: calc(var(--cog-inner-size) + 10px);
  border: 3px solid var(--cog-accent-color);
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* Outer circle accent */
.cog::after {
  content: '';
  position: absolute;
  width: calc(var(--cog-inner-size) + var(--cog-outer-size) * 2 - 20px);
  height: calc(var(--cog-inner-size) + var(--cog-outer-size) * 2 - 20px);
  border: 3px solid var(--cog-accent-color);
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.teeth.vertical {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/* Top and bottom teeth */
.cog-one .teeth.vertical {
  background: linear-gradient(to bottom,
    var(--cog-color),
    var(--cog-color) 30px,
    transparent 30px,
    transparent 120px,
    var(--cog-color) 120px,
    var(--cog-color));
  height: 170px;
  width: 25px;
  top: -70px;
}

.cog-two .teeth.vertical {
  width: 15px;
  height: 125px;
  top: -55px;
  
  background: linear-gradient(to bottom,
    var(--cog-color),
    var(--cog-color) 30px,
    transparent 30px,
    transparent 80px,
    var(--cog-color) 80px,
    var(--cog-color));
  
}

.cog-three .teeth.vertical {
  background: linear-gradient(to bottom,
    var(--cog-color),
    var(--cog-color) 30px,
    transparent 30px,
    transparent 120px,
    var(--cog-color) 120px,
    var(--cog-color));
  height: 160px;
  width: 25px;
  top: -70px;
}

.teeth.vertical::after {
  content: '';
  position: absolute;
  transform:rotate(45deg);
}

/* Top right and bottom left teeth */
.cog-one .teeth.vertical::after {
  background: linear-gradient(to bottom,
    var(--cog-color),
    var(--cog-color) 30px,
    transparent 30px,
    transparent 120px,
    var(--cog-color) 120px,
    var(--cog-color));
  height: 170px;
  width: 25px;
}

.cog-two .teeth.vertical::after {
  background: linear-gradient(to bottom,
    var(--cog-color),
    var(--cog-color) 30px,
    transparent 30px,
    transparent 80px,
    var(--cog-color) 80px,
    var(--cog-color));
  width: 15px;
  height: 125px;
}

.cog-three .teeth.vertical::after {
  background: linear-gradient(to bottom,
    var(--cog-color),
    var(--cog-color) 30px,
    transparent 30px,
    transparent 120px,
    var(--cog-color) 120px,
    var(--cog-color));
  height: 160px;
  width: 25px;
}

.teeth.horizontal {
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
}

/* Left and right teeth */
.cog-one .teeth.horizontal {
  left: -70px;
  background: linear-gradient(to right,
    var(--cog-color),
    var(--cog-color) 30px,
    transparent 30px,
    transparent 120px,
    var(--cog-color) 120px,
    var(--cog-color));
  height: 25px;
  width: 170px;
}

.cog-two .teeth.horizontal {
  background: linear-gradient(to right,
    var(--cog-color),
    var(--cog-color) 30px,
    transparent 30px,
    transparent 80px,
    var(--cog-color) 80px,
    var(--cog-color));
  height: 15px;
  width: 125px;
  left: -55px;
}

.cog-three .teeth.horizontal {
  left: -70px;
  background: linear-gradient(to right,
    var(--cog-color),
    var(--cog-color) 30px,
    transparent 30px,
    transparent 120px,
    var(--cog-color) 120px,
    var(--cog-color));
  height: 25px;
  width: 160px;
}

.teeth.horizontal::after {
  content: '';
  position: absolute;
  transform: rotate(45deg);
}

/* Top left and bottom right teeth */
.cog-one .teeth.horizontal::after {
  background: linear-gradient(to right,
    var(--cog-color),
    var(--cog-color) 30px,
    transparent 30px,
    transparent 120px,
    var(--cog-color) 120px,
    var(--cog-color));
  height: 25px;
  width: 170px;
}

.cog-two .teeth.horizontal::after {
  background: linear-gradient(to right,
    var(--cog-color),
    var(--cog-color) 30px,
    transparent 30px,
    transparent 80px,
    var(--cog-color) 80px,
    var(--cog-color));
  height: 15px;
  width: 125px;
}

.cog-three .teeth.horizontal::after {
  background: linear-gradient(to right,
    var(--cog-color),
    var(--cog-color) 30px,
    transparent 30px,
    transparent 120px,
    var(--cog-color) 120px,
    var(--cog-color));
  height: 25px;
  width: 160px;
}

73

Cogs Animation

By: rald_dev

<div class="menu">
  
  <div class="menu-block" id="block1">
    <a href="#block1" class="block-title"><i class="fas fa-user"></i>Profile</a>
    <div class="submenu">
      <a href="#"><i class="fas fa-home"></i>My page</a>
      <a href="#"><i class="fas fa-user-friends"></i>Friends</a>
      <a href="#"><i class="fas fa-users"></i>Groups</a>
    </div>
  </div>
  
  <div class="menu-block" id="block2">
    <a href="#block2" class="block-title"><i class="fas fa-envelope"></i>Messages</a>
    <div class="submenu">
      <a href="#"><i class="fas fa-inbox"></i>Inbox</a>
      <a href="#"><i class="fas fa-share-square"></i>Sent</a>
      <a href="#"><i class="fas fa-trash-alt"></i>Trash</a>
    </div>
  </div>
  
  <div class="menu-block" id="block3">
    <a href="#block3" class="block-title"><i class="fas fa-cog"></i>Settings</a>
    <div class="submenu">
      <a href="#"><i class="fas fa-tasks"></i>Account</a>
      <a href="#"><i class="fas fa-history"></i>History</a>
    </div>
  </div>
  
  <div class="menu-block">
    <a href="#" class="block-title"><i class="fas fa-sign-out-alt"></i>Logout</a>
  </div>
    
</div><div class="menu">
  
  <div class="menu-block" id="block1">
    <a href="#block1" class="block-title"><i class="fas fa-user"></i>Profile</a>
    <div class="submenu">
      <a href="#"><i class="fas fa-home"></i>My page</a>
      <a href="#"><i class="fas fa-user-friends"></i>Friends</a>
      <a href="#"><i class="fas fa-users"></i>Groups</a>
    </div>
  </div>
  
  <div class="menu-block" id="block2">
    <a href="#block2" class="block-title"><i class="fas fa-envelope"></i>Messages</a>
    <div class="submenu">
      <a href="#"><i class="fas fa-inbox"></i>Inbox</a>
      <a href="#"><i class="fas fa-share-square"></i>Sent</a>
      <a href="#"><i class="fas fa-trash-alt"></i>Trash</a>
    </div>
  </div>
  
  <div class="menu-block" id="block3">
    <a href="#block3" class="block-title"><i class="fas fa-cog"></i>Settings</a>
    <div class="submenu">
      <a href="#"><i class="fas fa-tasks"></i>Account</a>
      <a href="#"><i class="fas fa-history"></i>History</a>
    </div>
  </div>
  
  <div class="menu-block">
    <a href="#" class="block-title"><i class="fas fa-sign-out-alt"></i>Logout</a>
  </div>
    
</div>

body {background:#0f0f0f; font-family:Arial, Helvetica, sans-serif;}
a, a:link, a:visited, a:hover, a:active {color:inherit; text-decoration:none;}

.menu {position:absolute; top:50%; left:50%; width:15em; height:auto; transform:translate(-50%, -50%); overflow:hidden; border-radius:0.25em; background:#333;}

.menu-block {background:#369; color:#fff;}
.menu-block:target .submenu {max-height:10em; padding:1em 0 0.5em 0;}
      
.block-title {display:block; position:relative; padding:1em; border-bottom:1px solid #258;}
.menu-block:target .block-title {border-bottom:1px solid #369;}

.block-title i {margin-right:0.5em;}
   
.block-title:before {content:""; position:absolute; display:none; width:1em; height:1em; background:#369; left:1em; bottom:-0.5em; transform:rotate(45deg);}
.menu-block:target .block-title:before {display:block;}
    
.submenu {background:#333; padding:0; overflow:hidden; max-height:0; transition:all 0.25s linear;}
.submenu a {display:block; position:relative; padding:0.25em 1em; margin:0.25em 0;}
.submenu a:before {content:""; position:absolute; width:0.2em; height:100%; background:none; top:0; left:0.25em; transition:background 0.25s linear;}
.submenu a:hover:before {background:#369;}

.submenu a i {margin-right:0.5em;}

72

Navigation Menu [

By: rald_dev

.loadingWrap {  
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 500px;
  height: 50px;
  text-align: center;
}

.loadingBoxes {
  display: inline-block;
  margin: 3px;
  width: 40px;
  height: 40px;
  border-radius: 10px;
}

.loadingBoxColour1 {background: #00A396; 
      animation: loadingBoxColour; animation-duration: 2s;
      animation-delay: 0.0s; animation-iteration-count: infinite;
      animation-timing-function: ease-in-out;  
     }
    .loadingBoxColour2 {background: #81C540;
      animation: loadingBoxColour; animation-duration: 2s;
      animation-delay: 0.1s; animation-iteration-count: infinite;
      animation-timing-function: ease-in-out;  
    }
    .loadingBoxColour3 {background: #F5B52E;
      animation: loadingBoxColour; animation-duration: 2s;
      animation-delay: 0.2s; animation-iteration-count: infinite;
      animation-timing-function: ease-in-out;  
    }
    .loadingBoxColour4 {background: #ED5B35;
      animation: loadingBoxColour; animation-duration: 2s;
      animation-delay: 0.3s; animation-iteration-count: infinite;
      animation-timing-function: ease-in-out;  }

.loadingBoxColour5 {background: #EA225E;
      animation: loadingBoxColour; animation-duration: 2s;
      animation-delay: 0.4s; animation-iteration-count: infinite;
      animation-timing-function: ease-in-out;  }

@keyframes loadingBoxColour {
            0% { transform: scale(1.0); }
            50% { transform: scale(0.5); }
            100% { transform: scale(1.0); }
          }

72

Loading Animation

By: rald_dev

* {
	margin: 0; padding: 0;
	box-sizing: border-box;
}
body {
	background: #ffffff; align-items: center;
    min-height: 100vh; display: flex;
}
.box-outer {
	overflow: hidden; margin: 50px auto;
	width: 200px; height: 200px;
}
.main_box {
	width: 200px; height: 200px;
	position: relative;
	background: #f34c4c;
	border: 5px solid #ffffff;
}
.bar {
	position: absolute; width: 50px;
	height: 5px; background: rgb(0, 0, 0);
	transition: all 1s linear;
	animation-duration: 1s;
	animation-fill-mode: both;
	animation-iteration-count: infinite;
}
.bar.delay {
	animation-delay: 0.5s;
}
.top {
	top: -5px; left: -5px;
}
.right {
	top: 18px; right: -28px;
	transform: rotate(90deg);
}
.bottom {
	bottom: -5px; left: -5px;
}
.left {
	top: 18px; left: -28px;
	transform: rotate(90deg);
}

@-webkit-keyframes h-move {
 0% { left: -5px; }
100% { left: 200px; }
}

@keyframes h-move {
 0% { left: -5px; }
100% { left: 200px; }
}
.top, .bottom { animation-name: h-move; }

@-webkit-keyframes v-move {
0% { top: -5px; }
100% { top:228px; }
}

@keyframes v-move {
 0% { top: -5px; }
100% { top:228px; }
}

.right, .left {
	animation-name: v-move;
}

72

Box border animation

By: rald_dev

body{
			margin: 0;
			padding: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #29a329;
		}
		.container{
			margin-top: 100px;
			width: 400px;
			height: 400px;
			position: relative;
			border-radius: 50%;
			animation: draw 5s linear infinite;
			}
		.trace{
			position: absolute;
			width: 390px;
			height:390px;
			border-radius: 50%;
			border: 10px solid #fff;
			border-right: 10px solid transparent;
			border-bottom: 10px solid transparent;
			transform: rotate(-45deg);
		}
		.pencil{
			position: absolute;
			height: 100%;
			width: 82px;
			/*background: green;*/
			left: 41%;
		}
		.rubber{
			width: 82px;
			height: 50px;
			background: violet;
			border-radius:15px 15px 0 0 ;
			margin-top: -6px;
		}
		.joint{
			width: 82px;
			height: 60px;
			background: black;
		}
		.stick{
			height: 58%;
			background: linear-gradient(to right, #cccc00  27px, #1a75ff 0 55px, #cc0066 20px);
		}
		.pencil-top{
			height: 64px;
			background: black;
			clip-path: polygon(0 0, 50% 100%, 100% 0);
		}
		.pencil-tip{
			background: #fff;
			height: 20px;
			clip-path: polygon(35% 0, 50% 100%, 64.5% 0);
			margin-top: -19px;
		}

@keyframes draw{
			0%{
				transform: rotate(360deg);
			}
			100%{
				transform: rotate(0deg);
			}
		}

72

Pencil animation

By: rald_dev

Hello World & Advance Merry Christmas!
<div class="container">
	<div class="tree">
		<div class="shadow ts-3d"></div>
		<div class="trunk ts-3d">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
		<div class="leaves-bottom ts-3d">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
		<div class="leaves-middle ts-3d">
			<div class="ts-3d"></div>
			<div class="ts-3d"></div>
			<div class="ts-3d"></div>
			<div class="ts-3d"></div>
		</div>
		<div class="leaves-top ts-3d">
			<div class="ts-3d"></div>
			<div class="ts-3d"></div>
			<div class="ts-3d"></div>
			<div class="ts-3d"></div>
		</div>
		<div class="star star-1 ts-3d"></div>
		<div class="star star-2 ts-3d"></div>
		<div class="star star-3 ts-3d"></div>
		<div class="star star-4 ts-3d"></div>
		<div class="star star-5 ts-3d"></div>
		<div class="shine ts-3d"></div>
	</div>
	<div class="snow-container">
		<div class="snow snow-1 snow-y-1"></div>
		<div class="snow snow-2 snow-y-2"></div>
		<div class="snow snow-3 snow-y-3"></div>
		<div class="snow snow-4 snow-y-3"></div>
		<div class="snow snow-5 snow-y-2"></div>
		<div class="snow snow-6 snow-y-1"></div>
		<div class="snow snow-7 snow-y-1"></div>
		<div class="snow snow-8 snow-y-2"></div>
		<div class="snow snow-9 snow-y-3"></div>
		<div class="snow snow-10 snow-y-3"></div>
	</div>
</div>

:root {
	--main-bg: #c2c2c2;
	--trunk-bg-1: #5e2100;
	--trunk-bg-2: #783e00;
	--leaves-bottom-bg-1: #0f980f;
	--leaves-bottom-bg-2: #3fc83f;
	--leaves-middle-bg-1: #1fa81f;
	--leaves-middle-bg-2: #4fd84f;
	--leaves-top-bg-1: #2fb82f;
	--leaves-top-bg-2: #5fe85f;
	--star-bg: #ffdd00;
	--shine-bg: #ffeb69;
	--snow-bg: #f2f2f2;
	--tree-width: 200px;
	--tree-height: 400px;
	--tree-rotate: -15deg;
	--trunk-width: 30px;
	--trunk-height: 400px;
	--trunk-angle: 4.3deg;
	--leaves-translate: 15px;
	--leaves-bottom-width: 100px;
	--leaves-bottom-height: 320px;
	--leaves-bottom-angle: 18.2deg;
	--leaves-middle-width: 80px;
	--leaves-middle-height: 220px;
	--leaves-middle-angle: 21.4deg;
	--leaves-top-width: 60px;
	--leaves-top-height: 140px;
	--leaves-top-angle: 25.5deg;
	--star-size: 20px;
}

html, body {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
}

body {
	overflow: hidden;
}

.ts-3d {
	transform-style: preserve-3d;
}

.container {
	background-color: var(--main-bg);
	width: 100%;
	min-height: 100%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tree {
	width: var(--tree-width);
	height: var(--tree-height);
	position: relative;
	transform-style: preserve-3d;
	transform: rotateX(var(--tree-rotate));
}

.trunk,
.leaves-bottom,
.leaves-middle,
.leaves-top {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	animation: 10s tree-rotate linear infinite;
}

.trunk div {
	border-top: none;
	border-left: solid var(--trunk-width) transparent;
	border-right: solid var(--trunk-width) transparent;
	position: absolute;
	bottom: 0;
	left: calc(50% - var(--trunk-width));
	transform-origin: bottom;
}

.trunk div:nth-child(1) {
	border-bottom: solid var(--trunk-height) var(--trunk-bg-1);
	transform: rotateX(var(--trunk-angle)) translateY(2px) translateZ(var(--trunk-width));
}

.trunk div:nth-child(2) {
	border-bottom: solid var(--trunk-height) var(--trunk-bg-2);
	transform: rotateY(90deg) rotateX(calc(var(--trunk-angle) * -1)) translateY(2px) translateZ(calc(var(--trunk-width) * -1));
}

.trunk div:nth-child(3) {
	border-bottom: solid var(--trunk-height) var(--trunk-bg-1);
	transform: rotateX(calc(var(--trunk-angle) * -1)) translateY(2px) translateZ(calc(var(--trunk-width) * -1));
}

.trunk div:nth-child(4) {
	border-bottom: solid var(--trunk-height) var(--trunk-bg-2);
	transform: rotateY(-90deg) rotateX(calc(var(--trunk-angle) * -1)) translateY(2px) translateZ(calc(var(--trunk-width) * -1));
}

.leaves-bottom div {
	border-top: none;
	border-left: solid var(--leaves-bottom-width) transparent;
	border-right: solid var(--leaves-bottom-width) transparent;
	position: absolute;
	top: var(--star-size);
	left: calc(50% - var(--leaves-bottom-width));
	transform-origin: bottom;
}

.leaves-bottom div:nth-child(1) {
	border-bottom: solid var(--leaves-bottom-height) var(--leaves-bottom-bg-1);
	transform: rotateX(var(--leaves-bottom-angle)) translateY(var(--leaves-translate)) translateZ(var(--leaves-bottom-width));
}

.leaves-bottom div:nth-child(2) {
	border-bottom: solid var(--leaves-bottom-height) var(--leaves-bottom-bg-2);
	transform: rotateY(90deg) rotateX(calc(var(--leaves-bottom-angle) * -1)) translateY(var(--leaves-translate)) translateZ(calc(var(--leaves-bottom-width) * -1));
}

.leaves-bottom div:nth-child(3) {
	border-bottom: solid var(--leaves-bottom-height) var(--leaves-bottom-bg-1);
	transform: rotateX(calc(var(--leaves-bottom-angle) * -1)) translateY(var(--leaves-translate)) translateZ(calc(var(--leaves-bottom-width) * -1));
}

.leaves-bottom div:nth-child(4) {
	border-bottom: solid var(--leaves-bottom-height) var(--leaves-bottom-bg-2);
	transform: rotateY(-90deg) rotateX(calc(var(--leaves-bottom-angle) * -1)) translateY(var(--leaves-translate)) translateZ(calc(var(--leaves-bottom-width) * -1));
}

.leaves-middle div {
	border-top: none;
	border-left: solid var(--leaves-middle-width) transparent;
	border-right: solid var(--leaves-middle-width) transparent;
	position: absolute;
	top: var(--star-size);
	left: calc(50% - var(--leaves-middle-width));
	transform-origin: bottom;
}

.leaves-middle div:nth-child(1) {
	border-bottom: solid var(--leaves-middle-height) var(--leaves-middle-bg-1);
	transform: rotateX(var(--leaves-middle-angle)) translateY(var(--leaves-translate)) translateZ(var(--leaves-middle-width));
}

.leaves-middle div:nth-child(2) {
	border-bottom: solid var(--leaves-middle-height) var(--leaves-middle-bg-2);
	transform: rotateY(90deg) rotateX(calc(var(--leaves-middle-angle) * -1)) translateY(var(--leaves-translate)) translateZ(calc(var(--leaves-middle-width) * -1));
}

.leaves-middle div:nth-child(3) {
	border-bottom: solid var(--leaves-middle-height) var(--leaves-middle-bg-1);
	transform: rotateX(calc(var(--leaves-middle-angle) * -1)) translateY(var(--leaves-translate)) translateZ(calc(var(--leaves-middle-width) * -1));
}

.leaves-middle div:nth-child(4) {
	border-bottom: solid var(--leaves-middle-height) var(--leaves-middle-bg-2);
	transform: rotateY(-90deg) rotateX(calc(var(--leaves-middle-angle) * -1)) translateY(var(--leaves-translate)) translateZ(calc(var(--leaves-middle-width) * -1));
}

.leaves-top div {
	border-top: none;
	border-left: solid var(--leaves-top-width) transparent;
	border-right: solid var(--leaves-top-width) transparent;
	position: absolute;
	top: var(--star-size);
	left: calc(50% - var(--leaves-top-width));
	transform-origin: bottom;
}

.leaves-top div:nth-child(1) {
	border-bottom: solid var(--leaves-top-height) var(--leaves-top-bg-1);
	transform: rotateX(var(--leaves-top-angle)) translateY(var(--leaves-translate)) translateZ(var(--leaves-top-width));
}

.leaves-top div:nth-child(2) {
	border-bottom: solid var(--leaves-top-height) var(--leaves-top-bg-2);
	transform: rotateY(90deg) rotateX(calc(var(--leaves-top-angle) * -1)) translateY(var(--leaves-translate)) translateZ(calc(var(--leaves-top-width) * -1));
}

.leaves-top div:nth-child(3) {
	border-bottom: solid var(--leaves-top-height) var(--leaves-top-bg-1);
	transform: rotateX(calc(var(--leaves-top-angle) * -1)) translateY(var(--leaves-translate)) translateZ(calc(var(--leaves-top-width) * -1));
}

.leaves-top div:nth-child(4) {
	border-bottom: solid var(--leaves-top-height) var(--leaves-top-bg-2);
	transform: rotateY(-90deg) rotateX(calc(var(--leaves-top-angle) * -1)) translateY(var(--leaves-translate)) translateZ(calc(var(--leaves-top-width) * -1));
}

@keyframes tree-rotate {
	0%        { transform: rotateX(0deg) rotateY(0deg); }
	99.99999% { transform: rotateX(0deg) rotateY(359deg); }
}

.shadow {
	background-color: rgba(0, 0, 0, 0.8);
	width: calc(var(--leaves-bottom-width) * 2);
	height: calc(var(--leaves-bottom-width) * 2);
	filter: blur(calc(var(--leaves-bottom-width) / 2));
	position: absolute;
	bottom: calc(var(--leaves-bottom-width) * -1);
	left: calc(50% - var(--leaves-bottom-width));
	transform: rotateX(90deg) translateX(-50%);
	animation: 10s shadow-rotate linear infinite;
}

@keyframes shadow-rotate {
	0%        { transform: rotateX(-90deg) rotateZ(0deg); }
	99.99999% { transform: rotateX(-90deg) rotateZ(359deg); }
}

.star-1 {
	transform: translateZ(-2px);
	animation: 10s star-1-rotate linear infinite;
}

@keyframes star-1-rotate {
	0%        { transform: rotateX(0deg) rotateY(0deg) translateZ(-2px); }
	99.99999% { transform: rotateX(0deg) rotateY(359deg) translateZ(-2px); }
}

.star-2 {
	transform: translateZ(-1px);
	animation: 10s star-2-rotate linear infinite;
}

@keyframes star-2-rotate {
	0%        { transform: rotateX(0deg) rotateY(0deg) translateZ(-1px); }
	99.99999% { transform: rotateX(0deg) rotateY(359deg) translateZ(-1px); }
}

.star-3 {
	transform: translateZ(0px);
	animation: 10s star-3-rotate linear infinite;
}

@keyframes star-3-rotate {
	0%        { transform: rotateX(0deg) rotateY(0deg) translateZ(0px); }
	99.99999% { transform: rotateX(0deg) rotateY(359deg) translateZ(0px); }
}

.star-4 {
	transform: translateZ(1px);
	animation: 10s star-4-rotate linear infinite;
}

@keyframes star-4-rotate {
	0%        { transform: rotateX(0deg) rotateY(0deg) translateZ(1px); }
	99.99999% { transform: rotateX(0deg) rotateY(359deg) translateZ(1px); }
}

.star-5 {
	transform: translateZ(2px);
	animation: 10s star-5-rotate linear infinite;
}

@keyframes star-5-rotate {
	0%        { transform: rotateX(0deg) rotateY(0deg) translateZ(2px); }
	99.99999% { transform: rotateX(0deg) rotateY(359deg) translateZ(2px); }
}

.star,
.star:before,
.star:after {
	content: '';
	height: 0;
	width: 0;
	border-top: solid 30px var(--star-bg);
	border-left: solid 45px transparent;
	border-right: solid 45px transparent;
	position: absolute;
	top: 0;
	left: calc(50% - 45px);
}

.star:before {
	transform: rotate(72deg);
	top: -33px;
	left: -46px;
}

.star:after {
	transform: rotate(287deg);
	top: -33px;
	left: -44px;
}

.shine {
	background: var(--shine-bg);
	height: 90px;
	width: 90px;
	position: absolute;
	top: -45px;
	left: calc(50% - 45px);
	border-radius: 50%;
	transform: translateZ(40px);
	filter: blur(20px);
	opacity: 0.6;
	animation: 5s shine linear infinite;
}

@keyframes shine {
	0%   { transform: scale(1) translateZ(40px); }
	50%  { transform: scale(1.5) translateZ(40px); }
	100% { transform: scale(1) translateZ(40px); }
}

.snow-container {
	width: 100%;
	height: 100%;
	position: absolute;
}

.snow {
	position: absolute;
}

.snow:before {
	content: '';
	background-color: var(--snow-bg);
	width: 100%;
	height: 100%;
	position: absolute;
	border-radius: 50%;
}

.snow-y-1:before {
	animation: 8s snow-y-1 ease-in infinite, 8s snow-y-0 linear infinite;
}

.snow-y-2:before {
	animation: 6s snow-y-2 ease-in infinite, 6s snow-y-0 linear infinite;
}

.snow-y-3:before {
	animation: 4s snow-y-2 ease-in infinite, 4s snow-y-0 linear infinite;
}

.snow-1 {
	width: 20px;
	height: 20px;
	top: calc(50% - 250px);
	left: calc(50% - 10px);
	animation: 1s snow-x linear infinite;
}

.snow-2 {
	width: 15px;
	height: 15px;
	top: calc(50% - 300px);
	left: calc(50% - 30px);
	animation: 0.8s snow-x linear infinite 0.1s;
}

.snow-3 {
	width: 10px;
	height: 10px;
	top: calc(50% - 400px);
	left: calc(50% + 60px);
	animation: 0.6s snow-x linear infinite 0.8s;
}

.snow-4 {
	width: 25px;
	height: 25px;
	top: calc(50% - 200px);
	left: calc(50% + 50px);
	animation: 0.5s snow-x linear infinite 0.5s;
}

.snow-5 {
	width: 18px;
	height: 18px;
	top: calc(50% - 200px);
	left: calc(50% - 50px);
	animation: 0.5s snow-x linear infinite 0.5s;
}

.snow-6 {
	width: 12px;
	height: 12px;
	top: calc(50% - 150px);
	left: calc(50% - 120px);
	animation: 0.8s snow-x linear infinite 0.5s;
}

.snow-7 {
	width: 20px;
	height: 20px;
	top: calc(50% - 150px);
	left: calc(50% + 75px);
	animation: 1s snow-x linear infinite 0.6s;
}

.snow-8 {
	width: 22px;
	height: 22px;
	top: calc(50% - 10px);
	left: calc(50% - 30px);
	animation: 1s snow-x linear infinite 0.8s;
}

.snow-9 {
	width: 8px;
	height: 8px;
	top: calc(50% - 250px);
	left: calc(50% - 30px);
	animation: 1s snow-x linear infinite 0.8s;
}

.snow-10 {
	width: 13px;
	height: 13px;
	top: calc(50% - 250px);
	left: calc(50% - 100px);
	animation: 1s snow-x linear infinite 0.8s;
}

@keyframes snow-x {
	0%   { transform: translateX(0px); }
	25%  { transform: translateX(5px); }
	50%  { transform: translateX(0px); }
	75%  { transform: translateX(-5px); }
	100% { transform: translateX(0px); }
}

@keyframes snow-y-0 {
	0%   { opacity: 1; }
	60%  { opacity: 1; }
	100% { opacity: 0; }
}

@keyframes snow-y-1 {
	0%        { transform: translateY(0px); }
	99.99999% { transform: translateY(300px); }
	100%      { transform: translateY(0px); }
}

@keyframes snow-y-2 {
	0%        { transform: translateY(0px); }
	99.99999% { transform: translateY(400px); }
	100%      { transform: translateY(0px); }
}

@keyframes snow-y-3 {
	0%        { transform: translateY(0px); }
	99.99999% { transform: translateY(500px); }
	100%      { transform: translateY(0px); }
}
.message {
	display: flex;
	font-size: 100px;
	font-weight: 800;
	color: #5FE85F;
	font-family: sans-serif;
	vertical-align: middle;	
	font-family: 'Courier New', Courier, monospace;
	background: url(http://pm1.narvii.com/6380/3990038ed73ad3832195151af1c9438ca5ff765f_00.jpg);
}

71

All

Border Animation

By: rald_dev

Glowing Loader Ring Animation

By: rald_dev

Rolling text animation

By: rald_dev

Ringing call pluse animation

By: rald_dev

Navigation Menu with Footer Menu

By: rald_dev

Facebook Loading Animation

By: rald_dev

Cogs Animation

By: rald_dev

Navigation Menu [

By: rald_dev

Loading Animation

By: rald_dev

Box border animation

By: rald_dev

Pencil animation

By: rald_dev

Christmas Tree

By: rald_dev