2024年前端网页的提示气泡特效实现【简单】，干货整理

文末

逆水行舟不进则退，所以大家要有危机意识。

同样是干到35岁，普通人写业务代码划水，榜样们深度学习拓宽视野晋升管理。

这也是为什么大家都说35岁是程序员的门槛，很多人迈不过去，其实各行各业都是这样都会有个坎，公司永远都缺的高级人才，只用这样才能在大风大浪过后，依然闪耀不被公司淘汰不被社会淘汰。

为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师核心知识笔记》电子稿文件。

内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。

269页《前端大厂面试宝典》

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端面试题汇总

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”;

}

完整代码