中间的有突出效果是怎么实现的啊CSS?

Question

中间的有突出效果是怎么实现的啊CSS

Answer 1

看你想怎么实现，最简单的做法，在上面覆盖一个白色透明渐变就好。可以用伪元素，比如：

.progress-bar {
  position: relative;
}
.progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 1rem;
  background: linear-gradient(to right #fff0, #ffff);
}

代码没调试，指个大方向。

Answer 2

很简单啊，就是通过叠加透明的渐变色来实现，也就是1楼肉山提供的思路，不知道你为什么会说不生效，是不是有一些特殊场景没有描述清楚。

这里是在线Demo

<script setup>
import { ref } from 'vue'

const progress = ref(35)

setInterval(() => {
  if(progress.value === 100) {
    progress.value = 0
  } else {
    progress.value += 1
  }
}, 500)
</script>

<template>
  <div class="progress">
    <div class="progress-bar" :style="{width: `${progress}%`}"></div>
  </div>
</template>

<style>
.progress {
  width: 1000px;
  max-width : 90vw;
  height: 30px;
  background: black;
  border: 3px solid black;
  border-radius: 6px;
  margin: auto;
}
.progress-bar {
  height: 100%;
  background: linear-gradient(-45deg, #ed1213 25%, #f2564d 0, #f2564d 50%, #ed1213 0, #ed1213 75%, #f2564d 0);
  background-size: 30px 30px;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  transition: width .5s linear;
}
.progress-bar:before {
  content: '';
  width: 100%;
  height: 55%;
  background: linear-gradient(to top, #ffffff80, #ffffff20);
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
.progress-bar:after {
  content: '';
  width: 55px;
  max-width: 90%;
  height: 100%;
  background: linear-gradient(to left, #ffffffff, #ffffff00);
  display: block;
  position: absolute;
  top: 0;
  right: 0;
}

body {
  background: gray;
}
</style>

Answer 3

 .fill-container {
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            animation: fillProgress 1s linear infinite;
            animation-fill-mode: forwards;
            -moz-animation-fill-mode: forwards;
            -webkit-animation-fill-mode: forwards;
            -o-animation-fill-mode: forwards;
            background-image: linear-gradient(
              45eg,
              hsla(0, 0%, 100%, 0) 35%,
              hsla(0, 0%, 100%, 0.1) 0,
              hsla(0, 0%, 100%, 0.1) 75%,
              hsla(0, 0%, 100%, 0) 0,
              hsla(0, 0%, 100%, 0)
            );
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            background-size: 5rem 100%;
            border-radius: 5rem;
            height: 100%;
            position: absolute;
            background: repeating-linear-gradient(-45deg, #f15555 0 8px, rgba(235, 19, 19, 0.9) 0 16px) left/200% 100%;
            .top-highlight {
              background-color: hsla(0, 0%, 100%, 0.2);
              border-radius: 3.5px 3.5px 0 0;
              height: 50%;
              width: 100%;
              position: absolute;
              transform: translateZ();
              -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            }
            .front-highlight {
              background-image: linear-gradient(90deg, hsla(0, 0%, 100%, 0), #fff);
              -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
              border-radius: 0 3.5px 3.5px 0;
              height: 100%;
              max-width: 3rem;
              right: -0.1rem;
              width: 50%;
              position: absolute;
              transform: translateZ();
            }
          }
          @keyframes fillProgress {
            0% {
              background-position: 0 0;
            }
            100% {
              background-position: -15rem 0;
            }
          }