先看一下效果吧:
原博主的地址:【动画进阶】神奇的卡片 Hover 效果与 Blur 的特性探究 – ChokCoco – 博客园 (cnblogs.com)
原效果是一个css效果,我们采用WPF的方式模仿一下
因为技术有限,没有原博主的那么好看,毕竟盗版永远比不过原版…
然后这里看一下盗版的怎么写吧
先是拿到原版的图片(原博客里面有图片地址),当然也可以自己挑一张自己喜欢的图片,把图片保存到自己的WPF项目下面
再把图片运用到代码里面去,给一个border的背景设置成图片,再给border设置一个圆角,就会得到一个圆角的图片
<Grid> <Grid x:Name="gd1" Height="400" Width="300"> <Border Margin="50" CornerRadius="30"> <Border.Background> <ImageBrush ImageSource="08.jpg"/> </Border.Background> </Border> </Grid> </Grid>
然后再给图片添加一个模糊效果
模糊效果的实现就是在图片的下面一层添加一个同样的border,但是设置不同的margin,让它比正常显示的图片大一圈
<Grid x:Name="gd1" Height="400" Width="300"> <Border CornerRadius="30" Margin="18"> <Border.Effect> <BlurEffect Radius="20"/> </Border.Effect> <Border.Background> <ImageBrush ImageSource="08.jpg"/> </Border.Background> </Border> <Border Margin="50" CornerRadius="30"> <Border.Background> <ImageBrush ImageSource="08.jpg"/> </Border.Background> </Border> </Grid>
红色部分就是添加的模糊层,添加以后就会得到下面的效果
然后最重要的就是剩下的hover效果了:
我们先准备一个背景色,原版的背景色我不知道怎么实现,所以只能用不同的背景色做为底色了
把这个背景放到最下面就会得到下面的效果(这里遇到个问题,不知道怎么把超出border以外的虚化效果裁掉,导致border以外也有一点点的模糊效果)
(原博是通过设置外层的overflow: hidden; 来实现的,但是我不知道wpf怎么实现这个效果,查了半天也没查到)
代码如下,就是就是一个带有渐变色的border
<Grid x:Name="gd1" Height="400" Width="300"> <Border x:Name="bd2" BorderThickness="2" Visibility="Hidden" CornerRadius="30" Margin="15"> <Border.BorderBrush> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FF43D4F9"/> <GradientStop Color="#FFDF07FD" Offset="1"/> </LinearGradientBrush> </Border.BorderBrush> <Border.Clip> <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/> </Border.Clip> <Border CornerRadius="30" Opacity="0.7"> <Border.Background> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FF43D4F9"/> <GradientStop Color="#FFDF07FD" Offset="1"/> </LinearGradientBrush> </Border.Background> </Border> </Border> <Border CornerRadius="30" Margin="18"> <Border.Effect> <BlurEffect Radius="20"/> </Border.Effect> <Border.Background> <ImageBrush ImageSource="08.jpg"/> </Border.Background> </Border> <Border Margin="50" CornerRadius="30"> <Border.Background> <ImageBrush ImageSource="08.jpg"/> </Border.Background> </Border> </Grid>
然后就是实现hover效果,在实现hover效果以前先给bd2添加一个clip效果
UIElement.Clip 属性 (System.Windows) | Microsoft Learn
关于clip的解释,可以看一下微软对于clip效果的说明
<Border.Clip> <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/> </Border.Clip>
把这段代码放到明为bd2的border下面就可以了
但是还需要一些后台代码,控制一下这个clip的移动,我们给最外层的名为gd1的grid添加几个事件
public MainWindow() { InitializeComponent(); gd1.MouseMove += MainGrid_MouseMove; gd1.MouseLeave += Bd1_MouseLeave; gd1.MouseEnter += Bd1_MouseEnter; } private void Bd1_MouseEnter(object sender, MouseEventArgs e) { bd2.Visibility = Visibility.Visible; } private void Bd1_MouseLeave(object sender, MouseEventArgs e) { bd2.Visibility = Visibility.Hidden; } private void MainGrid_MouseMove(object sender, MouseEventArgs e) { //这里获取一下鼠标的坐标,然后让clip效果的中心跟着鼠标中心移动 Point mousePosition = e.GetPosition(gd1); eg1.Center = new Point(mousePosition.X, mousePosition.Y); }
然后我们让默认情况下bd2的 Visibility=”Hidden”
效果就完成了…
如果有更好的解决办法,可以和我联系哦。
项目github地址:bearhanQ/WPFFramework: Share some experience (github.com)
QQ技术交流群:332035933;
欢迎进群讨论问题,不论是winform,还是wpf,还是.net core的,还有很多萌妹.
1.本站内容仅供参考,不作为任何法律依据。用户在使用本站内容时,应自行判断其真实性、准确性和完整性,并承担相应风险。
2.本站部分内容来源于互联网,仅用于交流学习研究知识,若侵犯了您的合法权益,请及时邮件或站内私信与本站联系,我们将尽快予以处理。
3.本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
4.根据《计算机软件保护条例》第十七条规定“为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬。”您需知晓本站所有内容资源均来源于网络,仅供用户交流学习与研究使用,版权归属原版权方所有,版权争议与本站无关,用户本人下载后不能用作商业或非法用途,需在24个小时之内从您的电脑中彻底删除上述内容,否则后果均由用户承担责任;如果您访问和下载此文件,表示您同意只将此文件用于参考、学习而非其他用途,否则一切后果请您自行承担,如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。
5.本站是非经营性个人站点,所有软件信息均来自网络,所有资源仅供学习参考研究目的,并不贩卖软件,不存在任何商业目的及用途
暂无评论内容