当前位置： 首页 > news >正文

CSS 效果：实现动态展示双箭头

news 2025/9/15 20:32:39

最近写了一段 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 样式&#xff0c;虽然不难&#xff0c;但实现过程比较繁琐。这个效果结合了两个箭头&#xff0c;一个突出&#xff0c;一个内缩&#xff0c;非常适合用于步骤导航或选项卡切换等场景。样式不仅仅是静态的&#xff0c;还可以通过点击 click 或者 hover 事件&am…...

编程日记 2024/10/1 16:09:21

Linux 创建开发用的账户

在Linux系统中&#xff0c;创建一个用于开发的用户账户通常涉及到添加用户、设置密码以及配置适当的权限和环境。这里将详细介绍如何在Linux系统中创建一个新的开发用户账户&#xff0c;包括为其配置sudo权限&#xff0c;使其能够执行需要管理员权限的命令。 步骤 1: 创建用户…...

编程日记 2024/10/1 16:06:19

检查一个CentOS服务器的配置的常用命令

在CentOS系统中&#xff0c;查看服务器配置的常用命令非常丰富&#xff0c;这些命令可以帮助用户快速了解服务器的硬件信息、系统状态以及网络配置等。以下是一些常用的命令及其简要说明&#xff1a; 1. 查看CPU信息 (1) cat /proc/cpuinfo&#xff1a;显示CPU的详细信息&…...

编程日记 2024/10/1 16:01:14

Redis 简单的消息队列

使用redis 进行简单的队列很容易&#xff0c;不需要使用较为复杂的MQ队列&#xff0c;直接使用redis 进行&#xff0c;不过唯一不足的需要自己构造生产者消费者&#xff0c;这里使用while True的方法进行消费者操作 目录 介绍数据类型StringHash 重要命令消息队列 介绍 key-v…...

编程日记 2024/10/1 15:57:10

C++：继承和多态，自定义封装栈，队列

1.栈&#xff1a; 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; } //压…...

编程日记 2024/10/1 15:56:08

Python多个set中的交集

Python多个set中的交集 在 Python 中&#xff0c;集合&#xff08;set&#xff09;是一种非常有用的数据结构&#xff0c;它可以存储唯一的元素&#xff0c;并提供了高效的数学集合操作&#xff0c;包括求交集、并集和差集等。本文将重点介绍如何通过多重集合求交集&#xff0…...

编程日记 2024/10/1 15:54:06

百度百科 X-Bk-Token 算法还原

声明 本文章中所有内容仅供学习交流，严禁用于商业用途和非法用途，否则由此产生的一切后果均与作者无关，若有侵权，请私信我立即删除！ 文章目录 声明案例地址参数分析X-Bk-Token算法追踪X-Bk-Token后缀算法还原c 值跟踪与算法还原往期逆向文章推荐最近太忙了，博客摆烂了好…...

编程日记 2024/10/1 15:53:04

RUST语言的初印象-从一个模拟登陆谈起-slint+reqwest+aes

本文就一个做了三四天的小程序讲第一次学用RUST的感受&#xff0c;内附代码。 了角语言 从一些渠道听说了R&#xff0c;这个字母挺魔性&#xff0c;那个文章说C和R的团体已经上升到了宗教崇拜的高度&#xff0c;然后&#xff0c;我觉得必 有过人之处&#xff0c;大约10年没碰…...

编程日记 2024/10/1 15:51:03

HBase批量写入优化

HBase批量写入性能优化 对于HBase的批量写入性能优化&#xff0c;可以考虑以下几点&#xff1a; 1.批量写入操作&#xff1a;使用HBasef的批量写入操作可以显著提高性能。将多个写入操作放在一个批次中一起提交。这样可以减少网络通信开销和减少多次写入操作的开销。方法不限。…...

编程日记 2024/10/1 15:45:58

江协科技STM32学习- P19 TIM编码器接口

