展开

关键词

用 Effect 实现线条

前言 几个月前 ChokCoco 大佬发布了一篇文章: CSS 奇技淫巧 | 妙用 drop-shadow 实现线条 在文章里实现了一个发的心形线条互相追逐的: 现在正好有空就试试用 WPF 图标字体 在 Blend 中创建 Path 计算 Path 的长途 Path 的边框动画 VisualStudio 的设计时数据支持 自定义 Effect 这篇文章将讲解如何使用这些知识和技巧模仿他的动画 自定义 Effect 在 WPF 中要做发通常都是用 DropShadowEffect ,例如这样: <Path x:Name="P1" > <Path.Effect> < 为了解决这个问题,其中一种做法是叠加多个 Path,这样它们的 Drop Shadow 也会叠加起来,实现一个很亮的发。但是这里会需要对叠加的多个 Path 都做动画,恐怕性能会很有问题。 我不知道这种叫什么名字,但因为它最终实现了发,所以命名为 GlowEffect。

8610

CSS 奇技淫巧 | 妙用 drop-shadow 实现线条

本文将介绍一种利用 CSS 滤镜 filter 的 drop-shadow(),实现对 HTML 元素及 SVG 元素的部分添加阴,以实现一种酷炫的,用于各种不同的场景之中。 () 以及 SVG 元素配合 filter: drop-shadow() 生成的 使用 WebGL 实现的线条 Neon 动画 某天在逛 CodePen 的时候,发现了一个非常有意思的,使用 WebGL 实现的线条 -- NEON LOVE,非常的有意思: 但是由于源代码是使用 WebGL 完成,绘制如此简单的一个,通过 GLSL 着色器等代码,接近了 300 行。 : 完整的代码,你可以猛击 -- CSS 灵感 - SVG 配合 drop-shadow 实现线条 扩展延伸 当然,掌握了上述的技巧后,还有非常多有意思的我们可以去探索实现的,这里我简单的抛砖引玉 其中一大类是运用于按钮之上,可以实现按钮带的按钮,下图是其中一个的示意,巧妙运用 stroke-dashoffset,它可以有非常多的变形: 完整源代码可以猛击 CodePen -- Neon

