jquery+css点击按钮炫酷云雾动画弹出层效果代码
代码语言:html
所属分类:弹出层
代码描述:jquery+css点击按钮炫酷云雾动画弹出层效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css"> <style> /* -------------------------------- Primary style -------------------------------- */ *, *::after, *::before { box-sizing: border-box; } html { font-size: 62.5%; } body { font-size: 1.6rem; font-family: "PT Sans", sans-serif; color: #242322; background-color: #ffffff; } a { color: #a5c4bc; text-decoration: none; } /* -------------------------------- Patterns - reusable parts of our design -------------------------------- */ .cd-btn { display: inline-block; padding: 1.6em 2.4em; font-size: 1.4rem; letter-spacing: .15em; color: #ffffff; font-weight: 700; text-transform: uppercase; background-color: #a5c4bc; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-transition: box-shadow 0.3s; -moz-transition: box-shadow 0.3s; transition: box-shadow 0.3s; } .no-touch .cd-btn:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); } /* -------------------------------- Typography -------------------------------- */ h1 { font-size: 2.6rem; line-height: 1; margin-bottom: 1em; font-family: "IM Fell Double Pica", serif; font-style: italic; } @media only screen and (min-width: 768px) { h1 { font-size: 5rem; } } /* -------------------------------- Main Content -------------------------------- */ .cd-main-content { position: relative; z-index: 1; width: 100%; height: 100vh; /* vertically align its content */ display: table; background-color: #e4dcca; } .cd-main-content .center { /* vertically align inside parent element */ display: table-cell; vertical-align: middle; text-align: center; } /* -------------------------------- Modal window -------------------------------- */ .cd-modal { position: fixed; top: 0; left: 0; z-index: 3; height: 100%; width: 100%; overflow: hidden; background: #402f44 url(//repo.bfw.wiki/bfwrepo/svg/loading/modal-bg.jpg) no-repeat center center; background-size: cover; opacity: 0; visibility: hidden; -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s; -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s; transition: opacity 0.3s 0s, visibility 0s 0.3s; } .cd-modal .modal-content { height: 100%; overflow-y: auto; padding: 3em 5%; color: #e4dcca; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .cd-modal h1 { text-align: center; } .cd-modal h1::after { /* ink/brush separation */ content: ''; display: block; width: 130px; height: 18px; background: url(//repo.bfw.wiki/bfwrepo/svg/loading/ink-separation.svg) no-repeat center center; margin: .2em auto 0; } .cd-modal p { line-height: 1.6; margin: 2em auto; max-width: 800px; } .cd-modal .modal-close { /* 'X' icon */ position: absolute; z-index: 1; top: 20px; right: 5%; height: 45px; width: 45px; border-radius: 50%; background: rgba(0, 0, 0, 0.3) url(//repo.bfw.wiki/bfwrepo/svg/loading/cd-icon-close.svg) no-repeat center center; /* image replacement */ overflow: hidden; text-indent: 100%; white-space: nowrap; visibility: hidden; opacity: 0; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); -webkit-transition: -webkit-transform 0.3s 0s, visibility 0s 0.3s, opacity 0.3s 0s; -moz-transition: -moz-transform 0.3s 0s, visibility 0s 0.3s, opacity 0.3s 0s; transition: transform 0.3s 0s, visibility 0s 0.3s, opacity 0.3s 0s; } .no-touch .cd-modal .modal-close:hover { background-color: rgba(0, 0, 0, 0.5); } .cd-modal.visible { opacity: 1; visibility: visible; -webkit-transition: opacity 0.7s, visibility 0s; -moz-transition: opacity 0.7s, visibility 0s; transition: opacity 0.7s, visibility 0s; } .cd-modal.visible .modal-content { /* this fixes the buggy scrolling on webkit browsers - mobile devices only - when overflow property is applied */ -webkit-overflow-scrolling: touch; } .cd-modal.visible .modal-close { visibility: visible; opacity: 1; -webkit-transition: -webkit-transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s; -moz-transition: -moz-transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s; transition: transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } @media only screen and (min-width: 1100px) { .cd-modal .modal-content { padding: 6em 5%; } .cd-modal .modal-close { height: 60px; width: 60px; } .cd-modal p { font-size: 2rem; } } /* -------------------------------- Transition Layer -------------------------------- */ .cd-transition-layer { position: fixed; top: 0; left: 0; z-index: 2; height: 100%; width: 100%; opacity: 0; visibility: hidden; overflow: hidden; } .cd-transition-layer .bg-layer { position: absolute; left: 50%; top: 50%; -webkit-transform: translateY(-50%) translateX(-2%); -moz-transform: translateY(-50%) translateX(-2%); -ms-transform: translateY(-50%) translateX(-2%); -o-transform: translateY(-50%) translateX(-2%); transform: translateY(-50%) translateX(-2%); /* its dimentions will be overwritten using jQuery to proportionally fit the viewport */ height: 100%; /* our sprite is composed of 25 frames */ width: 2500%; background: url(//repo.bfw.wiki/bfwrepo/svg/loading/ink.png) no-repeat 0 0; background-size: 100% 100%; } .cd-transition-layer.visible { opacity: 1; visibility: visible; } .cd-transition-layer.opening .bg-layer { -webkit-animation: cd-sequence 0.8s steps(24); -moz-animation: cd-sequence 0.8s steps(24); animation: cd-sequence 0.8s steps(24); -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; animation-fill-mode: forwards; } .cd-transition-layer.closing .bg-layer { -webkit-animation: cd-sequence-reverse 0.8s steps(24); -moz-animation: cd-sequence-reverse 0.8s steps(24); animation: cd-sequence-reverse 0.8s steps(24); -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; animation-fill-mode: forwards; } .no-cssanimations .cd-transition-layer { display: none; } @-webkit-keyframes cd-sequence { 0% { /* translateX(-2%) is used to horizontally center the first frame inside the viewport */ -webkit-transform: translateY(-50%) translateX(-2%); } 100% { /* translateX(-98%) (2% + 96) is used to horizontally center the last frame inside the viewport */ -webkit-transform: translateY(-50%) translateX(-98%); } } @-moz-keyframes cd-sequence { 0% { /* translateX(-2%) is used to horizontally center the first frame inside the viewport */ -moz-transform: translateY(-50%) translateX(-2%); } 100% { /* translateX(-.........完整代码请登录后点击上方下载按钮下载查看
网友评论0