Css Code Only Pixeldev Code

80

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

79

Navigation Menu with Footer Menu

By: rald_dev

78

Ringing call pluse animation

By: rald_dev

78

CSS Grid Layout

By: rald_dev

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

78

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

78

Glowing Loader Ring Animation

By: rald_dev

77

Facebook Loading 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;}

76

Navigation Menu [

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

76

All

Text sliding animation

By: rald_dev

Pulsating heart

By: rald_dev

Text reveal animation v2

By: rald_dev

Rainbow Box

By: rald_dev

Navigation Menu with Footer Menu

By: rald_dev

Ringing call pluse animation

By: rald_dev

CSS Grid Layout

By: rald_dev

Border Animation

By: rald_dev

Glowing Loader Ring Animation

By: rald_dev

Facebook Loading Animation

By: rald_dev

Navigation Menu [

By: rald_dev

Box border animation

By: rald_dev