illusionistic 3d neon button
登录后复制
* { margin: 0; padding: 0; box-sizing: border-box;}body { height: 100vh; display: flex; justify-content: center; align-items: center; background: black; overflow: hidden; font-family: "Courier New", monospace; position: relative; color: white;}/* Binary code background */body::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.5)); z-index: 0; pointer-events: none; mask: repeating-linear-gradient( 0deg, transparent 0%, transparent 20%, rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0.1) 40% ); animation: binaryMove 5s linear infinite;}@keyframes binaryMove { 0% { background-position: 0 0; } 100% { background-position: 0 100%; }}.button-container { position: relative; z-index: 1;}.neon-button { padding: 20px 60px; font-size: 1.5rem; color: #fff; background: rgba(0, 0, 0, 0.7); border: none; outline: none; cursor: pointer; border-radius: 10px; position: relative; box-shadow: 0 0 20px rgba(0, 255, 255, 0.5), 0 0 30px rgba(255, 0, 255, 0.5); overflow: hidden; transition: all 0.3s ease;}.neon-button::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, #ff00ff, #00ffff); filter: blur(15px); opacity: 0.7; transition: opacity 0.3s ease;}.neon-button:hover { transform: translateY(-5px) rotate(2deg); box-shadow: 0 0 40px rgba(0, 255, 255, 0.7), 0 0 60px rgba(255, 0, 255, 0.7);}.neon-button:hover::before { opacity: 1; filter: blur(25px);}.neon-button:active { transform: translateY(3px); box-shadow: 0 0 10px rgba(0, 255, 255, 0.9), 0 0 20px rgba(255, 0, 255, 0.9);}.ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.3); animation: ripple-animation 1s linear infinite;}@keyframes ripple-animation { 0% { transform: scale(0); opacity: 1; } 100% { transform: scale(10); opacity: 0; }}.neon-button:active::after { content: ""; position: absolute; inset: 0; border-radius: 10px; background: linear-gradient(135deg, #ff00ff, #00ffff); opacity: 0.4; filter: blur(10px); animation: ripple-animation 0.8s linear;}
登录后复制
以上就是使用 css 和 html5 对按钮动画幻觉的霓虹灯效果的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2646321.html
