纯css实现模态弹出层弹出框效果
代码语言:html
所属分类:弹出层
代码描述:纯css实现模态弹出层弹出框效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <style> @import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800,900'); *, *::before, *::after { box-sizing: border-box; } body { font-family: 'Poppins', sans-serif; font-weight: 400; font-size: 15px; line-height: 1.7; color: #1f2029; background-color: #fff; overflow: hidden; background-position: center; background-repeat: no-repeat; background-size: 101%; } p { font-family: 'Poppins', sans-serif; font-weight: 400; font-size: 16px; line-height: 1.7; color: #1f2029; } .section { position: relative; width: 100%; display: block; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: center; justify-content: center; } .full-height { min-height: 100vh; } [type="checkbox"]:checked, [type="checkbox"]:not(:checked) { position: absolute; left: -9999px; } .modal-btn:checked + label, .modal-btn:not(:checked) + label { position: relative; font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 15px; line-height: 2; height: 50px; transition: all 200ms linear; border-radius: 4px; width: 240px; letter-spacing: 1px; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; align-items: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; justify-content: center; -ms-flex-pack: center; text-align: center; -ms-flex-item-align: center; align-self: center; border: none; cursor: pointer; background-color: #102770; color: #ffeba7; box-shadow: 0 12px 35px 0 rgba(16,39,112,.25); } .modal-btn:not(:checked) + label:hover { background-color: #ffeba7; color: #102770; } .modal-btn:checked + label .uil, .modal-btn:not(:checked) + label .uil { margin-left: 10px; font-size: 18px; } .modal-btn:checked + label:after, .modal-btn:not(:checked) + label:after { position: fixed; top: 30px; right: 30px; z-index: 110; width: 40px; border-radius: 3px; height: 30px; text-align: center; line-height: 30px; font-size: 18px; background-color: #ffeba7; color: #102770; font-family: 'FontAwesome'; content: '\f2d3'; box-shadow: 0 12px 25px 0 rgba(16,39,112,.25); transition: all 200ms linear; opacity: 0; pointer-events: none; transform: translateY(20px); } .modal-btn:checked + label:hover:after, .modal-btn:not(:checked) + label:hover:after { backgr.........完整代码请登录后点击上方下载按钮下载查看
网友评论0