"CSS Spider "
Bootstrap 3.1.0 Snippet by swapnilchafale

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <html> <head> <meta charset="utf-8"> <title>swapnilchafale.com</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <div class="left"> <div class="one"><div class="one"><div class="one"></div></div></div> <div class="two"><div class="two"><div class="two"><div class="two"></div></div></div></div> <div class="three"><div class="three"><div class="three"><div class="three"></div></div></div></div> <div class="four"><div class="four"><div class="four"><div class="four"></div></div></div></div> </div> <div class="right"> <div class="one"><div class="one"><div class="one"><div class="one"></div></div></div></div> <div class="two"><div class="two"><div class="two"><div class="two"></div></div></div></div> <div class="three"><div class="three"><div class="three"><div class="three"></div></div></div></div> <div class="four"><div class="four"><div class="four"><div class="four"></div></div></div></div> </div> </div> </body></html>
html, body { height: 100%; overflow: hidden; } .container { position: absolute; top: 0; left: 50%; margin-left: -20px; -webkit-animation: inicio 5s ease-in-out forwards; } .container::after { background: rgba(0, 0, 0, 0.5); content: ""; position: absolute; top: -1000px; margin-left: 9px; width: 1px; height: 1000px; } .container::before { background: #000000; border-radius: 100%; color: #fff; font-size: 1.3em; content: "......"; position: absolute; margin-top: -5px; margin-left: -2px; width: 25px; height: 25px; } .left { position: absolute; } .right { position: absolute; -webkit-transform: rotatey(180deg); } .one, .two, .three, .four { background: rgba(0, 0, 0, 0.5); position: relative; width: 20px; height: 3px; } .one > .one, .two > .two, .three > .three, .four > .four { -webkit-transform-origin: 20px top; -webkit-transform: rotate(-80deg) translatex(20px); -webkit-animation: seg 2.5s ease infinite; } .one > .one > .one, .two > .two > .two, .three > .three > .three, .four > .four > .four { -webkit-transform-origin: 20px top; -webkit-transform: rotate(10deg) translatex(20px); -webkit-animation: seg 1.5s ease infinite; } .right > .two > .two { -webkit-animation-delay: 200ms; } .two > .two { -webkit-animation-delay: 400ms; } .two > .two > .two { -webkit-animation-delay: 200ms; } .right > .three > .three { -webkit-animation-delay: 400ms; } .three > .three { -webkit-animation-delay: 600ms; } .three > .three > .three { -webkit-animation-delay: 300ms; } .right > .four > .four { -webkit-animation-delay: 100ms; } .four > .four { -webkit-animation-delay: 800ms; } .four > .four > .four { -webkit-animation-delay: 400ms; } @-webkit-keyframes seg { 50% { -webkit-transform: rotate(55deg) translatex(20px); } } @-webkit-keyframes inicio { 100% { top: 50%; } } .name{ position:absolute; top:100px; text-align:center; width:100%; font-size:36px; font-family:Verdana, Geneva, sans-serif; font-weight:bold; color:#000; }
no js :)

Related: See More

Paper Dashboard

Questions / Comments: