CSS Eyes Animation

https://codepen.io/guldus/pen/expmxV?editors=1100 CSS Eyes Animation HTML CODE: <div class="wrapper"> <div class="eye left"><span></span></div> <div class="eye right"><span></span></div> </div> <div class="nose"></div> CSS CODE: body{ background:#ff6600; } .wrapper{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 600px; display: flex; justify-content: space-between; transform: translate3d(-50%,-70%,0); } .nose{ content: ""; position: absolute; top: 50%; left:50%; width:130px; height:130px; background: #000; border-radius:50%; transform:translate(-50%,-50%); }... Continue Reading →

CSS LOADING ANIMATION 3

https://codepen.io/guldus/pen/pqPygE?editors=1100 CSS LOADING ANIMATION HTML <div class="container"> <span class="a a"></span> <span class="a2 a"></span> <span class="a3 a"></span> <span class="a2 a"></span> <span class="a3 a"></span> <span class="a4 a"></span> <span class="a3 a"></span> <span class="a4 a"></span> <span class="a5 a"></span> </div> CSS *{ margin:0; padding:0; } body{ background:#333; } .container{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:285px; height:285px; } .a{ width:75px; height:75px; position:relative;... Continue Reading →

Create a website or blog at WordPress.com

Up ↑

Design a site like this with WordPress.com
Get started