&#x1f680;write in front&#x1f680; &#x1f50e;大家好&#xff0c;我是黄桃罐头&#xff0c;希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流 &#x1f381;欢迎各位→点赞&#x1f44d; 收藏⭐️ 留言&#x1f4dd;​…...

编程日记 2024/10/1 15:43:55

文件上传、重定向、Gin路由

文件上传 单个文件上传 index.html 文件上传前端页面代码&#xff1a; <!DOCTYPE html> <html lang"zh-CN"> <head><title>index</title> </head> <body> <form action"/upload" method"post"…...

编程日记 2024/10/1 15:42:53

躺平成长：微信小程序运营日记第二天

在进行属于生活的开源之后&#xff0c;自己更加感受到自己存在的渺茫&#xff0c;同时更加开始深刻领会&#xff0c;开源的重要性&#xff0c;在开源&#xff0c;开放&#xff0c;创造&#xff0c;再创新的思维模式下&#xff0c;不发布八部金刚功相关的训练视频&#xff0c;自…...

编程日记 2024/10/1 15:40:51

三分钟速览：Node.js 版本差异与关键特性解析

Node.js 是一个广泛使用的 JavaScript 运行时环境&#xff0c;允许开发者在服务器端运行 JavaScript 代码。随着技术的发展&#xff0c;Node.js 不断推出新版本&#xff0c;引入新特性和改进。了解不同版本之间的差异对于开发者来说至关重要。以下是一个快速指南&#xff0c;帮…...

编程日记 2024/10/1 15:36:46

git创建新分支

git创建新分支 1.先在gitLab上New branch. 2.本地右键git小乌 - /切换/检出-创建新分支&#xff0c;分支名称和上一步创建的一样。 最后记得改个文件提交下&#xff0c;看看gitLab上是否提交成功。...

编程日记 2024/10/1 15:35:45

Chip-seq数据分析处理流程

一、处理过程 要处理 SRR14879780 的 ChIP-seq 数据并进行基序分析&#xff08;包括比对到参考基因组 hg38.fasta 和峰值调用&#xff09;&#xff0c;你可以按照以下步骤操作&#xff0c;并使用相应的代码。每个步骤会涉及一些常用的生物信息学工具&#xff0c;如 FastQC、Tr…...

编程日记 2024/10/1 15:33:44

spring boot3.2.x与spring boot2.7.x对比

Spring Boot 3.2.x 相比 Spring Boot 2.7.x 带来了许多重要的变化、新特性以及性能改进。这些新功能不仅提升了开发者的效率&#xff0c;还优化了应用的性能和安全性。以下是两者的主要差异、优势以及使用说明&#xff1a; 1. JDK 17 支持 Spring Boot 2.7.x 支持 JDK 8 至 J…...

编程日记 2024/10/1 15:25:36

Vue2（十三）：路由

一、路由的简介 vue-rooter&#xff1a;是vue的一个插件库&#xff0c;专门用来实现SPA应用 1.对SPA应用的理解 1、单页 Web 应用&#xff08;single page web application&#xff0c;SPA&#xff09;。 2、整个应用只有一个完整的页面 index.html。 3、点击页面中的导航链…...

编程日记 2024/10/1 15:22:33

Java并发：互斥锁，读写锁，公平锁，Condition，StampedLock

阅读本文之前可以看一看 Java 多线程基础&#xff1a; Java&#xff1a;多线程&#xff08;进程线程&#xff0c;线程状态&#xff0c;创建线程&#xff0c;线程操作&#xff09; Java&#xff1a;多线程&#xff08;同步死锁&#xff0c;锁&原子变量&#xff0c;线程通信&…...

编程日记 2024/10/1 15:18:31

在 Linux 中，要让某一个线程或进程排他性地独占一个 CPU

