css+div实现渐变消息弹出提示层效果代码
代码语言:html
所属分类:弹出层
代码描述:css+div实现渐变消息弹出提示层效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap'); :root { --tr: all 0.5s ease 0s; --ch1: #2a4276; --ch2: #4591c4; --cs1: #388b3c; --cs2: #CDDC39; --cw1: #ff8f00; --cw2: #FFC107; --ce1: #931d31; --ce2: #ff5e42; } body { margin: 0; padding: 0; width: 100vw; height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: flex-end; flex-direction: column; background: radial-gradient(circle at 50% 100%, #1d1e23, #15141a); font-family: "Varela Round", sans-serif; } .toast-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; transition: var(--tr); position: absolute; padding: 0 1rem; height: 100%; } .toast-item { overflow: hidden; max-height: 25rem; transition: var(--tr); position: relative; animation: show-toast 4s ease 3s 1; } @keyframes show-toast { 0%, 50%, 100% { max-height: 0; opacity: 0; } 10%, 25% { max-height: 15rem; opacity: 1; } } .toast { color: #f5f5f5; padding: 1rem 2rem 1rem 4rem; border-radius: 1rem; position: relative; font-weight: 300; margin: 1rem 0; text-align: left; max-wid.........完整代码请登录后点击上方下载按钮下载查看
网友评论0