下面是一个使用Blazor和CSS实现推拉效果的示例代码：

1. 创建一个Blazor组件文件，例如PullPush.razor：

    
@pullText
    
@pushText


@code {
    private bool isDragging = false;
    private int startX;
    private int pullX;
    private int pushX;
    private string pullText = "Pull";
    private string pushText = "Push";

    private string pullStyle => $"left: {pullX}px;";
    private string pushStyle => $"left: {pushX}px;";

    private void StartDrag(MouseEventArgs e)
    {
        isDragging = true;
        startX = (int)e.ClientX;
    }

    private void Drag(MouseEventArgs e)
    {
        if (isDragging)
        {
            int offsetX = (int)e.ClientX - startX;
            pullX = offsetX;
            pushX = offsetX;
            StateHasChanged();
        }
    }

    private void EndDrag()
    {
        isDragging = false;
        pullX = 0;
        pushX = 0;
        pullText = "Pull";
        pushText = "Push";
        StateHasChanged();
    }
}

2. 在CSS文件中添加样式：

.container {
    position: relative;
    width: 200px;
    height: 100px;
    background-color: lightgray;
    border: 1px solid gray;
    overflow: hidden;
}

.pull, .push {
    position: absolute;
    top: 0;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    font-size: 20px;
    color: white;
    background-color: blue;
    transition: left 0.3s ease;
    cursor: pointer;
}

.pull {
    left: 0;
}

.push {
    right: 0;
}

3. 在Blazor页面中使用PullPush组件：

此示例中，PullPush组件包含了两个带有文本的