10920
  • 广告
    关闭

    腾讯云618采购季来袭!

    一键领取预热专享618元代金券,2核2G云服务器爆品秒杀低至18元!云产品首单低0.8折起,企业用户购买域名1元起…

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

    canvas多重阴

    canvas多重阴 前言 在一个项目中,客户提了一个发图如下: image.png 阴 有的人可能会说,这个用阴其实就可以实现。 但是从图中可以看出,是一个比较强烈的发。实际的应用过程中我们会发现用简单阴参数实现的很难达到这样强烈的发。 多重阴 如何达到具有较强的阴强度,又有较好的阴扩散度呢?也就是实现这种比较强烈的发。嗯,答案就是使用多重阴。 image.png 从图中可以看出, 阴有较好的扩散程度,也有较好的强烈度。 下面是用多重阴实现的文字霓虹灯,同样可以看出有较好的发。 ? 总结 可以看出要达到强烈的发, 需要使用多重阴功能。当然使用多种阴也不是没有限制的, 因为阴本身有很大的性能损耗。通过尝试我们发现一般3~5次之间就能够达到较好的吧。

    20730

    canvas多重阴

    canvas多重阴 前言 在一个项目中,客户提了一个发图如下: [11a5244567254f45a7cc45a698e9ee4d~tplv-k3u1fbpfcp-zoom-1. 但是从图中可以看出,是一个比较强烈的发。实际的应用过程中我们会发现用简单阴参数实现的很难达到这样强烈的发。 多重阴 如何达到具有较强的阴强度,又有较好的阴扩散度呢?也就是实现这种比较强烈的发。嗯,答案就是使用多重阴。 所谓多重阴,使用阴对图形进行多次绘制,多次绘制的过程中,shadowBlur的值会不一样,这样可以形成多个阴叠加的。 下面是一个简单的示例,代码如下。 下面是用多重阴实现的文字霓虹灯,同样可以看出有较好的发

    34600

    LayaAir2.7物理引擎大幅升级并新增cannon物理引擎支持,强化3D,新增vivo平台引擎共享插件,强化3D插件

    另外,本次更新还进一步增强了3D的渲染,强化了LayaAir的Unity 3D资源导出插件的功能。 关于小游戏平台的加载率方面,LayaAirIDE中新增了vivo平台的LayaAir引擎共享插件支持。更多本次版本的详细说明,我们在下面的篇幅中,会逐个详细进行介绍。 light相关灯设置暂不支持导出,需要在引擎内单独设置。 增加iOS纹理压缩的等级设置(高质量图片的导出会非常消耗时间),大家可根据需要设置即可。 3D渲染增强 在本次的版本中,我们还增加了聚灯阴SpotMap渲染管线,开发者不仅可以使用LayaAir引擎中提供的聚灯实时阴,还可以自定义实现聚灯阴。 并且增加了spotShadow的宏来控制阴质量,用以提升渲染。 LayaAir-IDE支持vivo平台引擎插件导出 LayaAir引擎插件是小游戏平台为了提升加载率的一种方案。

    64730

    是在舞台全场黑暗的情况下用柱来突出角色或其他特殊物体,还可以通过操控源来跟随人物移动。 追主要用来突出角色主体以及主体和环境的关系,在游戏中可以用来营造沉浸式氛围以及聚焦玩家视线焦点 ? ( gif 有损压缩,建议通过下方二维码预览) 实现思路 根据实际可以提炼出3个功能点:圈的形状和大小可控,圈的边缘虚化,圈可操控移动。 上面的代码段应用在正方形的纹理中可以得出一个正圆,但是如纹理不是正方形,上面出来的会是一个椭圆,因为在shader中无论纹理的真实宽高是多少,它的x,y变化范围都是0~1,是比例的变化。 生成正圆 但是这样的圆的边缘是有锯齿的,而且追需要圈的边缘虚化,所以我们需要借助另外一个内置插值函数smoothstep(min, max, x),它能够返回一个在输入值之间平稳变化的插值,以此来达到边缘羽化的

    28520

    Shader 特 —— Film Burn (炫晕)【GLSL】

    再炫的特没有声音也是不完整的~ Shader 特 —— Film Burn.mp4 图 该特可以分为以下 5 种的融合。   大 Blob 的 结合代码可知,这其实就是二维 sin*cos 的。 对纹理坐标增加了点随机性并随着 progress 移动后的如下 相应代码和注释如下 /// @note 大 Blob /// 增加一点随机性,改变每个 blob 的形状 f 6.0) + ///< 响 blob 的大小 (progress * 6.0)) + ///< 响 blob 的速度 大 Blob & 小粒子 随着 Progress 的变化 从上图中可以看出该是 “从无到有再到无” 的一个过程。

    1K11

    镜面

    镜面上扫过一道泽是UI里面很常用的一种特,通常用来强调某个物体或者凸显物体的“稀有”价值,比如卡片中扫过一道芒等 ? demo 实现思路 根据这个的实际需求,可以提取到两个关键点,一个是路的生成,一个是路随着时间进行偏移。 直线的斜截式方程是y = kx + b,假设斜率k为1,那路的区域就可以表示为:x >= -y 和 x <= -y + width,其中width就是我们定义的路的宽度,有了区域之后我们只需要让符合该区域的像素点色彩叠加点变化就可以实现路的 >= -v_uv0.y && v_uv0.x <= -v_uv0.y + width) { color *= strength; } gl_FragColor = color; } 路随着时间的偏移 ,我们还可以去调整一下路的斜率,如需要多条路的话,也可以多复制几个不等式组加上不同的偏移距离和宽度就可以了。

    21520

    移动残

    demo 实现思路 投到多个画布 “白玉无冰”的这张图解析得很清晰,我们在实现的时候会在移动的角色中新建一个独立摄像机的子节点,专门拍摄需要移动的角色,然后投到五个不同透明度的Sprite中。 当角色移动的时候,我们也让作为残的五个Sprite,分别有延迟地移动到角色当前的位置,这样子在视觉上就有五个残在跟随了。 ? Sprite节点们分别做一个延时移动,带出”残。 在现代的语言中,浮点数计算是有误差的,dis的结是通过向量计算得出的,经过了加减乘除,中间的计算过程肯定产生了浮点数,它产生出来的结肯定也是有误差的,大家可以在控制台把dis变量打印出来,你会发现, 每次静止的时候,理论上静止了,dis的结应该为0,但是实际上有可能每次产生的dis值都是不一样的,可能是0也有可能是0.0001234、0.1222222等等,但是这个值我们已经可以认为它们已经静止了

    23830

    canvas可视化之内阴

    canvas可视化之内阴 楔子 在之前的一个轨道交通可视化项目中,运用到了很多绘制技巧。 .image] 图中的轨道,就同时存在外发和内发。 外发 我们知道外发是很容易实现的,直接通过设置阴即可达到。 比如我们随便绘制一条线段,加上阴,看起来就是外发: ctx.clearRect(0,0,canvas.width,canvas.height); ctx.shadowBlur 默认的阴,我们称之为外阴,意思都是图像向往展开的阴。 内阴 接下来的问题可能就变得有点难度。如我们需要如下的一个内阴呢?

    42210

    canvas可视化之内阴

    canvas可视化之内阴 楔子 在之前的一个轨道交通可视化项目中,运用到了很多绘制技巧。 可以参考 之前的一篇文章 《利用canvas阴功能与双线技巧绘制轨道交通大屏项目》 image.png 图中的轨道,就同时存在外发和内发。 外发 我们知道外发是很容易实现的,直接通过设置阴即可达到。 比如我们随便绘制一条线段,加上阴,看起来就是外发: ctx.clearRect(0,0,canvas.width,canvas.height); ctx.shadowBlur 默认的阴,我们称之为外阴,意思都是图像向往展开的阴。 内阴 接下来的问题可能就变得有点难度。如我们需要如下的一个内阴呢?

    32040

    Shader-物体发

    i.worldPos.xyz); float cosValue = dot(worldNormal, viewDir); //cos值大于阈值时不实现自发 } return col + _SelfColor * (1-cosValue)*_Strength; } 外发: 内发与泛.PNG Shader "Unlit/SelfLight" { Properties { _MainTex ("Texture", 2D) = "white" i.worldPos.xyz); float cosValue = dot(worldNormal, viewDir); //cos值大于阈值时不实现自发

    85820

    Shader-物体发

    内发: 将物体边缘 ! i.worldPos.xyz); float cosValue = dot(worldNormal, viewDir); //cos值大于阈值时不实现自发 } return col + _SelfColor * (1-cosValue)*_Strength; } ``` 外发: [内发与泛.PNG](https://upload-images.jianshu.io/upload_images/11173460-4f543ba5cf86a909.PNG? i.worldPos.xyz); float cosValue = dot(worldNormal, viewDir); //cos值大于阈值时不实现自发

    68360

    CSS3卡片

    我们今天要使用CSS3实现下面这样的卡片: ? ---- 实现 首先给出HTML结构:

    然后给出初始的CSS结构: .hover-light{ width: 250px 要实现卡片照的,我们需要添加子元素,此时使用伪元素::after是最好的选择。 我们需要给::after添加一个斜着的渐变来模拟,这里我们使用从左到右的渐变,然后再给一个倾斜的形变就可以模拟了。最好再给一个简单的悬浮动画就完事了。 进阶 上面已经完成,其实CSS3的形变投等功能组合起来可以实现更好的,我们现在添加样式,给父元素也添加一个动画的: .hover-light{ /*...

    75240

    Android 滑动进阶篇(六)—— 倒

    上篇介绍了使用Animation实现3D动画旋转翻页,现在介绍图片倒实现,先看图 本示例主要通过自定义Gallery和ImageAdapter(继承自BaseAdapter)实现 1 、倒绘制 ImageAdapter继承自BaseAdapter,详细实现可见 Android 滑动入门篇(二)—— Gallery 这里重点介绍倒原理及实现 倒原理: 倒是主要由原图+间距 paint.setXfermode(new PorterDuffXfermode(Mode.DST_IN)); // 倒遮罩 canvas.drawRect(0, height, width, bitmapWithReflection.getHeight() + reflectionGap, paint); // 绘制倒的阴 ImageView imageView Android中图片倒、圆角重绘

    31910

    css背景阴部分【样式

    持续更新 文字 ? text-shadow: 5px 5px 5px #0000CC;/*右偏移 下偏移 阴背景模糊*/ 块阴 ? box-shadow:2px 5px 12px #3B2E32;/*设置块阴 水平位移 垂直位移 模糊半径 */

    64520

    webgl实现发线框(glow wireframe) 要实现发

    在之前这篇文章, WebGL 单通道wireframe渲染 我们介绍了webgl如何实现单通道wireframe的。 本篇文章就是在此技术原理基础之上,来实现发的wireframe。 要实现发 所谓的发,就是颜色的渐变。 渐变越慢,发越明显,渐变越快,发越不明显。 但是由于这种渐变的不够慢,所以 发不是很明显,因此我们可以改进如下,把渐变的参数通过pow函数进行处理,代码如下: float interopter = edgeFactor3(); 如模型替换成球形,如下: ? 加载模型的如下: ? 替换成模型,如下: ? 如结合混合模式中的相加混合,加上多个模型的叠加,可以得到更明显的发叠加的,此种经常用于智慧园区,智慧楼宇中楼宇的发呈现。

    71420

    Shader开发-LOGO闪

    条 ? 闪带 ? LOGO闪 hader "Custom/LeiChaoOne" { Properties{ _MainTex("Texture", 2D) = "white //设置左边界 xBottomLeftBound = x0 - xLength; //投至 xProjL; xProjL = (uv.y) / tan(angleInRad); //此点的左边界 = 底部左边界 - 投至 xPointLeftBound += offX; xPointRightBound += offX; //如该点在区域内

    27930

    Android实现闪

    本文实例为大家分享了Android实现闪的具体代码,供大家参考,具体内容如下 一、声明闪灯的权限 <uses-permission android:name="android.permission.CAMERA import android.view.View; import android.view.View.OnClickListener; import android.widget.Button; /** * 闪<em>光</em>灯的控制 Override public void onClick(View v) { isShanshuo = false; openFlicker.setEnabled(true); } }; /** * 打开闪<em>光</em>灯 Parameters.FLASH_MODE_TORCH); camera.setParameters(parameters); } catch (Exception e) { e.printStackTrace(); } } /** * 关闭闪<em>光</em>灯

    58130

    相关产品

    • 腾讯HR助手

      腾讯HR助手

      腾讯HR助手是行业内 HR 产品化的创导者和先行者,经过腾讯内部10年打磨的应用平台,覆盖企业运作多种场景,可以快速提升企业管理效率和效果…...

    相关资讯

    热门标签

    扫码关注云+社区

    领取腾讯云代金券