实现圆环形按钮布局

实现下图布局
这里写图片描述

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="400" Width="500">
    <Window.Resources>
        <Style TargetType="Button">
            <Setter Property="HorizontalAlignment" Value="Center"></Setter>
            <Setter Property="VerticalAlignment" Value="Center"></Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid Width="80" Height="40">
                            <Path x:Name="TEMP_PATH" VerticalAlignment="Bottom" Stroke="CadetBlue" StrokeThickness="2" StrokeDashCap="Round"
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现环进度条,你可以使用 CSS 的伪元素和 transform 属性来实现。以下是一个简单的示例: HTML: ```html <div class="progress-bar"> <div class="progress"></div> </div> ``` CSS: ```css .progress-bar { position: relative; width: 200px; height: 200px; border-radius: 50%; background-color: lightgray; } .progress { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; background-color: #00bcd4; transform-origin: center center; } .progress::before { content: ""; position: absolute; top: -10px; left: calc(50% - 10px); width: 20px; height: 20px; border-radius: 50%; background-color: #00bcd4; } .progress::after { content: ""; position: absolute; top: calc(50% - 10px); right: -10px; width: 20px; height: 20px; border-radius: 50%; background-color: lightgray; } .progress-bar::after { content: ""; position: absolute; top: calc(50% - 30px); left: calc(50% - 30px); width: 60px; height: 60px; border-radius: 50%; background-color: lightgray; } .progress-bar::before { content: ""; position: absolute; top: calc(50% - 40px); left: calc(50% - 40px); width: 80px; height: 80px; border-radius: 50%; background-color: lightgray; } ``` 在上面的示例中,我们有一个包含两个 div 的容器。`.progress-bar` 是环的外部容器,`.progress` 是实际的进度条。我们使用伪元素 `::before` 和 `::after` 来创建环的开始和结束点。 通过改变 `.progress` 元素的 `transform` 属性,你可以调整进度条的进度。例如,你可以使用 `transform: rotate(45deg)` 来表示进度条完成了 45%。 你可以根据你的需求修改样式,并使用 JavaScript 来动态更新进度条的进度。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值