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

Question

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

Answer 1

 .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;            }          }

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

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

.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);}

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