- 博客(79)
- 资源 (3)
- 收藏
- 关注
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 图形学数学基础书籍3D Math Primer for Graphics and Game Development,Mathematics for 3D Game Programming and Co
从事Unity有些年头,很多人都卡在了图形学上,其本质原因还是因为相关的数学基础没有打牢,导致关键问题理解不了,始终处于一知半解的状态,我本人也是经过了长达一年的数学基础学习,才从根本上理解了图形学的关键基础点。比如什么各种空间变换,很多书籍就是简单的罗列出来,根本不够深入,换个情形,就完全不知道该如何构建一个变换矩阵.关键的还有透视矩阵,这个矩阵为什么是这样的,我翻过很多大部头的书籍,都没有讲明白,将透彻,从零开始的认真推导,再者,为什么要用齐次坐标系,而不是3*3的矩阵表示。这些问题,很多书籍没有透
2021-12-24 17:29:18
825
1
原创 文本波浪式跳动效果
内容太多,大家自行下载学习吧源代码和制作教程请下载附件:链接:https://pan.baidu.com/s/1hYIacL9O7TJKQ2U4Iskhzw提取码:d1rt
2021-10-27 11:44:38
113
原创 canvas 动态三角面背景
内容太多,大家自行下载学习吧源代码和制作教程请下载附件:链接:https://pan.baidu.com/s/1ZeapFVV278-ies71qmPsyQ提取码:a20e
2021-10-27 11:34:06
126
原创 canvas 粒子文字
内容太多,大家自行下载学习吧源代码和制作教程请下载附件:链接:https://pan.baidu.com/s/11Xayu0eQjp2Ajg7Y-v1e0A提取码:44rc
2021-10-27 10:54:00
86
原创 CSS js 实现火焰效果
内容太多,大家自行下载学些吧原代码和制作教程请下载附件:链接:https://pan.baidu.com/s/1lBvMMNJkHRlAhuVou1CIyw提取码:4ntf
2021-10-27 09:58:09
181
原创 CSS filter 详解 1
内容太多,大家自行下载学些吧原代码和制作教程请下载附件:链接:https://pan.baidu.com/s/1CXi2PyGumYUYPnj5i_piPg提取码:fagf
2021-10-26 16:27:27
70
原创 纯CSS实现滚轮时钟
内容太多,大家自行下载学些吧原代码和制作教程请下载附件:链接:https://pan.baidu.com/s/13wZ_2INmraysBNCb3W1iiA提取码:p6w0
2021-10-26 16:11:22
160
原创 纯CSS实现逼真翻页时钟
内容太多,大家自行下载学些吧原代码和制作教程请下载附件:链接:https://pan.baidu.com/s/1yXHy59CSAFwfsQKC0NSRVg提取码:xmer
2021-10-26 16:02:25
702
原创 纯CSS实现逼真电子钟
内容太多,大家自行下载学些吧原代码和制作教程请下载附件:链接:https://pan.baidu.com/s/1dOYJR7IKBa9X0YAKezEfdQ提取码:5gk1
2021-10-26 15:43:29
170
原创 酷炫喷射粒子进度条
内容太多,大家自行下载学些吧原代码和制作教程请下载附件:链接:https://pan.baidu.com/s/17fHcQol9ggN_SAsNVaQkdw提取码:32bj
2021-10-26 14:45:21
78
原创 canvas TV 电视 雪花噪声
内容太多,大家自行下载学些吧原代码和制作教程请下载附件:链接:https://pan.baidu.com/s/1fLB95kG24IVOx9UBcKgcQA提取码:mgb7
2021-10-26 14:24:59
87
原创 web粒子网络背景&和鼠标互动动画
内容太多,大家自行下载学些吧原代码和制作教程请下载附件:链接:https://pan.baidu.com/s/13cBRGS3zUYeNK9cYP6FV_Q提取码:ydjz
2021-10-26 11:42:41
179
原创 制作骰子动画&指定投掷数字
...内容太多,大家自行下载学些吧原代码和制作教程请下载附件:链接:https://pan.baidu.com/s/1-AIEU1yxx8Cq_r_4KCwNnA提取码:1n5g
2021-10-26 11:29:15
1224
原创 canvas 水波加载动画
原代码和详细教程请下载附件:链接:https://pan.baidu.com/s/1RwaxZ6DU4EnEtFc4Vck7Uw提取码:6nha
2021-10-25 17:59:26
111
原创 web 文字描边动画
1.目标——SVG路径动画(难度:2.5)本期我们通过SVG路径技术,实现文本的路径动画,好像文本是手写出来的感觉!同时此技术还可以应用于其他svg路径的任意图案。2.分析需求——庖丁解牛1.创建SVG字体形状的路径,我们需要借助AI或者其他美术工具。用svg的<text>标签也可以描边,但是不能随心所欲地实现想要的效果。2.使用svg属性stroke-dashar...
2018-10-17 10:11:29
855
1
原创 CSS 3D透视效果 星空穿越
1.动画——星空穿越我们想要做一个在黑色夜空中,繁星扑面而来,好像在宇宙中穿越的效果!......更多内容欢迎大家扫码订阅《躁动的web动画》,有更多精彩动画的教程和源代码,每周更新...
2018-10-16 10:34:01
1776
原创 CSS 制作骰子
1.动画——旋转的骰子我们要做一个旋转的骰子,点击按钮,让骰子旋转到特定的点数停下来!2.分析需求——庖丁解牛a.立方体特定的朝向对应着特定的旋转角度 骰子显示特定点数,无非就是旋转骰子,让特定点数的面朝向屏幕外侧b.通过自定义属性控制旋转角度 利用css属性选择器,将特定属性值和骰子旋转样式,建立一一对应关系c.通过类进行动画控制 通过添加类,删除...
2018-10-11 10:23:58
3487
1
原创 鼠标点击烟花效果
1.目标——svg烟花(难度:4.3)本期我们的目标是当鼠标点击页面时,点击处会绽开彩色的烟花. 烟花会逐渐滑落消失,滑落时会留下轨迹.烟花每个分支的形状为实心或空心的各种形状.2.分析需求——庖丁解牛1.鼠标点击页面时,需将鼠标的clientX,clientY这个窗口坐标,转换成SVG的画布坐标,以便以该坐标为中心,生成烟花2.烟花有很多,要尽量避免在文档中频繁地插入删除SV...
2018-10-10 10:10:27
1276
原创 web文字的水波效果
1.目标——SVG水波文字(难度:2.3)本期我们的目标是利用之前学习的SVG滤镜技术,实现文本被点击时,产生水波;水波从剧烈晃动,到逐渐平静的效果.2.分析需求——庖丁解牛1.水波的形态可以用我们之前学过的柏林噪声滤镜feTurbulence,结合feDisplacementMap扭曲文本像素。具体请参考《SVG滤镜(二)》2.水波的动态效果,需要我们改变噪声的频率3.水...
2018-10-09 10:48:26
589
2
原创 SVG 镂空文字
1.目标——SVG镂空文本(难度:3.0)本期我们通过SVG技术,实现文本的镂空,透过镂空的文本,我们可以看到被遮挡住的背景图片,视频,或者动画!2.分析需求——庖丁解牛我们的思路是通过SVG定义镂空文本的遮罩图案,然后使用这个图案来遮罩下层的元素,下层元素可以是普通的图片,也可以是播放的视频。.........
2018-09-25 10:03:02
1287
原创 web 毕达哥拉斯分形树
1.目标——SVG分形树(难度:3.9)本期我们的目标是通过分形算法,利用SVG绘图元素,制作一棵分形树.树可以左右摆动,变大缩小,点击会有颜色的渐变动画.2.分析需求——庖丁解牛1.分形的算法都是公开的,问题在于如何将分形的算法变成SVG元素的坐标. 可以通过数学向量的技术实现.2.分形图形一般都是一层一层的,创建图形也是由上一层计算出下一层,变色动画也可以按照层级来变化...
2018-09-21 10:42:22
675
原创 空心文字填满波浪
1.目标——SVG蒙版和图案(难度:3.2)本期我们的目标是制作一个晃动的水波逐渐将文本填充满的效果!水波会从下到上将文字填充满,随波会运动,好像是水在流淌。水波有两条波纹,体现出水的立体感。2.分析需求——庖丁解牛1.文字镂空效果,使用SVG蒙版技术实现。2.水波的效果,需要结合SVG路径,以及SVG的图案填充技术;两层水波,在团中添加两条路径就可以了3.水波的上浮效果,...
2018-09-21 09:55:15
285
原创 web文字爆炸效果
1.目标——文字爆炸(难度:4.0)本期我们的目标是制作文字爆炸动画.文字逐个炸裂成碎片,然后再从碎片还原成文字的动画!碎片会随机乱飞,旋转,变成透明,然后再还原.2.分析需求——庖丁解牛1.首先是图片如何变成碎片的,其实是用AI将文本切割成碎片,然后把SVG数据导入到HTML文件中使用2.碎片的爆炸过程,就是碎片向四处进行平移的过程,平移中碎片逐渐变成透明3.碎片的...
2018-09-20 11:06:53
538
原创 JS动画 跟踪鼠标
1.目标——看鼠标的眼睛(难度:3.6)本期我们的目标是制作一对眼睛,然后让眼珠始终盯着鼠标,随着鼠标的位置变化而移动!2.分析需求——庖丁解牛1.本例子中眼睛的制作使用普通的CSS圆角属性制作圆形即可,不算难点.2.眼睛始终看着鼠标,跟随鼠标,其实就是眼珠在眼眶的范围内,尽可能地接近鼠标,这就是算法的核心思路。。。核心算法就是尽量让眼珠的位置靠近鼠标,但活动范围...
2018-09-19 10:26:06
1120
原创 svg 低面图形的变形动画
1.目标——低面图形变形(难度:4.0)本期我们的目标是将三角面组成的低面图案,通过动画,变成另外一个低面图案.每个三角面的位置,形状和大小颜色都会连续变化,逐渐变成另外一个图案的三角面!2.分析需求——庖丁解牛1.低面图形通过美术工具TriangulateImage5和AI来制作,请参考19讲《低面图形》2.两个低面图形的三角面数量很可能不同(相同为巧合),需要重复图形...
2018-09-18 16:33:48
1024
原创 书页一样可翻折的立体文字 CSS
1.动画——翻折的字母本期我们要实现一个翻折字母的效果,看上去好像是纸板上剪纸剪出的字母形状,鼠标悬浮时可以翻转,翻转的部分具有投影,纸板被剪掉而镂空部分,露出不一样的底色,看上去更加真实!2.分析需求——庖丁解牛a.字母需要放在独立内联标签中翻折的是字母,而不是整段文本,所以需要将目标文本一个字母一个字母地放在单独的标签中,方便进行操作。另外因为透视中心的问题,内...
2018-09-18 16:28:51
722
原创 CSS 霓虹灯效果 (二)
1.动画——霓虹灯、本期我们要实现一个开关控制的霓虹灯,难度系数2.5该动画主要通过css实现,简单js代码实现开关控制霓虹灯效果. 通过盒子阴影实现立体的灯管和灯管的发光,通过文本阴影实现霓虹灯文字,结合css动画实现霓虹接触不良,或是电压不稳的效果;按钮开关主要通过组合渐变背景来实现。2.分析需求——庖丁解牛a.立体的灯管 用box-shadow的多层阴影,绘...
2018-09-18 16:23:57
1204
原创 CSS 霓虹灯效果 (一)
1.动画——霓虹灯本期我们要实现一个开关控制的霓虹灯,难度系数2.5该动画使用纯css实现,没有使用js. 通过渐变背景色技术,模拟金属拉丝的按钮,用投影技术实现霓虹灯效果。用:check和兄弟选择器实现按钮开关霓虹灯!2.分析需求——庖丁解牛a.霓虹灯的效果 利用box-shadow的多层阴影效果,制作出霓虹灯发光的效果b.按钮的金属拉丝效果 ...
2018-09-18 15:54:45
2770
原创 windows php7+nginx1.10 环境搭建
1.下载nginx 和php7 a.下载地址php下载地址:http://php.net/downloads.phpnginx下载地址:http://nginx.org/windows运行时库,vc_redist.exe下载地址:https://www.microsoft.com/en-us/download/confirmation.aspx?id=21254b.php下载选
2016-10-28 18:42:53
7080
MongoDB VUE 1.6.9
2014-07-16
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人