- 博客(12)
- 收藏
- 关注
RSS订阅原创 彩色动态光效按钮
彩色动态光效按钮。利用@property自定义css属性； 并通过animation控制该属性变化，就可以让渐变背景实现旋转效果。
2023-06-30 09:55:55
150
原创 GSAP插件做的动效按钮
推荐一个强大的前端动效插件：GSAP。他的强大之处在于：非常完善。你能想到的所有前端动画，几乎都能实现。包括svg动画、canvas动画。但缺点是部分plugins是收费的，所以商用的话就要小心点了。下面是我用他的MorphSVGPlugin模块做的一个小按钮。最终实现效果视频可以看我Dou音，DY号：G_console。需要自行安装，可以看下官方文档，代码里放了链接。
2023-06-25 18:31:42
711
10
原创 css加载动画（水滴效果）
原理是先blur模糊处理，让物体边界重叠，再提高对比度，这样模糊边界就会变清晰。直接用filter自带的属性也可以实现，但调用svg滤镜效果会更好。最终实现效果视频可以看我Dou音，DY号：G_console。
2023-06-16 20:49:15
469
原创 3D版昼夜切换按钮
实现思路其实没啥好讲的，就是利用threejs把这些模型先摆好位置，然后用Tween制作动画，然后月亮变太阳的效果用到了three-bvh-csg这个组件，相当于模型布尔。我引入的CDN，所以首先要保证你有网，然后别用老掉牙的浏览器。如果资源包加载失败，可能是CDN不稳定，懂代码的可以自行调整。别的光效、背景啥的都是threejs的方法，可以对照着看下官方文档。按钮UI设计是出自Dou音用户“Cc | 且曼”发的一个视频。我用代码做的实现，并回复在他发的视频下。
2023-05-31 18:40:06
817
5
原创 3D旋转DNA效果
这是个平面模拟3D的效果，对于单个小球来说，只有位移、缩放、颜色变化。所以只用CSS就可以实现。以第一个小球动画为基准，竖向对称的另一组小球delay值为运动全程duration的1/2。而横向往后的每一组球的delay值依次递减，我设的是0.25秒。所有delay值都要设为负数，否则就真的delay了。
2023-05-24 18:40:12
508
12
原创 520礼物，svg月亮鲜花动画（二、背景）
520礼物，svg月亮鲜花动画背景。这个背景用的是three.js实现的，其实就是three官网的Example稍微改了一下，比较简单。react项目中需要安装threejs和tweenjs依赖。
2023-05-20 19:50:09
353
3
原创 520礼物，svg月亮鲜花动画（一、主体）
前几天在想520到了，要送什么礼物，最近正好又在做按钮动画。于是就做了这个月亮鲜花的svg效果。完整效果视频可以看我Dou音：userName="可乐鸡翅"。主要的实现思路就是利用svg的“stroke-dasharray”和“stroke-dashoffset”两个属性控制path线条的运动。背景的3D效果放下一篇发，这一篇文章只放svg动画的代码。而且我做了一些精简，不然那几朵花的svg代码占的太多了。
2023-05-20 19:08:23
502
3
原创 有小伙伴想要的纯原生版代码
仔细分析下这个按钮的元素可以发现除了星星，全都是圆形，云也是很多个圆组成的。那就直接用圆形去排版就好了，全部用absolute定位，调整好位置。然后星星最简单的实现方法就是用svg，path > d里面用c可以实现三次贝塞尔画路径，这样星星形状也解决了。最后布局定好之后就是动效，css>transition可以搞定所有动效。在这个基础上可以再优化，比如回弹效果，只要把ease-in-out改成自定义贝塞尔曲线就行。例如改成：transition: all 0.6s cubic-bezier(0.39,
2023-05-10 10:38:32
968
16
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人