react实现一个右上角消息提示弹出层效果代码
代码语言:html
所属分类:弹出层
代码描述:react实现一个右上角消息提示弹出层效果代码,包含成功、错误、消息、警告4种类型。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { height: 100vh; margin: 0; display: grid; place-items: center; } .root { position: relative; } .toast-container { position: absolute; top: 0; right: 10px; } @-webkit-keyframes moveDown { from { transform: translateY(-20px); } to { transform: translateY(20px); } } @keyframes moveDown { from { transform: translateY(-20px); } to { transform: translateY(20px); } } .toast { width: 300px; padding: 16px; border-radius: 8px; margin-bottom: 16px; color: white; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; -webkit-animation: moveDown 0.5s ease; animation: moveDown 0.5s ease; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .toast.success { background-color: #4CAF50; } .toast.error { background-color: #F44336; } .toast.info { background-color: #2196F3; } .toast.warning { background-color: #FF9800; } .close { background: none; border: none; color: white; font-size: 20px; cursor: pointer; } .button { padding: 10px 20px; font-size: 16px; border-radius: 8px; border: none; cursor: pointer; transition: background-color 0.3s ease; outline: none; display: inline-block; margin: 5px; } .button-success { background-color: #4CAF50; color: white; } .button-success:hover { background-color: #43a047; } .button-error { background-color: #F44336; color: white; } .button-error:hover { background-color: #d32f2f; } .button-info { background-color: #2196F3; color: white; } .button-info:hover { background-color: #1976d2; } .button-warning { background-color: #FF9800; color: white; } .button-warning:hover { background-color: #f57c00; } </style> </head> <body translate="no"> <div id="root"></div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/babel.7.18.13.js"></script> &l.........完整代码请登录后点击上方下载按钮下载查看
网友评论0