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 或其他框架,实现动态的状态切换效果。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/880761.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java的栈帧和动态链接是什么?

在 Java 的面试过程中&#xff0c;不可避免的一个面试题那就是 JVM&#xff0c;而 JVM 的面试题中&#xff0c;有各种&#xff0c;比如在堆中会被问到的关于垃圾回收机制的相关问题&#xff0c;在栈中会被问到入栈以及出栈的过程&#xff0c;来聊一下关于栈的相关问题&#xff…

C0008.Clion利用C++开发Qt界面,使用OpenCV时,配置OpenCV方法

安装OpenCV 配置环境 配置Clion中的CMakeLists.txt文件 # 设置OpenCV的安装路径 set(OpenCV_DIR "D:/OpenCv_Win/opencv/build/x64/vc16/lib"

分糖果C++

题目&#xff1a; 样例解释&#xff1a; 样例1解释 拿 k20 块糖放入篮子里。 篮子里现在糖果数 20≥n7&#xff0c;因此所有小朋友获得一块糖&#xff1b; 篮子里现在糖果数变成 13≥n7&#xff0c;因此所有小朋友获得一块糖&#xff1b; 篮子里现在糖果数变成 6<n7&#xf…

【算法竞赛】堆

堆是一种树形结构,树的根是堆顶,堆顶始终保持为所有元素的最优值。 有最大堆和最小堆,最大堆的根节点是最大值,最小堆的根节点是最小值。 本节都以最小堆为例进行讲解。 堆一般用二叉树实现,称为二叉堆。 二叉堆的典型应用有堆排序和优先队列。 二叉堆的概念 二叉堆是一棵…

定时器定时中断定时器外部中断

基础背景&#xff1a;TIM定时中断-CSDN博客 TIM的函数 // 恢复缺省设置 void TIM_DeInit(TIM_TypeDef* TIMx); // 时基单元初始化&#xff0c;第一个参数TIMx选择某个定时器&#xff0c;第二个参数是结构体&#xff0c;包含了配置时基单元的一些参数。 void TIM_TimeBaseInit…

blender解决缩放到某个距离就不能继续缩放

threejs中也存在同样的问题&#xff0c;原因相同&#xff0c;都是因为相机位置和相机观察点距离太近导致的。 threejs解决缩放到某个距离就不能继续缩放-CSDN博客 blender中的解决方案 1、视图中心->视图锁定->选择你想看的物体

图解C#高级教程(三):泛型

本讲用许多代码示例介绍了 C# 语言当中的泛型&#xff0c;主要包括泛型类、接口、结构、委托和方法。 文章目录 1. 为什么需要泛型&#xff1f;2. 泛型类的定义2.1 泛型类的定义2.2 使用泛型类创建变量和实例 3. 使用泛型类实现一个简单的栈3.1 类型参数的约束3.2 Where 子句3…

安装图片标识工具anylabeling

目录 下载压缩包 创建环境 安装opencv 安装第三方库 运行setup.py文件 安装过程可能会出现的错误&#xff1a; 错误1 错误2 安装完成 图标更换 之前提到的嵌入式开发】可编程4k蓝牙摄像头点击器还可以训练模型&#xff0c;使图像识别精度提高 现在讲解&#xff0c;如…

uniapp微信小程序,获取上一页面路由

在进入当前页面的时候&#xff0c;判断是不是从某个页面跳转过来的&#xff08;一般是当前页面为公共页面是出现的&#xff09;&#xff0c;比如 A-->B C-->B ,那么 要在 C跳转到B页面的时候多个提示语什么的 而在A跳转到B时不需要&#xff0c;那么就要判断 上一页面的…

前端规范工程-5:Git提交信息规范(commitlint + czg)

前面讲的都是在git提交之前的一些检查流程&#xff0c;然而我们git提交信息的时候&#xff0c;也应该是需要规范的。直接进入主题&#xff1a; 目录 需安装插件清单commitlint 介绍安装配置配置commit-msg钩子提交填写commit信息czg后续方式一&#xff1a;push触动build并上传…

