如何利用CSS实现圆环进度条的内环阴影效果？-html教程-PHP中文网

如何利用CSS实现圆环进度条的内环阴影效果？

花韻仙語

发布： 2024-11-01 11:42:11

原创

413人浏览过

如何利用CSS实现圆环进度条的内环阴影效果？

圆环进度条实现内环阴影方法

要实现带有阴影效果的圆环进度条，需要使用 CSS 中的 box-shadow 属性。

具体步骤：

创建圆环容器（.circle）：设置容器为正方形，并使用 justify-content 和 align-items 对齐子元素。
创建左半圆（.circle-left）：使用 clip 属性裁剪一个一半圆，并填充背景颜色和图层遮罩。
创建右半圆（.circle-right）：与左半圆类似，但裁剪的是另一半圆。
创建外环（.circle-l）：使用圆形 border-radius 和 box-shadow 创建外环阴影效果。
创建内环（.circle-s）：再次使用圆形 border-radius 和 box-shadow 创建内环，但这次阴影应朝相反方向（-2rpx -2rpx）。
调整文本（.circle_num）：添加一个 position: absolute 的文本元素，并根据 percent 值动态更新其样式。

参考示例：

火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

106

查看详情

<view class="circle">
  <view class="circle-left">
    <view class="left"></view>
  </view>
  <view class="circle-right">
    <view class="right"></view>
  </view>
  <view class="circle-l"></view>
  <view class="circle-s"></view>
  <view class="circle_num">{{percent}}%</view>
</view>

登录后复制

.circle {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 450rpx;

  .circle-left {
    position: absolute;
    width: 400rpx;
    height: 400rpx;
    clip: rect(0rpx, 200rpx, 400rpx, 0rpx);
    border-radius: 50%;
    background-color: #1C1D23;

    .left {
      position: absolute;
      width: 400rpx;
      height: 400rpx;
      clip: rect(0rpx, 200rpx, 400rpx, 0rpx);
      background-color: #1C1D23;
      border-radius: 50%;
    }
  }

  .circle-right {
    position: absolute;
    width: 400rpx;
    height: 400rpx;
    clip: rect(0rpx, 400rpx, 400rpx, 200rpx);
    border-radius: 50%;
    background-color: #1C1D23;

    .right {
      position: absolute;
      width: 400rpx;
      height: 400rpx;
      clip: rect(0rpx, 400rpx, 400rpx, 200rpx);
      background-color: #1C1D23;
      border-radius: 50%;
    }
  }

  .circle-l {
    position: absolute;
    width: 450rpx;
    height: 450rpx;
    border-radius: 50%;
    box-shadow: 0rpx 0rpx 20rpx #4F4F5B;
    background: #1C1D23;
  }

  .circle-s {
    position: absolute;
    width: 280rpx;
    height: 280rpx;
    border-radius: 50%;
    box-shadow: -2rpx -2rpx 6rpx #fff;
    background: #23232B;
  }

  .circle_num {
    position: absolute;
    width: 100%;
    font-size: 2rem;
    color: #fff;
    z-index: 6;
  }
}

登录后复制

通过使用这些技巧，可以轻松创建带有阴影效果的圆环进度条。

立即学习“前端免费学习笔记（深入）”；

以上就是如何利用CSS实现圆环进度条的内环阴影效果？的详细内容，更多请关注php中文网其它相关文章！