Neumorphism新拟态设计登录表单效果代码
代码语言:html
所属分类:表单美化
代码描述:Neumorphism新拟态设计登录表单效果代码
代码标签: Neumorphism 新拟态 设计 登录 表单
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { padding: 0; margin: 0; box-sizing: border-box; } body { font-family: sans-serif; background: #b19cd9; display: flex; align-items: center; justify-content: center; min-height: 100vh; } .form { height: 350px; width: 250px; border-radius: 10px; background: #b19cd9; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: -10px -10px 25px 0 rgba(205, 177, 255, 0.5), 10px 10px 25px 0 rgba(0, 0, 0, 0.1); transition: 0.4s; } .form:hover { transform: scale(1.1); } .form input { margin: 12px 20px; } .input { padding: 13px 15px; border: none; outline: none; background: #b19cd9; border-radius: 15px; width: 160px; color: white; box-shadow: inset -6px -6px 25px 0 rgba(205, 177, 255, 0.5), inset 6px 6px 25px 0 rgba(0, 0, 0, 0.1); transition: 0.4s; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0