css + js 超好看的消息提示
先看图
css 使用了layui，直接在官网下载引入即可
- 实现的功能
<style>.message {width: 300px;/* background-color: rgba(0, 0, 0, 0.2); */background-color: rgba(255, 255, 255, 0.7);animation: fadeIn 0.5s ease-out forwards;}@keyframes fadeIn {from {opacity: 0;transform: translateY(-10px);}to {opacity: 1;transform: translateY(0);}}.hide {animation: fadeOut 0.5s ease-out forwards;}@keyframes fadeOut {from {opacity: 1;transform: translateY(0);}to {opacity: 0;transform: translateY(-10px);}}</style>
```<body><div class="flex justify-center m"><button class="px-2 py text-white bg-info border-0 m" onclick="showMessage('基础', {type: 'info',place: 'lt',time: 1500})">基础</button><button class="px-2 py text-white bg-success border-0 m" onclick="showMessage('成功', {type: 'success',place: 'rt',time: 1500})">成功</button><button class="px-2 py text-white bg-error border-0 m" onclick="showMessage('失败', {type: 'danger',place: 'tc',time: 1500})">失败</button><button class="px-2 py text-white bg-warning border-0 m" onclick="showMessage('警告', {type: 'warning',place: 'c',time: 1500})">警告</button></div><script>// 显示消息function showMessage(message, info = {type,place,time}) {const type = info.type || 'info',fixed = info.place || 'c',time = info.time || 1500;const messageConfig = {success: {icon: "layui-icon-ok",color: "#4cae4c"},warning: {icon: "layui-icon-tips",color: "#f58025"},danger: {icon: "layui-icon-close",color: "#FF5733"},info: {icon: "layui-icon-star",color: "#007bff"}}const classList = {messageBox: ['message', 'relative', 'text-center', 'rounded-sm', 'py', 'px-1', 'm-1', 'opacity', 'shadow-sm'],iconBox: ['layui-icon', messageConfig[type].icon],fixed: {lt: {box: ['top-0', 'left-0', 'right-0'],messageBox: []},rt: {box: ['top-0', 'left-0', 'right-0'],messageBox: ['ml-auto']},lb: {box: ['bottom-0', 'left-0', 'right-0'],messageBox: []},rb: {box: ['bottom-0', 'left-0', 'right-0'],messageBox: ['ml-auto']},tc: {box: ['top-0', 'left-0', 'right-0'],messageBox: ['ml-auto', 'mr-auto']},c: {box: ['top-0', 'left-0', 'right-0', 'bottom-0', 'flex', 'justify-center', 'items-center'],messageBox: []}}}// 最外部盒子const box = document.createElement('div');box.id = 'message_box_mask';// 创建外部domconst messageBox = document.createElement('div');// 然后创建图标domconst iconBox = document.createElement('i');// 创建消息提示domconst textBox = document.createElement('span');box.classList.add('fixed');// 给这个div添加基础样式classList.messageBox.forEach(e=>{messageBox.classList.add(e);})// 为外部div添加消息提示类型的样式messageBox.style.color = messageConfig[type].color;// 添加图标classclassList.iconBox.forEach(e=>{iconBox.classList.add(e);})// 文本距离图标间距textBox.classList.add('ml')// 插入文本textBox.textContent = message;// textBox.innerHTML = message;// 消息提示定位if( classList.fixed[fixed]?.box.length > 0 ) {classList.fixed[fixed].box.forEach(e=>{box.classList.add(e);})}// 判断是否存在消息box样式if( classList.fixed[fixed]?.messageBox.length > 0 ) {classList.fixed[fixed].messageBox.forEach(e=>{messageBox.classList.add(e);})}messageBox.appendChild(iconBox);messageBox.appendChild(textBox);box.appendChild(messageBox);document.body.appendChild(box);setTimeout(() => {hideMessage(box);}, time);}// 关闭消息function hideMessage(dom = null) {const box = dom || document.getElementById('message_box_mask');box.lastChild.classList.add('hide');setTimeout(() => {box.remove();}, 500);}</script></body>
