整体疗效
：悬停获取键盘状态css3 按钮 效果，当鼠标悬停在上方时，改变背景样式，实现键盘交互。
这种效果适用于文本按钮，也可以用来标记文本链接的位置，使鼠标和文本产生有趣的交互效果。
核心代码部分简要解释了编写思路;最后，可以直接复制完整的代码以在本地运行。
核心代码：HTML代码
<div class="btn29">
<span class="btn29-bg"></span>
<span class="btn29-span-text">查看详情</span>
</div>两个跨度构建按钮主体。
代码的 CSS 部分
.btn29{
width: 100px;
height: 42px;
line-height: 42px;
position: relative;
cursor: pointer;
}
.btn29-bg{
width: 30px;
height: 30px;
display: block;
border-radius: 15px;
position: absolute;
left: 0;
bottom: 0;
background-color: #97E138;
transition: 0.24s;
}
.btn29-span-text{
width: 100%;
text-align: center;
display: block;
font-size: 16px;
font-weight: 700;
color: #056C00;
position: absolute;
}
.btn29:hover .btn29-bg{
width: 100%;
height: 42px;
border-radius: 21px;
}鼠标浮动时，更改方形跨度的参数css3 按钮 效果，并添加过渡效果，以实现正方形变成圆形背景的交互效果。
完整的代码如下： html page
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>圆点交互按钮</title>
</head>
<body>
<div class="app">
<div class="btn29">
<span class="btn29-bg"></span>
<span class="btn29-span-text">查看详情</span>
</div>
</div>
</body>
</html>CSS 样式
/** style.css **/
.app{
width: 100%;
height: 100vh;
background-color: #ffffff;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.btn29{
width: 100px;
height: 42px;
line-height: 42px;
position: relative;
cursor: pointer;
}
.btn29-bg{
width: 30px;
height: 30px;
display: block;
border-radius: 15px;
position: absolute;
left: 0;
bottom: 0;
background-color: #97E138;
transition: 0.24s;
}
.btn29-span-text{
width: 100%;
text-align: center;
display: block;
font-size: 16px;
font-weight: 700;
color: #056C00;
position: absolute;
}
.btn29:hover .btn29-bg{
width: 100%;
height: 42px;
border-radius: 21px;
}页面呈现效率
大多数初始开发都使用了jQuery，这给我们带来了很多便利：元素的快速选择，易于操作DOM元素的API，浏览器之间的完美兼容性，链式操作，动画，ajax等对于后端开发人员的jQuery都很有用。为什么现在越来越少使用？让我提出以下几点来说明我的观点：
JS更新的影响
1. 快速选择 DOM 节点
对于大多数使用 jQuery 的开发工程师来说，能够快速选择 DOM 节点无疑是一个重要原因，但就目前的情况来看，这种优势早已不复存在，为什么呢？
告诉你两个API，它们长期以来一直被许多人使用，document.querySelector和document.querySelectorAll技术。
这两个方法可以通过传入 CSS 选择器字符串来匹配预期的 DOM 节点。以下是两个 API 的当前兼容性：
查询选择器兼容性
查询选择器所有兼容图形
从图中可以看出，这两个 API 已经很好地兼容了各种浏览器。
Vue 也使用这个 API 来获取元素：
所以jQuery快速选择DOM节点的优势已经不复存在。
2. 用于轻松操作 DOM 元素的 API
可以轻松操作 DOM 元素的 API，例如 addClass、removeClass 和 toggleClass。现在也支持原生JS，这个API叫做classList。
虽然IE并不完全兼容，但也实现了最基本的实现。
3. 动漫
现在CSS3的动画技术早已非常成熟，已经完全取代jQuery做动画，而且可以实现比jQuery的Animate方式更复杂的动漫，兼容性好，性能消耗小，何乐而不为呢？
作为反例，例如，如果背景颜色过多，CSS3 可以完美实现，但 jQuery 不会。
而现在已经有很多优秀的CSS3动漫库，著名的Animate.css库，你一定听说过。
当前CSS3动漫兼容性
4. 阿贾克斯操作
jQuery 的 ajax 操作为我们省去了与浏览器兼容的问题，还提供了简洁的 API 来调用 get 和 post，将开发人员从复杂的兼容性中解放出来，使用原生 API。但是今天，这种优势已经很小了。
无论是原生JS的Fetch API还是Axios。两者都为我们提供了强大使用 Ajax 的能力，而 Axios 还具有拦截器的优势。这个时候，jQuery的Axios确实很难比拟。
当然，Fetch 在 IE 中绝对无法使用
抓取兼容性
但是已经有一个用于Fetch的Polyfill解决方案：github/fetch
这只需要引用这个小JS来使用方便的Ajax。与jQuery相比，这要微妙得多。
性能问题
在最初的开发中，工程师并没有在性能问题上挣扎太多。但现在不一样了，为了提高用户存在感，首先要解决浏览器草图带来的性能问题。最经典的概念是重绘和重排。重绘
：这是页面的重绘，例如，更改元素的背景颜色。回排
：一般来说，当浏览器进入页面时，它已经进行了重排，而回流似乎是指页面的重新布局。
由于我们想要提高性能，
我们可以从这两个概念开始，以最低的成本更新页面是提高性能的最佳方法。不幸的是，jQuery没有这样做。为什么这么说，请看下面的解剖结构：
当我们收到一组新闻数据时
渲染到 ul 标签中，通常我们会先将新闻数据逐项连接起来，然后使用 $ 符号选择 ul 元素，并将 ul 的 innerHTML 的值更改为串联字符串（使用 html API），此时第一次渲染就完成了。这次页面已经重绘（这是不可避免的），首先不剖析第一个好或坏的表现，用下一个描述会更强大。
例如，我们此时有一个额外的更改按钮。在传统的开发模式下，此时密钥的更改必须执行里面的代码，获取元素，修改元素的innerHTML，但现在问题来了css3少用，那就是我们是否需要再次删除所有元素并重新添加它们？答案肯定是否定的（如下图所示，创建一个元素的成本有多高）。
li 节点上的所有属性
因为我们只需要更改每个 li 中的文本和 a 标签中的链接，那么恐怕没有必要像以前那样再次添加 li。
由于 DOM 元素可能包含数百个属性，因此这是一个很大的性能开销。
那么新概念Virtual DOM（Virtual DOM）就可以解决这个问题。实际上，虚拟 DOM 是对真实 DOM 节点的描述，而真正的 DOM 是通过更改虚拟 DOM 以最小的更改来更改的（虚拟 DOM 不一定比 jQuery 好）。
所以，网上说真正的 DOM 很慢，但测试结果比 React 快，为什么呢？
现代框架对jQuery的影响
现在国外比较流行的 React、Vue、Angular 框架都属于 MV* 框架的范畴，它们的设计特点主要是基于数据的。
可以说，DOM 的操作留给了框架。这比传统的jQuery开发更高效，代码可维护性高，扩展性强，性能好。
打个比方：
我让jQuery买了一瓶鸡精，给了他100元，这时我们要告诉他怎么去店里，怎么告诉老板买什么鸡精，买多少鱼露，找多少零钱，怎么回去（命令）。这时我让Vue买鸡精，
这时候我只需要给他钱，告诉他要去哪里，买哪种鸡精，我不需要手教他（功能）。
这就是传统开发与现代框架开发之间的区别。
通过现代框架开发，你可以使用 Webpack（当然也可以使用 jQuery 或 Webpack），也可以使用其他人提供的现成脚手架，比如 create-react-app、vue-cli。
它大大提高了开发效率css3少用，可以使用最新的 ES6 和 ES7 句型进行开发，在编码体验上提升了一个层次。
现在jQuery已经完美地退出了历史，它已经完成了它想要完成的目标。
作者简介：韩越，文学前端工程师，喜欢技术，喜欢分享，喜欢写文章。
[完]。
微信已经改版，
想快速看CSDN的热门文章
赶紧把CSDN公众号设置为星号
打开公众号，点击“设为星星”！
发表评论