Interactive Channel Logo 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!"@@##@@
以上就是动画与新标志解锁!!!!的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1500801.html
微信扫一扫 
支付宝扫一扫 
