div+css实现炫酷黑色边框走光登录表单页面代码
代码语言:html
所属分类:表单美化
代码描述:div+css实现炫酷黑色边框走光登录表单页面代码
代码标签: div css 炫酷 黑色 边框 走光 登录 表单
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100&family=Reem+Kufi+Fun:wght@500&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Reem Kufi Fun", sans-serif; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #23242a; } .box { position: relative; width: 380px; height: 420px; background: #1c1c1c; border-radius: 8px; overflow: hidden; } .box::before { content: ""; position: absolute; top: -50%; left: -50%; width: 380px; height: 420px; background: linear-gradient(0deg, transparent, #9b1fe8, #9b1fe8); transform-origin: bottom right; animation: animate 6s linear infinite; } .box::after { content: ""; position: absolute; top: -50%; left: -50%; width: 380px; height: 420px; background: linear-gradient(0deg, transparent, #9b1fe8, #9b1fe8); transform-origin: bottom right; animation: animate 6s linear infinite; animation-delay: -3s; } @keyframes animate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .form { position: absolute; inset: 2px; border-radius: 8px; background: #28292d; z-index: 10; padding: 50px 40px; display: flex; flex-direction: column; } .form h2 { color: #9b1fe8; font-weight: 500; text-align: center; letter-spacing: 0.1em; } .inputBox { position: relative; width: 300px; margin-top: 35px; } .inputBox input { position: relative; width: 100%; padding: 20px 10px 10px; background: transparent; border: none; outline: none; color: #23242a; font-size: 1em; letter-spacing: 0.5em; z-index: 10; } .inputBox span { position: absolute; left: 0; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0