css矩形盒子实现虚线流动边框+css实现step连接箭头

这篇具有很好参考价值的文章主要介绍了css矩形盒子实现虚线流动边框+css实现step连接箭头。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

由于项目里需要手写步骤条 且实现指定状态边框虚线流动效果,故使用css去绘制步骤条连接箭头和绘制边框流动效果

效果:css矩形盒子实现虚线流动边框+css实现step连接箭头,css,前端,elementui文章来源地址https://www.toymoban.com/news/detail-722651.html

1.绘制步骤条连接箭头

    <ul class="process-list">
      <div v-for="(process, index) in processes" :key="index" class="flex items-center item-box">
        <li :class="active==process.id?'active':''">
          <span class="process-name">{{ process.name }}</span>
        </li>
        <div class="arrow"></div>
      </div>
    </ul>
// 绘制连接线
.arrow {
  display:inline-block;
  height:2px;
  width:80px;
  background-color:#909399;
  position:relative;
  margin-left: 10px;
  margin-right: 20px;
}
// 绘制箭头
.arrow:before {
  position:absolute;
  content:"";
  width:0;
  height:0;
  border:6px solid transparent;
  border-left:6px solid #909399;
  left:100%;
  top:50%;
  transform: translateY(-50%);
}

2.绘制流动虚线边框

  .process-item.active {
    color: #000;
    background-color: rgba(144, 147, 153, 0.2);
    position: relative;
    z-index: 2;
    background: linear-gradient(90deg, #2671e2 50%, transparent 0) repeat-x,
      linear-gradient(90deg, #2671e2 50%, transparent 0) repeat-x,
      linear-gradient(0deg, #2671e2 50%, transparent 0) repeat-y,
      linear-gradient(0deg, #2671e2 50%, transparent 0) repeat-y;
    background-color: rgba(144, 147, 153, 0.2);
    background-size: 8px 2px, 8px 2px, 2px 8px, 2px 8px;
    background-position: 0 0, 0 100%, 0 0, 100% 0;
    animation: linearGradientMove 0.3s infinite linear;
  }
  // 虚线动画
  @keyframes linearGradientMove {
    100% {
      background-position: 8px 0, -8px 100%, 0 -8px, 100% 8px;
    }
  }

到了这里,关于css矩形盒子实现虚线流动边框+css实现step连接箭头的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【CSS】盒子边框 ① ( 网页布局本质 | 盒子模型 | 盒子边框 Border | border-width 宽度 | border-style 边框样式 | 边框颜色 | 边框设置综合写法 )

    构建一个网页 , 首先 , 创建盒子模型 , 设置盒子的大小和摆放位置 , 下图中红色矩形框就是盒子模型 ; 然后 , 将 文本 , 图片 , 链接 , 表单 等网页元素 , 按照一定的样式 , 填充进盒子中 , 就形成了我们看到的网页 ; 盒子 中 还可以嵌套 若干盒子 ; HTML 的 一个布局 可以看做一个

    2024年02月04日
    浏览(68)
  • FE_CSS 页面布局之圆角边框 & 盒子阴影 & 文字阴影

    在 CSS3 中,新增了圆角边框样式,这样我们的盒子就可以变圆角了。border-radius 属性用于设置元素的外边框圆角。 参数值可以为数值或百分比的形式 如果是正方形,想要设置为一个圆,把数值修改为高度或者宽度的一半即可,或者直接写为 50% 该属性是一个简写属性,可以跟

    2023年04月13日
    浏览(89)
  • css steps实现文本一个字一个字显示

    大致思路: 使用相对定位的div覆盖文本内容,并用animation控制宽度,位置。 换行步骤在外层div上控制高度即可。 css的steps与animation一起使用可以控制文字单个显示,类似于文本输入,不过显示频率是线性。 添加一些css变量控制步骤宽度、高度和时间等,便于vue中也通过组件

    2023年04月11日
    浏览(29)
  • 【css技巧】css实现边框渐变

    海鲸AI-ChatGPT4.0国内站点,支持设计稿转代码:https://www.atalk-ai.com 在CSS中实现边框渐变效果,你不能直接应用渐变到 border 属性上,因为CSS标准不支持这样的操作。但是,你可以使用一些技巧来模拟边框渐变的效果。以下是一些常用的方法: 方法1:使用伪元素和 background-ima

    2024年01月23日
    浏览(49)
  • css实现渐变边框动画

    2024年02月15日
    浏览(40)
  • css 实现四角边框样式

    效果如图 此图只实现 左下与右下边角样式 右上与左上同理 右上与左上 将上面的bottom改为top

    2024年02月10日
    浏览(34)
  • 通过CSS实现渐变色边框

    1. 使用border-image实现渐变色边框,边框圆角 这种方式虽然简单但有个明显的缺陷,不支持设置 border-radius ,外框想设置成圆角需要加 优点: 内容背景可以透明 2. 使用 background-image实现渐变色边框,边框圆角 缺点: 内容背景不能半透明 实现复杂 不能使用padding 不是内圆角 3、

    2024年02月02日
    浏览(54)
  • CSS实现内凹圆角,从而实现圆角边框

    1、代码 2、原理 使用了radial-gradient属性 3、效果图  

    2024年02月11日
    浏览(56)
  • 【CSS】透明背景的圆角渐变边框实现方案

    css的渐变边框可以用下面方式实现 css的圆角边框可以用下面方式实现 那想要实现一个圆角的渐变边框呢,可能会以为,两个都用上不就可以了,但事实是,这两个属性并不兼容,所以要实现一个圆角的渐变边框,就得需要曲线救国的方法了 最终效果图    

    2024年02月13日
    浏览(73)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包