div+css实现简单黑白登录注册翻转切换表单页面代码
代码语言:html
所属分类:表单美化
代码描述:div+css实现简单黑白登录注册翻转切换表单页面代码
代码标签: div css 简单 黑白 登录 注册 翻转 切换 表单 页面 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <style> body{ background: black; } .wrapper { margin: 300px auto; width:30px; --input-focus: #2d8cf0; --font-color: #fefefe; --font-color-sub: #7e7e7e; --bg-color: #111; --bg-color-alt: #7e7e7e; --main-color: #fefefe; } /* switch card */ .switch { transform: translateY(-200px); position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 30px; width: 50px; height: 20px; } .card-side::before { position: absolute; content: 'Log in'; left: -70px; top: 0; width: 100px; text-decoration: underline; color: var(--font-color); font-weight: 600; } .card-side::after { position: absolute; content: 'Sign up'; left: 70px; top: 0; width: 100px; text-decoration: none; color: var(--font-color); font-weight: 600; } .toggle { opacity: 0; width: 0; height: 0; } .slider { box-sizing: border-box; border-radius: 5px; border: 2px solid var(--main-color); box-shadow: 4px 4px var(--main-color); position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--bg-color); transition: 0.3s; } .slider:before { box-sizing: border-box; position: absolute; content: ""; height: 20px; width: 20px; border: 2px solid var(--main-color); border-radius: 5px; left: -2px; bottom: 2px; background-color: var(--bg-color); box-shadow: 0 3px 0 var(--main-color); transition: 0.3s; } .toggle:checked + .slider { background-color: var(--input-focus); } .toggle:checked + .slider:before { transform: translateX(30px); } .toggle:checked ~ .card-side:before { text-decoration: none; } .toggle:checked ~ .card-side:after { text-decoration: underline; } /* card */ .flip-card__inner { width: 300px; height: 350px; position: relative; background-color: transparent; perspective: 1000px; /* width: 100%; height: 100%; */ text-align: center; transition: transform 0.8s; transform-style: preserve-3d; } .toggle:checked ~ .flip-card__inner { transform: rotateY(180deg); } .toggle:checked ~ .flip-card__front { box-shadow: none; } .flip-card__front, .flip-card__back { padding: 20px; position: absolute; display: flex; flex-direction: column; justify-content: center; -webkit-backface-visibility: hidden; backface-visibility: hidden; background: var(--bg-color); gap: 20px; border-radius: 5px; border: 2px solid var(--main-color); box-shadow: 4px 4px var(--main-color); .........完整代码请登录后点击上方下载按钮下载查看
网友评论0