css实现一个模态弹出框弹出层效果代码
代码语言:html
所属分类:弹出层
代码描述:css实现一个模态弹出框弹出层效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> *, *::after, *::before { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 62.5%; } body { --light: hsl(0, 0%, 100%); --background: linear-gradient(to right bottom, hsl(236, 50%, 50%), hsl(195, 50%, 50%)); display: flex; flex-direction: column; justify-content: center; align-items: center; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Open Sans', sans-serif; min-height: 100vh; background: linear-gradient(to bottom, hsl(236, 50%, 98%), hsl(236, 50%, 94%)); } a, a:link { font-family: inherit; text-decoration: none; } .modal-container { position: fixed; top: 0; left: 0; z-index: 10; display: none; justify-content: center; align-items: center; width: 100%; height: 100%; background: hsla(0, 0%, 40%, .6); } /* using :target */ .modal-container:target { display: flex; } .modal { width: 60rem; padding: 4rem 2rem; border-radius: .8rem; color: var(--light); background: var(--background); box-shadow: .4rem .4rem 2.4rem .2rem hsla(236, 50%, 50%, 0.3); position: relative; overflow: hidden; } .modal__details { text-align: center; margin-bottom: 4rem; padding-bottom: 4rem; border-bottom: 1px solid hsla(0, 0%, 100%, .4); } .modal__title { font-size: 3.2rem; } .modal__description { margin-top: 2rem; font-size: 1.6rem; font-style: italic; } .modal__text { padding: 0 4rem; margin-bottom: 4rem; font-size: 1.6rem; line-height: 2; } .modal__text::before { content: ''; position: absolute; top: 0%; left: 100%; transform: translate(-50%, -50%); width: 18rem; height: 18rem; border: 1px solid hsla(0, 0%, 100%, .2); border-radius: 100rem; pointer-events: none; } .modal__btn { padding: 1rem 1.6rem; border: 1px solid hsla(0, 0%, 100%, .4); border-radius: 100rem; color: inherit; background: transparent; font-size: 1.4rem; font-family: inherit; letter-spacing: .2rem; transition: .2s; cursor: pointer; } .modal__btn:hover, .modal__btn:focus { border-color: hsla(0, 0%, 100%, .6); transform: translateY(-.2rem); } /* links */ /* =============================================== */ .link-1 .........完整代码请登录后点击上方下载按钮下载查看
网友评论0