Animation with New Logo Unlocked!!!!
Interactive Channel Logo @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap'); body { margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background: linear-gradient(135deg, #0f0c29, #302b63, #24243e); overflow: hidden; } .container { display: flex; justify-content: center; align-items: center; } .logo-box { width: 200px; height: 200px; background: linear-gradient(135deg, #ff416c, #ff4b2b); border-radius: 50%; box-shadow: 0 0 30px #ff4b2b; display: flex; justify-content: center; align-items: center; overflow: hidden; transition: all 0.7s ease-in-out; position: relative; } .logo-box:hover { width: 400px; height: 250px; border-radius: 30px; background: linear-gradient(135deg, #1f1c2c, #928dab); box-shadow: 0 0 50px #928dab; } .logo { width: 200px; height: 200px; background: white; border-radius: 50%; transition: all 0.7s ease-in-out 0.7s; overflow: hidden; position: absolute; } .logo img { width: 100%; height: 100%; object-fit: cover; } .logo-box:hover .logo { right: 30px; width: 100px; height: 100px; top:15px; border-radius: 50%; } .heading { font-family: 'Montserrat', sans-serif; font-size: 2em; font-weight:bolder; color: #fff; position: absolute; left: 30px; top: 40px; opacity: 0; transition: opacity 0.7s ease-in-out 0.3s; } .logo-box:hover .heading { opacity: 1; } .text { font-family: 'Montserrat', sans-serif; font-size: 1em; color: #ccc; position: absolute; left: 30px; bottom: 40px; opacity: 0; transition: opacity 0.7s ease-in-out 0.5s; } .logo-box:hover .text { opacity: 1; } Prince_Codes1 "Transforming lines of code into vibrant digital art – Welcome to Prince_Codes1!" "Follow us for visually stunning web animations and creative coding tutorials!"
Interactive Channel Logo
Prince_Codes1
"Transforming lines of code into
vibrant digital art – Welcome to Prince_Codes1!"
"Follow us for visually stunning web
animations and creative coding tutorials!"
