个性化步骤条、多边形

于 2024-05-30 19:14:48 发布
阅读量652 收藏 25
点赞数 9
文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HeMister/article/details/139331522
版权

在这里插入图片描述

纯样式 HTML+ CSS

<!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>
    .tabs {
      display: flex;
      width: 200px;
      height: 50px;
    }
    .tabs .tab-item {
      background: rgb(143, 171, 236);
      border: 1px solid rgb(255, 0, 0);
      border-left: none;
      border-right: none;
      flex: 1;
      position: relative;
    }
    .tabs .tab-item:not(:last-child)::after {
      content: "";
      width: 26px;
      height: 26px;
      position: absolute;
      background: inherit;
      border-top: 1px solid rgb(255, 0, 0);
      border-right: 1px solid rgb(255, 0, 0);
      transform: rotate(45deg) skew(15deg, 15deg);
      right: -14px;
      top: 10px;
      z-index: 9;
    }
    .tabs .tab-item:not(:first-child)::before {
      content: "";
      width: 26px;
      height: 26px;
      position: absolute;
      border-top: 1px solid rgb(255, 0, 0);
      border-right: 1px solid rgb(255, 0, 0);
      transform: rotate(45deg) skew(15deg, 15deg);
      left: -13px;
      top: 10px;
      z-index: 10;
    }
    .tabs>.tab-item:first-child {
      border-left: 1px solid rgb(255, 0, 0);
    }
    .tabs>.tab-item:last-child {
      border-right: 1px solid rgb(255, 0, 0);
    }
    .tabs .tab-item:hover {
      background-color: rgb(149, 0, 255);
      border-color: aqua;
    }
    .tabs .tab-item:hover::after {
      background-color: rgb(149, 0, 255);
      border-color: aqua;
      z-index: 11;
    }
    .tabs .tab-item:hover::before {
      border-top: 1px solid aqua;
      border-right: 1px solid aqua;
    }
    .tabs .tab-item::before {
      background-color: transparent;
    }
  </style>
</head>
<body>
  <div class="tabs">
    <div class="tab-item"></div>
    <div class="tab-item"></div>
    <div class="tab-item"></div>
  </div>
</body>
</html>

使用脚本 JS+HTML+CSS

<!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>
    .tabs {
      display: flex;
      width: 200px;
      height: 50px;
    }
    .tabs .tab-item {
      background: rgb(143, 171, 236);
      border: 1px solid rgb(255, 0, 0);
      border-left: none;
      border-right: none;
      flex: 1;
      position: relative;
    }
    .tabs .tab-item:not(:last-child)::after {
      content: "";
      width: 26px;
      height: 26px;
      position: absolute;
      background: inherit;
      border-top: 1px solid rgb(255, 0, 0);
      border-right: 1px solid rgb(255, 0, 0);
      transform: rotate(45deg) skew(15deg, 15deg);
      right: -14px;
      top: 10px;
      z-index: 9;
    }
    .tabs>.tab-item:first-child {
      border-left: 1px solid rgb(255, 0, 0);
    }
    .tabs>.tab-item:last-child {
      border-right: 1px solid rgb(255, 0, 0);
    }
    .tabs .tab-item:hover {
      background-color: bisque;
      border-color: aqua;
    }
    .tabs .tab-item:hover::after {
      border-color: aqua;
    }
    .hover-previous::after {
      border-color: aqua !important;
    }
  </style>
</head>
<body>
  <div class="tabs" id="tabs">
    <div class="tab-item" data-index="0" ></div>
    <div class="tab-item" data-index="1" ></div>
    <div class="tab-item" data-index="2" ></div>
  </div>
  <script>
    var tabsDom = document.getElementById("tabs")
    tabsDom.addEventListener('mouseover', function(event) {
      var cInd = Number(event.target.dataset.index)
      var preInd = cInd - 1
      var tabItems = document.getElementsByClassName('tab-item')
      for(var i =0; i< tabItems.length; i++){
        tabItems[i].className = "tab-item"
      }
      if(preInd >= 0){
        tabItems[preInd].className = "tab-item hover-previous"
      }
    });
    tabsDom.addEventListener('mouseout', function(event) {
      var tabItems = document.getElementsByClassName('tab-item')
      for(var i =0; i< tabItems.length; i++){
        tabItems[i].className = "tab-item"
      }
    });
  </script>
