Animated Letter code:
1.index.html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Animated Letter</title> <link rel="stylesheet" type="text/css" href="style.css"> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.logo').click(function(){ $('.logo').toggleClass('active') }) }) </script> </head> <body> <div class="logo active"></div> </body> </html>
2.style.css:
body { margin: 0; padding: 0; background: aqua; } .logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(0deg); width: 240px; height: 200px; background: white; border-radius: 20px; border-left: 35px solid yellow; border-right: 35px solid yellow; box-shadow: 0 10px 15px rgba(0,0,0,0.2); transition: 1s; overflow: hidden; } .active { width: 0; height: 70px; border-radius: 70px; transform: translate(-50%,-50%) rotate(360deg); } .logo::before { content: ''; position: absolute; top: -10px; left: -20px; width: 183px; height: 35px; background: yellow; border-radius: 20px 0 0 20px; transform-origin: left; transform: rotate(35deg); z-index: 3; } .logo::after { content: ''; position: absolute; top: -10px; left: 80px; width: 183px; height: 35px; background: yellow; border-radius: 0 20px 20px 0; transform-origin: right; transform: rotate(-35deg); z-index: 3; }
