登录表单三维加载处理效果代码
代码语言:html
所属分类:表单美化
代码描述:登录表单三维加载处理效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css"> <style> @import url(https://fonts.googleapis.com/css?family=Raleway:100,300); @keyframes top { to { top: -20px; } } @keyframes sup-top { to { top: -40px; } } * { box-sizing: border-box; } html { height: 100%; } body { height: 100%; background-image: linear-gradient(#7a9da9, #fff5ee); font-family: "Raleway", sans-serif; color: white; } .s-wrap { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 300px; height: 500px; perspective: 1000px; margin: auto; } [data-status="open-"] .w { transform: rotateZ(0deg) rotateX(0deg) rotateY(0deg); } [data-status="open-"] .w:nth-child(1) { top: 0; transform: translateX(-250px); background-image: linear-gradient(rgba(255, 255, 255, 0.4) 90%, rgba(255, 255, 255, 0.1)); animation-play-state: paused; } [data-status="open-"] .w:nth-child(2) { top: 0; transform: translateX(250px); animation-play-state: paused; box-shadow: 1px 1px 1px #fff; } [data-status="close"] .logo { opacity: 0; } [data-status="close"] .w__loading { transition: opacity 2s ease-in; opacity: 1; } .w { position: absolute; width: 245px; height: 523px; transition: transform .65s; float: left; transform: rotateZ(-45deg) rotateX(20deg) rotateY(30deg); transform-style: preserve-3d; transform-origin: left; } .w.-bottom { z-index: 1; box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.8); } .w.-top { top: 0; left: 0px; background: rgba(255, 255, 255, 0.1); z-index: 10; box-shadow: -1px 1px 1px #fff; text-align: center; animation: top .8s linear .45s forwards; } .w.-sup-top { top: 0px; left: 0px; background-image: linear-gradient(-250deg, rgba(255, 255, 255, 0.4) 40%, rgba(255, 255, 255, 0.4) 41%, rgba(255, 255, 255, 0.2) 42%, rgba(255, 255, 255, 0.1)); z-index: 100; box-shadow: -1px 1px 1px #fff; animation: sup-top .8s linear .4s forwards; } .w__loading { opacity: 0; font-size: 3em; } .widget { width: 100%; height: 100%; padding: 60px 10px 0px; background-image: linear-gradient(#0f3465, #2d82bc); } .widget > .logo { margin-bottom: 30px; font-size: 2em; text-align: center; } .w__fi.........完整代码请登录后点击上方下载按钮下载查看
网友评论0