</body>
</html>
微笑边缘的金元宝
关注
  • 9
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue 步骤条： 虚线样式、进度条
m0_59329255的博客
11-10 257
111
纯HTML流程步骤条
12-08
纯HTML自适应流程步骤条，根据需求定制修改，下载即可用
html实现多种风格步骤条
最新发布
接受定制，友情互惠，致力于前端的全类型模板，打造通用模板源码，进阶于前后端联合模板，适用于全类型。
06-20 2354
html实现多种风格步骤条，好看的步骤条源码，源码下载，格子风步骤条，花式风步骤条，进度风步骤条，线性风步骤条四种步骤条，代码独立，可以直接使用。也可直接预览效果。
css:步骤条样式
qq_44429079的博客
01-04 1514
步骤条样式
纯样式步骤条插件，显示步骤数字等。
05-13
纯样式步骤条插件，显示步骤数字等。
怎么编写html样式,这种步骤条的css样式怎么写？
weixin_39966130的博客
06-21 110
可以参考一下例子/*custom font*/@import url(http://fonts.googleapis.com/css?family=Merriweather+Sans);* {margin: 0; padding: 0;}html, body {min-height: 100%;}body {text-align: center;padding-top: 100px;backgro...
CSS步骤条，进度条
04-27
CSS步骤条，进度条，纯css，挺舒服的，可惜不能传图片
微信小程序个性化地图图层展示步骤
05-10
微信小程序个性化地图图层展示的步骤如下： 1. 获取用户地理位置：使用微信小程序的 API 获取用户当前的地理位置，得到经纬度信息。 2. 初始化地图：使用微信小程序的开发框架中提供的 map 组件，初始化地图并设置...
Win32个性化窗口形状
08-10
在本文中，我们将深入探讨一个独特的Win32功能：个性化窗口形状。通过利用`SetWindowRgn`函数，我们可以打破常规矩形窗口的限制，为我们的应用程序创建独一无二的形状。 首先，`SetWindowRgn`是Win32 API中的一员，...
AUTO CAD快捷键的个性化设置.pdf
08-05
标题所涉及的知识点为“AutoCAD快捷键的个性化设置”，这是一个在CAD绘图过程中提升工作效率的重要方法。描述部分提到，随着CAD（计算机辅助设计）在工程领域中的广泛使用，对快捷键进行个性化设置可以显著提高工作...
bootstrap步骤条-按钮-箭头样式
12-13
一款基于Bootstrap的纯CSS3步骤条-箭头指向类按钮样式。该按钮通过修改原生Bootstrap的按钮样式，来生成指向左侧或右侧的箭头按钮。
jQuery步骤进度条样式代码.zip
07-11
jQuery步骤进度条样式代码
很实用的步骤条
02-05
很漂亮 且很实用的步骤条 下载就可使用
基于VUE步骤进度条样式代码.zip
07-04
脚本简介基于VUE步骤进度条样式代码是一款响应式带图标的步骤进度条代码。
HTML步骤条引导效果
05-03
SUI里面实现的步骤导航效果，纯css实现。
蓝色多边形背景图片PPT模板
03-20
在IT领域，PPT（PowerPoint）模板设计是制作演示文稿时不可或缺的一部分，它能够为演讲者提供统一且...在实际应用中，用户可以根据自己的需求调整模板，添加文字、图表和其他多媒体元素，以创建一个个性化的演示文稿。
VB制作个性化图形窗体源代码
11-05
在VB中实现个性化图形窗体，主要涉及以下几个关键步骤： 1. **加载GDI+库**：引入`System.Drawing`命名空间，这样就可以访问到绘图所需的类和方法，如`Graphics`类用于绘图，`Pen`类用于定义线条样式，`Brush`类...
elementUI Steps 步骤条 样式以及方法使用
weixin_36723038的博客
01-31 4963
elementUI步骤条，CSS改变步骤条状态样式
记录--纯CSS实现一个简单又不失优雅的步骤条
林恒的博客
06-07 3607
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 步骤条是一种用于引导用户按照特定流程完成任务的导航条，在各种分步表单交互场景中广泛应用。先来看一下几个主流前端 UI 框架中步骤条组件的样子： ElementPlus AntDesign OpenTiny iView 我们可以发现，步骤条通常由编号、名称和引导线三个基本要素组成。本文中要实现的是一个简单...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值