html
非常简单，就不说了
<button onclick="carton()">点击提示</button> <div class="alert"> <span>删除成功</span> </div>
css
/*清除默认边距，更换盒子模型*/ * { margin: 0; padding: 0; box-sizing: border-box; } /*提示框的样式*/ .alert span { display: block; position: absolute; top: -40px; left: 50%; transform: translateX(-50%); width: 100px; height: 35px; background-color: #338EFFFF; line-height: 35px; text-align: center; font-size: 13.5px; color: #FFF; border-radius: 5px; letter-spacing: .2em; } /*小技巧，利用伪元素，border，以及透明属性实现小三角*/ .alert span::after { position: absolute; left: -5px; content: ""; border: 5px solid #338EFFFF; border-left-color: transparent; border-bottom-color: transparent; } /*定义提示动画，使用是通过js*/ @keyframes alert { 0% { opacity: 1; top: -40px; } 30% { top: 10px; } 90% { opacity: 1; } 100% { opacity: 0; top: 10px; } } /*按钮的样式，简单通用的居中样式*/ button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
js
function carton() { console.log(document.querySelector("button")); document.querySelector("span").style.animation = "3s alert forwards"; }
完整代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>TIPS</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } .alert span { display: block; position: absolute; top: -40px; left: 50%; transform: translateX(-50%); width: 100px; height: 35px; background-color: #338EFFFF; line-height: 35px; text-align: center; font-size: 13.5px; color: #FFF; border-radius: 5px; letter-spacing: .2em; } .alert span::after { position: absolute; left: -5px; content: ""; border: 5px solid #338EFFFF; border-left-color: transparent; border-bottom-color: transparent; } @keyframes alert { 0% { opacity: 1; top: -40px; } 30% { top: 10px; } 90% { opacity: 1; } 100% { opacity: 0; top: 10px; } } button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } </style> </head> <body> <button onclick="carton()">点击提示</button> <div class="alert"> <span>删除成功</span> </div> <script> function carton() { console.log(document.querySelector("button")); document.querySelector("span").style.animation = "3s alert forwards"; } </script> </body> </html>
