模仿苹果ios白天和夜晚通知窗口层叠效果
代码语言:html
所属分类:布局界面
代码描述:模仿苹果ios白天和夜晚通知窗口层叠效果
代码标签: 白天和 ( 白 天和 ) 夜晚 通知 窗口 层叠 效果
下面为部分代码预览,完整代码请点击下载或在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/reset.min.css"> <style> *, *:before, *:after { box-sizing: border-box; } ::-moz-selection { background: none; } ::selection { background: none; } body, html { height: 100vh; } body { display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; background: #151F33; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } @media screen and (min-height: 480px) { body { -webkit-box-align: center; align-items: center; align-content: center; } } .before, .after { will-change: opacity; display: block; position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; } .before { z-index: -1; background: #151F33 url("http://repo.bfw.wiki/bfwrepo/image/5f19517db5310.png") no-repeat center center/cover; } .after { z-index: -2; background: #B27247 url("http://repo.bfw.wiki/bfwrepo/image/5f195196d54dc.png") no-repeat center center/cover; } main { opacity: 0; will-change: opacity; width: 100%; max-width: 400px; padding: 8px; } main .before, main .after { position: fixed; } ul { opacity: 0; will-change: opacity, transform; -webkit-perspective: 800px; perspective: 800px; margin-bottom: 16px; } ul li { position: relative; padding: 8px; } ul li:not(:first-child) { position: absolute; width: 100%; top: 0; left: 0; } ul li:not(:first-child) .notification .before, ul li:not(:first-child) .notification .after { -webkit-filter: blur(16px); filter: blur(16px); } ul li:nth-child(1) { z-index: 3; } ul li:nth-child(1) .notification { background-color: rgba(255, 255, 255, 0.7); } ul li:nth-child(1) .notification .before, ul li:nth-child(1) .notification .after { -webkit-filter: saturate(130%) blur(16px); filter: saturate(130%) blur(16px); } ul li:nth-child(2) { -webkit-transform: translateY(16px) translateZ(-64px); transform: translateY(16px) translateZ(-64px); z-index: 2; } ul li:nth-child(2) .notification { background-color: rgba(255, 255, 255, 0.6); } ul li:nth-child(3) { -webkit-transform: translateY(32px) translateZ(-128px); transform: translateY(32px) translateZ(-128px); z-index: 1; } ul li:nth-child(3) .notification { background-color: rgba(255, 255, 255, 0.5); } .container { -webkit-clip-path: inset(0 0 0 0 round 16px 16px 16px 16px); clip-path: inset(0 0 0 0 round 16px 16px 16px 16px); } .notification { position: relative; overflow: hidden; height: 116px; padding: 16px; border-radius: 16px; background-color: rgba(255, 255, 255, 0.9); color: black; } .notification header, .notification .more { opacity: 0.75; } .notification header { display: -webkit-box; display: flex; -webkit-box-pack: justify; justify-content: space-between; padding-bottom: 8px; font-size: 12px; } .notification header h2 { text-transform: uppercase; } .notification header .timestamp { text-transform: lowercase; } .notification .content span { display: block; line-height: 1.4; } .notification .content .message { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .notification .content .sender, .notification .content .event { font-weight: 600; } .notification .content .more { margin-top: 4px; font-size: 12px; } .notification .before, .notification .after { left: calc(50% - 50vw); } </style> </head> <body translate="no"> <main id='main'> <div class='before'></div> <div class='after'></div> <ul id='one'> <li class='one'> <div class='container'> <div class='notification'> <span class='before'></span> <span class='after'></span> <header> <h2>Messages</h2> <span class='timestamp'>Now</span> </header> <div class='content'> <span class='sender'>Gabrielle Wee</span> <span class='message'>Check it out! ✨</span> <span class='more'>2 more messages from Gabrielle</span> </div> </div> </div> </li> <li class='two'> <div class='container'> <div class='notification'> <span class='before'></span> <span class='after'></span> </div> </div> <.........完整代码请登录后点击上方下载按钮下载查看
网友评论0