文章目录 1. CPU 亲和性（CPU Affinity）2. 中断隔离（IRQ Isolation）3. 系统 tickless 模式（NoHZ Mode）4. 实时调度策略5. CPU 隔离（CPU Isolation）和 Full CPU Isolation实现最低的延迟抖动在 Linux 中，要让某一个线程 排他性地独占一个 CPU，并且进一步隔离中断（包括…...

编程日记 2024/10/1 15:17:30

滚雪球学MySQL[7.3讲]：数据库日志与审计详解：从错误日志到审计日志的配置与使用

全文目录&#xff1a; 前言7.3 日志与审计1. 日志类型与配置1.1 错误日志&#xff08;Error Log&#xff09;配置错误日志使用场景案例演示 1.2 慢查询日志&#xff08;Slow Query Log&#xff09;配置慢查询日志使用场景案例演示 1.3 查询日志&#xff08;General Query Log&a…...

编程日记 2024/10/1 15:16:29

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段&#xff1a; 构建阶段&#xff08;Build Stage&#xff09;&#xff1a…...

编程新知 2025/8/12 16:28:43

【杂谈】-递归进化：人工智能的自我改进与监管挑战

递归进化&#xff1a;人工智能的自我改进与监管挑战 文章目录 递归进化&#xff1a;人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管&#xff1f;3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...

编程新知 2025/7/7 5:39:43

Spring Boot 实现流式响应（兼容 2.7.x）

在实际开发中&#xff0c;我们可能会遇到一些流式数据处理的场景&#xff0c;比如接收来自上游接口的 Server-Sent Events&#xff08;SSE&#xff09; 或 流式 JSON 内容&#xff0c;并将其原样中转给前端页面或客户端。这种情况下&#xff0c;传统的 RestTemplate 缓存机制会…...

编程新知 2025/8/11 8:18:44

（二）原型模式

原型的功能是将一个已经存在的对象作为源目标，其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现，忽略对象创建过程中的其它细节。 📌 核心特点： 避免重复初…...

编程新知 2025/9/13 2:29:19

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型（LLM）的广泛应用，开发者常面临多个挑战： 各大模型（OpenAI、Claude、Gemini、Ollama）接口风格不统一；缺乏一个统一平台进行模型调用与测试；本地模型 Ollama 的集成与前…...

编程新知 2025/9/7 8:50:27

今日学习：Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存

文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...

编程新知 2025/9/9 13:50:44

10-Oracle 23 ai Vector Search 概述和参数

一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI&#xff0c;使用客户端或是内部自己搭建集成大模型的终端&#xff0c;加速与大型语言模型&#xff08;LLM&#xff09;的结合&#xff0c;同时使用检索增强生成&#xff08;Retrieval Augmented Generation &#…...

编程新知 2025/9/13 17:41:17

【分享】推荐一些办公小工具

1、PDF 在线转换 https://smallpdf.com/cn/pdf-tools 推荐理由&#xff1a;大部分的转换软件需要收费&#xff0c;要么功能不齐全&#xff0c;而开会员又用不了几次浪费钱&#xff0c;借用别人的又不安全。 这个网站它不需要登录或下载安装。而且提供的免费功能就能满足日常…...

编程新知 2025/9/3 12:01:04

前端中slice和splic的区别

1. slice slice 用于从数组中提取一部分元素&#xff0c;返回一个新的数组。 特点&#xff1a; 不修改原数组&#xff1a;slice 不会改变原数组&#xff0c;而是返回一个新的数组。提取数组的部分&#xff1a;slice 会根据指定的开始索引和结束索引提取数组的一部分。不包含…...

编程新知 2025/6/20 15:06:56

Leetcode33（ 搜索旋转排序数组）

题目表述 整数数组 nums 按升序排列&#xff0c;数组中的值 互不相同 。 在传递给函数之前&#xff0c;nums 在预先未知的某个下标 k&#xff08;0 < k < nums.length&#xff09;上进行了 旋转&#xff0c;使数组变为 [nums[k], nums[k1], …, nums[n-1], nums[0], nu…...

编程新知 2025/7/6 1:54:27