Home
About
Earn Sites
Home
Fan style name
Fan style name
Design
S
👇Injoy with source code👇
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Name Fan</title> <style> /* paste CSS code here */ </style> </head> <body> <div class="baire"> <div class="conta" id="fulcon"> <div class="rotate" id="fanDirection"></div> <div class="name" id="user">S</div> </div> </div> <script> // paste javascript here </script> </body> </html>
Copy
CSS
*{ box-sizing: border-box; } .baire{ border: 2px solid green; height: auto; float: left; } .conta{ /* border: 2px solid; */ border-radius: 50%; height: 200px; width: 200px; /* margin: 0 auto ; */ position: relative; float: left; margin: 1px; } .rotate{ border: 2px solid blue; border-radius: 50%; height: 100%; width: 100%; position: absolute; left: 0; top: 0; right: 0; background: url(./fan2.png) no-repeat center center; background-size:cover; animation: playFan 5s linear infinite ; } @keyframes playFan{ 0%{ transform: rotate(-360deg); } 100%{ transform: rotate(360deg); } } .name{ height: 100%; width: 100%; /* border: 2px solid red; */ position: absolute; display: flex; justify-content: center; align-items: center; font-size:xx-large; }
Copy
JAVASCRIPT
let text = document.getElementById('user'); let name = prompt("Enter Your First Name:"); name = name.replace(/\s/g, '') let name1 = name.toUpperCase(); let dir = document.getElementById('fanDirection'); let div = document.querySelector('#fulcon'); for (let index = 0; index < name1.length; index++) { let clone = div.cloneNode(true); div.before(clone) text.innerHTML = name1[index]; if( index % 2 ==0){ dir.style.animationDirection = ''; } else{ dir.style.animationDirection = 'reverse'; } document.querySelector('#fulcon').style.display='none'; }
Copy
