看到有人用 Avalonia 实现,这里使用 wpf 实现
xaml
<Grid>
<Grid Width="150" Height="250">
<Grid.Resources>
<GradientStopCollection x:Key="GradientStopCollection">
<GradientStop Offset="0" Color="#5ddcff" />
<GradientStop Offset="0.43" Color="#3c67e3" />
<GradientStop Offset="1" Color="#4e00c2" />
</GradientStopCollection>
</Grid.Resources>
<TextBlock
Margin="0,0,0,-25" HorizontalAlignment="Center" VerticalAlignment="Bottom"
FontSize="8" Foreground="AliceBlue" Opacity=".1" Text="质量是制造出来的" />
<!-- 背景 -->
<Border
BorderThickness="5" CornerRadius="8" RenderTransformOrigin=".5 .5">
<Border.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX=".95" ScaleY=".95" />
<TranslateTransform Y="30" />
</TransformGroup>
</Border.RenderTransform>
<Border.Effect>
<BlurEffect Radius="130" />
</Border.Effect>
<Border.Background>
<LinearGradientBrush>
<!-- 背景的辉光 + BlurEffect 效果 -->
<GradientBrush.GradientStops>
<StaticResource ResourceKey="GradientStopCollection" />
</GradientBrush.GradientStops>
<LinearGradientBrush.RelativeTransform>
<RotateTransform x:Name="BackgroundRotateTransform" Angle="0" CenterX=".5" CenterY=".5" />
</LinearGradientBrush.RelativeTransform>
</LinearGradientBrush>
</Border.Background>
</Border>
<!-- 卡片 -->
<Border
Background="#191c29" BorderThickness="5" CornerRadius="8" Opacity=".95"
RenderTransformOrigin=".5 .5">
<Border.BorderBrush>
<LinearGradientBrush>
<!-- 边框的辉光 -->
<GradientBrush.GradientStops>
<StaticResource ResourceKey="GradientStopCollection" />
</GradientBrush.GradientStops>
<LinearGradientBrush.RelativeTransform>
<RotateTransform x:Name="CardRotateTransform" Angle="0" CenterX=".5" CenterY=".5" />
</LinearGradientBrush.RelativeTransform>
</LinearGradientBrush>
</Border.BorderBrush>
</Border>
<Grid.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
RepeatBehavior="Forever"
Storyboard.TargetName="CardRotateTransform" Storyboard.TargetProperty="Angle" From="0" To="360"
Duration="0:0:2.5" />
<DoubleAnimation
Storyboard.TargetName="BackgroundRotateTransform" Storyboard.TargetProperty="Angle" From="0" To="360"
Duration="0:0:2.5" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Grid.Triggers>
</Grid>
</Grid>