"Pendulum Animation Pure CSS)"
Bootstrap 4.1.1 Snippet by ManuSingh

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- <div class="floating-icon "> Demo </div>--> <div class="base"> <div class="holder"></div> <div class="thread"> <div class="knob"></div> <div class="pendulum">Manu Singh</div> </div> <div class="shadow"></div> </div>
* { margin: 0; padding: 0; box-sizing: border-box; } .base { width: 500px; border-top: 5px solid gray; margin: auto; text-align: center; position: relative; padding: 0 0 30px; } .holder { width: 30px; height: 20px; background: black; margin: auto; border-radius: 0 0 50% 50%; } .thread { display: inline-block; width: 2px; height: 200px; background: black; border-radius: 5px; position: relative; transform-origin: 50% 0; animation: moveIt 2.5s ease-in-out infinite; } .thread:after { content: ""; position: absolute; width: 5px; height: 5px; border-radius: 50%; background: red; border: 2px solid white; top: -4.5px; left: -3.5px; } .knob { width: 10px; height: 10px; position: absolute; top: -18px; left: -4.5px; border: 2px solid rgba(255, 255, 255, .5); border-radius: 50%; border-bottom: 2px solid transparent; } .pendulum { width: 160px; background: -moz-radial-gradient(circle at 70% 35%, white, #66d63e 30%, #40a31d 50%); background: -webkit-radial-gradient(circle at 70% 35%, white, #66d63e 30%, #40a31d 50%); background: -o-radial-gradient(circle at 70% 35%, white, #66d63e 30%, #40a31d 50%); background: -ms-radial-gradient(circle at 70% 35%, white, #66d63e 30%, #40a31d 50%); background: radial-gradient(circle at 70% 35%, white, #66d63e 30%, #40a31d 50%); border-radius: 10%; position: absolute; bottom: -37px; left: -77px; font-size: 20px; padding: 10px 20px; } .shadow { width: 30px; height: 15px; background: rgba(0, 0, 0, 0.2); border-radius: 50%; margin: 50px auto 0; animation: moveShade 1.25s ease-in-out alternate infinite; } @keyframes moveIt { 0%, 100% { transform: rotate(45deg); } 50% { transform: rotate(-45deg); } } @keyframes moveShade { 0% { transform: translateX(-220px) scale(1.4, .5); filter: blur(20px); } 50% { filter: blur(3px); } 100% { transform: translateX(220px) scale(1.4, .5); filter: blur(20px); } }

Related: See More


Questions / Comments: