CSS 效果：实现动态展示双箭头
最近写了一段 CSS 样式，虽然不难，但实现过程比较繁琐。这个效果结合了两个箭头，一个突出，一个内缩，非常适合用于步骤导航或选项卡切换等场景。样式不仅仅是静态的，还可以通过点击 click 或者 hover 事件，让它产生动态效果，提升用户体验。大家可以根据自己的需求做进一步完善和改变，比如调整箭头颜色、大小或者点击切换添加不同的动画效果等。
感兴趣的小伙伴可以试试看！
实现的效果如下：
代码如下：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.container {display: flex;width: 100%;height: 40px;flex-wrap: nowrap;padding: 0 8px 8px;background-color: #fff;border-radius: 2px;font-size: 14px;}.common {position: relative;width: 181px;height: 32px;flex: 1;line-height: 32px;text-align: center;box-sizing: border-box;}.selected {background-color: #ff7f95;color: #fff;margin-right: 4px;font-weight: 500;}.selected::before {position: absolute;z-index: 1;top: 50%;right: -4px;border-top: 18px solid transparent;border-right: 5px solid #ff7f95;margin-top: 0;content: '';transform: rotate(-180deg);}.selected::after {position: absolute;z-index: 1;top: 50%;right: -4px;border-top: 18px solid transparent;border-left: 5px solid #ff7f95;margin-top: -17px;content: '';}.noSelected {background-color: #dbdbdb;color: #5a6066;margin-left: 4px;font-size: 400;}.noSelected::before {position: absolute;z-index: 1;top: 50%;left: 0;border-top: 18px solid transparent;border-right: 5px solid #fff;margin-top: 0;content: '';transform: rotate(-180deg);}.noSelected::after {position: absolute;z-index: 1;top: 50%;left: 0;border-top: 18px solid transparent;border-left: 5px solid #fff;margin-top: -17px;content: '';}</style></head><body><div class="container"><div class="common selected">1. vue2 内容</div><div class="common noSelected">2. vue3 内容</div></div></body>
</html>该部分代码仅实现了基础的 CSS 样式，没有涉及到动态交互。大家在尝试时，可以结合 Vue 或其他框架，实现动态的状态切换效果。
相关文章：
CSS 效果：实现动态展示双箭头
最近写了一段 CSS 样式，虽然不难，但实现过程比较繁琐。这个效果结合了两个箭头，一个突出，一个内缩，非常适合用于步骤导航或选项卡切换等场景。样式不仅仅是静态的，还可以通过点击 click 或者 hover 事件&am…...
Linux 创建开发用的账户
在Linux系统中，创建一个用于开发的用户账户通常涉及到添加用户、设置密码以及配置适当的权限和环境。这里将详细介绍如何在Linux系统中创建一个新的开发用户账户，包括为其配置sudo权限，使其能够执行需要管理员权限的命令。 步骤 1: 创建用户…...
检查一个CentOS服务器的配置的常用命令
在CentOS系统中，查看服务器配置的常用命令非常丰富，这些命令可以帮助用户快速了解服务器的硬件信息、系统状态以及网络配置等。以下是一些常用的命令及其简要说明： 1. 查看CPU信息 (1) cat /proc/cpuinfo：显示CPU的详细信息&…...
Redis 简单的消息队列
使用redis 进行简单的队列很容易，不需要使用较为复杂的MQ队列，直接使用redis 进行，不过唯一不足的需要自己构造生产者消费者，这里使用while True的方法进行消费者操作 目录 介绍数据类型StringHash 重要命令消息队列 介绍 key-v…...
C++：继承和多态，自定义封装栈，队列
1.栈： stack.cpp #include "stack.h"Stack::Stack():top(nullptr),len(0){} //析构函数 Stack::~Stack() {while(!empty()){pop();} }bool Stack::empty() //判断栈是否为空 {return topnullptr; }int Stack::size()//获取栈的大小 {return len; } //压…...
Python多个set中的交集
Python多个set中的交集 在 Python 中，集合（set）是一种非常有用的数据结构，它可以存储唯一的元素，并提供了高效的数学集合操作，包括求交集、并集和差集等。本文将重点介绍如何通过多重集合求交集࿰…...
百度百科 X-Bk-Token 算法还原
声明 本文章中所有内容仅供学习交流，严禁用于商业用途和非法用途，否则由此产生的一切后果均与作者无关，若有侵权，请私信我立即删除！ 文章目录 声明案例地址参数分析X-Bk-Token算法追踪X-Bk-Token后缀算法还原c 值跟踪与算法还原往期逆向文章推荐最近太忙了，博客摆烂了好…...
RUST语言的初印象-从一个模拟登陆谈起-slint+reqwest+aes
本文就一个做了三四天的小程序讲第一次学用RUST的感受，内附代码。 了角语言 从一些渠道听说了R，这个字母挺魔性，那个文章说C和R的团体已经上升到了宗教崇拜的高度，然后，我觉得必 有过人之处，大约10年没碰…...
HBase批量写入优化
HBase批量写入性能优化 对于HBase的批量写入性能优化，可以考虑以下几点： 1.批量写入操作：使用HBasef的批量写入操作可以显著提高性能。将多个写入操作放在一个批次中一起提交。这样可以减少网络通信开销和减少多次写入操作的开销。方法不限。…...
江协科技STM32学习- P19 TIM编码器接口
🚀write in front🚀 🔎大家好，我是黄桃罐头，希望你看完之后，能对你有所帮助，不足请指正！共同学习交流 🎁欢迎各位→点赞👍 收藏⭐️ 留言📝…...
文件上传、重定向、Gin路由
文件上传 单个文件上传 index.html 文件上传前端页面代码： <!DOCTYPE html> <html lang"zh-CN"> <head><title>index</title> </head> <body> <form action"/upload" method"post"…...
躺平成长：微信小程序运营日记第二天
在进行属于生活的开源之后，自己更加感受到自己存在的渺茫，同时更加开始深刻领会，开源的重要性，在开源，开放，创造，再创新的思维模式下，不发布八部金刚功相关的训练视频，自…...
三分钟速览：Node.js 版本差异与关键特性解析
Node.js 是一个广泛使用的 JavaScript 运行时环境，允许开发者在服务器端运行 JavaScript 代码。随着技术的发展，Node.js 不断推出新版本，引入新特性和改进。了解不同版本之间的差异对于开发者来说至关重要。以下是一个快速指南，帮…...
git创建新分支
git创建新分支 1.先在gitLab上New branch. 2.本地右键git小乌 - /切换/检出-创建新分支，分支名称和上一步创建的一样。 最后记得改个文件提交下，看看gitLab上是否提交成功。...
Chip-seq数据分析处理流程
一、处理过程 要处理 SRR14879780 的 ChIP-seq 数据并进行基序分析（包括比对到参考基因组 hg38.fasta 和峰值调用），你可以按照以下步骤操作，并使用相应的代码。每个步骤会涉及一些常用的生物信息学工具，如 FastQC、Tr…...
spring boot3.2.x与spring boot2.7.x对比
Spring Boot 3.2.x 相比 Spring Boot 2.7.x 带来了许多重要的变化、新特性以及性能改进。这些新功能不仅提升了开发者的效率，还优化了应用的性能和安全性。以下是两者的主要差异、优势以及使用说明： 1. JDK 17 支持 Spring Boot 2.7.x 支持 JDK 8 至 J…...
Vue2（十三）：路由
一、路由的简介 vue-rooter：是vue的一个插件库，专门用来实现SPA应用 1.对SPA应用的理解 1、单页 Web 应用（single page web application，SPA）。 2、整个应用只有一个完整的页面 index.html。 3、点击页面中的导航链…...
Java并发：互斥锁，读写锁，公平锁，Condition，StampedLock
阅读本文之前可以看一看 Java 多线程基础： Java：多线程（进程线程，线程状态，创建线程，线程操作） Java：多线程（同步死锁，锁&原子变量，线程通信&…...
在 Linux 中，要让某一个线程或进程排他性地独占一个 CPU
文章目录 1. CPU 亲和性（CPU Affinity）2. 中断隔离（IRQ Isolation）3. 系统 tickless 模式（NoHZ Mode）4. 实时调度策略5. CPU 隔离（CPU Isolation）和 Full CPU Isolation实现最低的延迟抖动在 Linux 中，要让某一个线程 排他性地独占一个 CPU，并且进一步隔离中断（包括…...
滚雪球学MySQL[7.3讲]：数据库日志与审计详解：从错误日志到审计日志的配置与使用
全文目录： 前言7.3 日志与审计1. 日志类型与配置1.1 错误日志（Error Log）配置错误日志使用场景案例演示 1.2 慢查询日志（Slow Query Log）配置慢查询日志使用场景案例演示 1.3 查询日志（General Query Log&a…...
Oracle查询表空间大小
1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...
PPT|230页| 制造集团企业供应链端到端的数字化解决方案：从需求到结算的全链路业务闭环构建
制造业采购供应链管理是企业运营的核心环节，供应链协同管理在供应链上下游企业之间建立紧密的合作关系，通过信息共享、资源整合、业务协同等方式，实现供应链的全面管理和优化，提高供应链的效率和透明度，降低供应链的成…...
页面渲染流程与性能优化
页面渲染流程与性能优化详解（完整版） 一、现代浏览器渲染流程（详细说明） 1. 构建DOM树 浏览器接收到HTML文档后，会逐步解析并构建DOM（Document Object Model）树。具体过程如下： (…...
在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用
1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...
Rapidio门铃消息FIFO溢出机制
关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系，以下是深入解析： 门铃FIFO溢出的本质 在RapidIO系统中，门铃消息FIFO是硬件控制器内部的缓冲区，用于临时存储接收到的门铃消息（Doorbell Message）。…...
Maven 概述、安装、配置、仓库、私服详解
目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...
C#中的CLR属性、依赖属性与附加属性
CLR属性的主要特征 封装性： 隐藏字段的实现细节 提供对字段的受控访问 访问控制： 可单独设置get/set访问器的可见性 可创建只读或只写属性 计算属性： 可以在getter中执行计算逻辑 不需要直接对应一个字段 验证逻辑： 可以…...
Web中间件--tomcat学习
Web中间件–tomcat Java虚拟机详解 什么是JAVA虚拟机 Java虚拟机是一个抽象的计算机，它可以执行Java字节码。Java虚拟机是Java平台的一部分，Java平台由Java语言、Java API和Java虚拟机组成。Java虚拟机的主要作用是将Java字节码转换为机器代码&#x…...
wpf在image控件上快速显示内存图像
wpf在image控件上快速显示内存图像https://www.cnblogs.com/haodafeng/p/10431387.html 如果你在寻找能够快速在image控件刷新大图像（比如分辨率3000*3000的图像）的办法，尤其是想把内存中的裸数据（只有图像的数据，不包…...
数据结构：递归的种类（Types of Recursion）
目录 尾递归（Tail Recursion） 什么是 Loop（循环）？ 复杂度分析 头递归（Head Recursion） 树形递归（Tree Recursion） 线性递归（Linear Recursion）…...