DataEase v2 开源代码 Windows 从0到1环境搭建

一、环境准备 功能名称 描述 其它 操作系统 Windows 数据库 Mysql8.0 开发环境 JDK17以上 本项基于的21版本开发 Maven 3.9版本 开发工具 idea2024.2版本 前端 VSCode TIPS&#xff1a;如果你本地有jdk8版本&#xff0c;需要切换21版本&#xff0c;请看…

深入浅出MySQL事务处理:从基础概念到ACID特性及并发控制

1、什么是事务 在实际的业务开发中&#xff0c;有些业务操作要多次访问数据库。一个业务要发送多条SQL语句给数据库执行。需要将多次访问数据库的操作视为一个整体来执行&#xff0c;要么所有的SQL语句全部执行成功。如果其中有一条SQL语句失败&#xff0c;就进行事务的回滚&a…

RabbitMQ的应用问题

一、幂等性保障 幂等性是数学和计算机科学中某些运算的性质, 它们可以被多次应⽤, ⽽不会改变初始应⽤的结果 数学上的幂等性&#xff1a; f(x)f(f(x)) |x| 数据库操作幂等性&#xff1a; 数据库的 select 操作. 不同时间两次查询的结果可能不同, 但是这个操作是符合幂等性…

教务系统登录的分析

武汉纺织大学屏蔽了正方教务系统的默认登录页面&#xff0c;他们学校自定义的登录页面用户名和密码都是明文传输。可以使用Httpclient模拟登录。手动登录后&#xff0c;5次get请求才能获得真实的cookies。合肥工业大学需要3次。 第一次是POST请求。 Post请求的的下一个Location…

yum使用阿里云的镜像源报错 Failed connect to mirrors.aliyuncs.com:80; Connection refused“

报错&#xff1a;Failed connect to mirrors.aliyuncs.com:80; Connection refused"&#xff0c;如果单独只是这个报错的话&#xff0c;那么原因是由于非阿里云ECS用户无法解析主机“mirrors.cloud.aliyuncs.com”。如果不单单只是这个报错另外还有其它报错请参考我其它文…

【SQL】筛选字符串与正则表达式

目录 语法 需求 示例 分析 代码 语法 SELECT column1, column2, ... FROM table_name WHERE condition; WHERE 子句用于指定过滤条件&#xff0c;以限制从数据库表中检索的数据。当你执行一个查询时&#xff0c;WHERE 子句允许你筛选出满足特定条件的记录。如果记录满…

[RabbitMQ] 7种工作模式详细介绍

&#x1f338;个人主页:https://blog.csdn.net/2301_80050796?spm1000.2115.3001.5343 &#x1f3f5;️热门专栏: &#x1f9ca; Java基本语法(97平均质量分)https://blog.csdn.net/2301_80050796/category_12615970.html?spm1001.2014.3001.5482 &#x1f355; Collection与…

Android Studio 新版本 Logcat 的使用详解

点击进入官方Logcat介绍 一个好的Android程序员要会使用AndroidStudio自带的Logcat查看日志&#xff0c;会Log定位也是查找程序bug的第一关键。同时Logcat是一个查看和处理日志消息的工具&#xff0c;它可以更快的帮助开发者调试应用程序。 步入正题&#xff0c;看图说话。 点…

特征工程——一门提高机器学习性能的艺术

当前围绕人工智能(AI)和机器学习(ML)展开的许多讨论以模型为中心&#xff0c;聚焦于 ML和深度学习(DL)的最新进展。这种模型优先的方法往往对用于训练这些模型的数据关注不足&#xff0c;甚至完全忽视。类似MLOps的领域正迅速发展&#xff0c;通过系统性地训练和利用ML模型&…

Hive SQL业务场景:连续5天涨幅超过5%股票

一、需求描述 现有一张股票价格表 dwd_stock_trade_dtl 有3个字段分别是&#xff1a; 股票代码(stock_code), 日期(trade_date)&#xff0c; 收盘价格(closing_price) 。 请找出满足连续5天以上&#xff08;含&#xff09;每天上涨超过5%的股票&#xff0c;并给出连续满足…