2024年纯css写的各种小按钮合集，记录下来成为学习笔记，前端面试真题解析火爆全网

TCP协议

• TCP 和 UDP 的区别？
• TCP 三次握手的过程？
• 为什么是三次而不是两次、四次？
• 三次握手过程中可以携带数据么？
• 说说 TCP 四次挥手的过程
• 为什么是四次挥手而不是三次？
• 半连接队列和 SYN Flood 攻击的关系
• 如何应对 SYN Flood 攻击？
• 介绍一下 TCP 报文头部的字段
• TCP 快速打开的原理(TFO)
• 说说TCP报文中时间戳的作用？
• TCP 的超时重传时间是如何计算的？
• TCP 的流量控制
• TCP 的拥塞控制
• 说说 Nagle 算法和延迟确认？
• 如何理解 TCP 的 keep-alive？

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

浏览器篇

• 浏览器缓存?
• 说一说浏览器的本地存储？各自优劣如何？
• 说一说从输入URL到页面呈现发生了什么？
• 谈谈你对重绘和回流的理解
• XSS攻击
• CSRF攻击
• HTTPS为什么让数据传输更安全？
• 实现事件的防抖和节流？
• 实现图片懒加载？

#neon-btn {

display: flex;

align-items: center;

justify-content: space-around;

height: 100vh;

background: #031628;

}

.btn {

border: 1px solid;

background-color: transparent;

text-transform: uppercase;

font-size: 14px;

padding: 10px 20px;

font-weight: 300;

}

.one {

color: #4cc9f0;

}

.two {

color: #f038ff;

}

.three {

color: #b9e769;

}

.btn:hover {

color: white;

border: 0;

}

.one:hover {

background-color: #4cc9f0;

-webkit-box-shadow: 10px 10px 99px 6px rgba(76,201,240,1);

-moz-box-shadow: 10px 10px 99px 6px rgba(76,201,240,1);

box-shadow: 10px 10px 99px 6px rgba(76,201,240,1);

}

.two:hover {

background-color: #f038ff;

-webkit-box-shadow: 10px 10px 99px 6px rgba(240, 56, 255, 1);

-moz-box-shadow: 10px 10px 99px 6px rgba(240, 56, 255, 1);

box-shadow: 10px 10px 99px 6px rgba(240, 56, 255, 1);

}

.three:hover {

background-color: #b9e769;

-webkit-box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1);

-moz-box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1);

box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1);

}

• 简单来分析一下，外层一个div框住三个按钮进行展示，通过flex布局让其并排，再调整justify-content属性来达到居中展示。分配好之后，分别上色。之后就是最重要的CSS :hover 选择器，以第一个为例，找到那个按钮hover即当鼠标滑过时产生的样式。首先背景颜色改变成按钮颜色，字体变白色，边框0直接让其有充满整个按钮的感觉。之后就是设置其阴影，为了兼容不同浏览器的引擎，所以有不同的属性，但是不管哪个属性，都一样的属性值。属性值按照自己喜好调节，展现的效果就会是亮的程度以及范围。具体哪个值调整会有什么效果，直接看文档。

填充式的按钮

=====================================================================

html

Hover

css

#loading-btn {

display: flex;

align-items: center;

justify-content: center;

height: 100vh;

}

button {

background: transparent;

border: 0;

border-radius: 0;

text-transform: uppercase;

font-weight: bold;

font-size: 20px;

padding: 15px 50px;

position: relative;

}

button:before {

transition: all 0.8s cubic-bezier(0.7, -0.5, 0.2, 2);

content: ‘’;

width: 1%;

height: 100%;

background: mistyrose;

position: absolute;

top: 0;

left: 0;

}

button span {

mix-blend-mode: darken;

}

button:hover:before {

background: mistyrose;

width: 100%;

}

一看就能懂啦，主要说一下

↑没用这个属性。那么通过z-index来调整只能够要么背景盖住图片，要么图片在背景之前。亦或是改变透明度这样并不好。所以使用mix-blend-mode属性。

闪烁一下按钮

=====================================================================

html

Hover me

css

#shiny-shadow {

display: flex;

align-items: center;

justify-content: center;

height: 100vh;

background: #1c2541;

}

button {

border: 2px solid white;

background: transparent;

text-transform: uppercase;

color: white;

padding: 15px 50px;

outline: none;

overflow: hidden;

position: relative;

}

span {

z-index: 20;

}

button:after {

content: ‘’;

display: block;

position: absolute;

top: -36px;

left: -100px;

background: white;

width: 50px;

height: 125px;

opacity: 20%;

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

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

width: 50px;

height: 125px;

opacity: 20%;

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

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

[外链图片转存中…(img-60zCFaB0-1715086067056)]