Creating and positioning diagram with css - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Position

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Position

Description

Creating and positioning diagram with css

Demo Code

ResultView the demo in separate window 


<html>
 <head> 
  <style>
.dot<!-- w w  w.jav a  2  s .  co  m-->
 {
   display:block;
   width:21px;
   height:21px;
   border-radius:21px;
   position:absolute;
}

.dot1
 {
   -webkit-animation:dot2 3s infinite;
   top:21px;
}

.dot2
 {
   -webkit-animation:dot2 3s infinite;
   left:21px;
   top:21px;
}

.dot3
 {
   -webkit-animation:dot2 3s infinite;
   top:11px;
   left:16px;
}

.container
 {
   border-style:solid;
   border-color:Chartreuse;
   border-width:2px;
   width:100px;
   height:100px;
}

@-webkit-keyframes dot1
 {
   0% {
      background-color:yellow;
   }
   
   50% {
      background-color:blue;
   }
   
   100% {
      background-color:pink;
   }

}
</style> 
 </head> 
 <body> 
  <div class="container"> 
   <span class="dot dot1">&nbsp;</span> 
   <span class="dot dot2">&nbsp;</span> 
   <span class="dot dot3">&nbsp;</span> 
  </div>  
 </body>
</html>

Related Tutorials