div+css实现背景动态变动的科技登录表单代码
代码语言:html
所属分类:表单美化
代码描述:div+css实现背景动态变动的科技登录表单代码
代码标签: div css 背景 动态 变动 科技 登录 表单 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" /> <style> body{ background: black; } .container { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; font-style: italic; font-weight: bold; display: flex; margin: auto; aspect-ratio: 16/9; align-items: center; justify-items: center; justify-content: center; flex-wrap: wrap; flex-direction: column; gap: 1em; } .input-container { filter: drop-shadow(46px 36px 24px #4090b5) drop-shadow(-55px -40px 25px #9e30a9); animation: blinkShadowsFilter 8s ease-in infinite; } .input-content { display: grid; align-content: center; justify-items: center; align-items: center; text-align: center; padding-inline: 1em; } .input-content::before { content: ""; position: absolute; width: 100%; height: 100%; filter: blur(40px); -webkit-clip-path: polygon(26% 0, 66% 0, 92% 0, 100% 8%, 100% 89%, 91% 100%, 7% 100%, 0 92%, 0 0); clip-path: polygon(26% 0, 66% 0, 92% 0, 100% 8%, 100% 89%, 91% 100%, 7% 100%, 0 92%, 0 0); background: rgba(122, 251, 255, 0.5568627451); transition: all 1s ease-in-out; } .input-content::after { content: ""; position: absolute; width: 98%; height: 98%; box-shadow: inset 0px 0px 20px 20px #212121; background: repeating-linear-gradient(to bottom, transparent 0%, rgba(64, 144, 181, 0.6) 1px, rgb(0, 0, 0) 3px, hsl(295, 60%, 12%) 5px, #153544 4px, transparent 0.5%), repeating-linear-gradient(to left, hsl(295, 60%, 12%) 100%, hsla(295, 60%, 12%, 0.99) 100%); -webkit-clip-path: polygon(26% 0, 31% 5%, 61% 5%, 66% 0, 92% 0, 100% 8%, 100% 89%, 91% 100%, 7% 100%, 0 92%, 0 0); clip-path: polygon(26% 0, 31% 5%, 61% 5%, 66% 0, 92% 0, 100% 8%, 100% 89%, 91% 100%, 7% 100%, 0 92%, 0 0); animation: backglitch 50ms linear infinite; } .input-dist { z-index: 80; display: grid; align-items: center; text-align: center; width: 100%; padding-inline: 1em; padding-block: 1.2em; grid-template-columns: 1fr; } .input-type { display: flex; flex-wrap: wrap; flex-direction: column; gap: 1em; font-size: 1.1rem; background-color: transparent; width: 100%; border: none; } .input-is { color: #fff; font-size: 0.9rem; background-color: transparent; width: 100%; box-sizing: border-box; padding-inline: 0.5em; padding-block: 0.7em; border: none; transition: all 1s ease-in-out; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0