首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

CSS mask 实现鼠标跟随镂空效果

,最后实现效果是这样的: 进一步,还能实现任意形状的镂空效果: 鼠标经过的地方清晰可见,其他地方则是模糊的。...有兴趣的可以查看这篇文章:CSS backdrop-filter简介与苹果iOS毛玻璃效果 « 张鑫旭-鑫空间-鑫生活 (zhangxinxu.com) 文章链接:https://www.zhangxinxu.com...比如我需要一个星星⭐️的镂空效果,很简单,先通过一个绘制软件画一个。 然后把这段 svg 代码转义一下,这里推荐使用张鑫旭老师的SVG在线压缩合并工具。...CSS 完成,下面总结一下: 足够大的阴影是一个实现圆形镂空效果的小技巧 CSS 渐变也能轻易的绘制出圆形镂空背景 借助 CSS 变量可以很方便的利用鼠标位置实现想要的效果 backdrop-filter...可以想象成磨砂玻璃的功能 CSS Mask 可以给磨砂玻璃打孔,实现镂空效果 借助遮罩合成特性和SVG,可以实现任意形状的镂空效果

2.5K20

绘图- 镂空效果及其动画实现解析

前言 有时你会看到很多镂空的试图或者是镂空视图的动画效果,感觉很酷炫,其实只要掌握其中实现的原理,想实现怎样的效果就能实现怎样的镂空效果。 原理解析 UIView的maskView属性。...通过控制UIView的maskView、CALayer的mask有效区域,都可以修改UIView和 UIView的layer的显示外形,从而得到镂空或者其他的奇特形状及其动画。...使用图片作为mask可以直接获得需要显示的外形,需要注意的是这样的图片中需要展示的区域必须有像素,不需要显示的地方不可以有像素为空白,才能出效果,而且有像素的区域的透明度也会影响到最终的效果。...使用自定义形状的CAShapeLayer作为mask也可以达到使图层显示出镂空效果。同样的,图层显示出来的区域是 CAShapeLayer的外形。...maskLayer.contents = (id)[UIImage imageNamed:@"123456"].CGImage; imageV.layer.mask = maskLayer; 一个镂空进度图的分布解析

2.2K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    CSS 奇技淫巧 | 妙用混合模式实现文字镂空波浪效果

    本文将介绍一个小技巧,通过混合模式 mix-blend-mode 巧妙的实现文字的镂空波浪效果。 起因 一日,一群友私聊问我。...纯 CSS 实现波浪效果 在进入正题前,我们先复习下,使用 CSS 实现波浪,如果不是在镂空的文字内,而是在一个 div 容器内,可以使用滚动大圆的方式,类似于这样: 容器应用 overflow: hidden...+ z-index: -1; } } Oh,太糟糕了,仅仅这样是没法实现 -- 只是文字被镂空,文字内部才有波浪效果。...字体依然是黑色,波浪依旧无法进到镂空的字体中~ p { + background-clip: text; } 也就是这样: 强大的混合模式 看来此路不通,只能另辟蹊径。...当然,另外一个混合模式 mix-blend-mode: screen 也能达到类似的效果: 至此,通过混合模式,我们巧妙的实现了这样一个文字镂空的波浪效果

    99420

    iOS点击查看大图的动画效果

    今天就讲解一个查看和收起大图的动画效果,先直接看效果图: 如图所示,最开始是一个小图,点击小图可以查看大图。大图会从小图的位置和大小“弹”出来,同时背景变成半透明的阴影。...self.smallImageView]; } 注意这里我在设置小图的大小时用到了两个事先设好的常量:屏幕的高和宽,这样就会根据手机的屏幕大小来保证图片始终是居中显示的,关于这两个常量,可以查看我这篇博客:iOS...这里的动画我们使用的是最简单的iOS 7开始支持的基于block的UIView动画,在我的这篇博客中也有详细讲解:iOS基础动画教程 然后,我们初始化了阴影背景视图,并添加到界面上,此时不要忘记,要再次将大图手动推送到最上层...然后我们使用了一个延迟函数,确保在图片收缩回小图以后,再将图片移除界面,保证动画的效果。 至此,就完成了我们整个的动画了。...这个例子中图片是中规中矩地放在居中位置,你也可以试一下将小图放在其他位置,其实真实的app中很少有居中放置的,从别的地方伸缩放大缩小效果会更加有趣的。

    1.7K20

    IOS – OpenGL ES 黑白网状效果 GPUImageCrosshatchFilter

    processing : 40 filters , 图像处理相关. 3、Blending modes : 29 filters , 混合模式相关. 4、Visual effects : 25 filters , 视觉效果相关...GPUImageCrosshatchFilter GPUImage 黑白网状效果,shader 源码如下: /**********************************************...*****************************************/ //@Author:猿说编程 //@Blog(个人博客地址): www.codersrc.com //@File:IOS...– OpenGL ES 黑白网状效果 GPUImageCrosshatchFilter //@Time:2022/05/24 06:30 //@Motto:不积跬步无以至千里,不积小流无以成江海,程序人生的精彩需要坚持不懈地积累...使用 GPUImageCrosshatchFilter GPUImage 黑白网状效果,原图: **GPUImageCrosshatchFilter GPUImage 黑白网状效果效果图:**

    33230

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    活动推荐

      运营活动

      活动名称
      广告关闭
      领券