使用HBuilder编程一场流星雨，快带上Ta一起看吧~

1.打开HBuilder，右键项目管理器新建web项目

2.编辑项目名称，设置保存位置


3.接着右键刚建好的新项目，新建HTML文件


4.点击新建HTML后会出现如下页面，文件所在目录已经自动选择，不用理会，只需要编辑文件名为index.htlm即可


5.同步骤3和步骤4新建CSS文件命名位style.css


6.在index.html文件里的title标签内输入网页名，如：漫天流星雨，后在title标签下面输入林link标签链接到style.css文件


7.在body标签内输入两个div标签，并设置属性，然后在第二个div标签内输入14个div标签，并且给每一个div标签设置属性、颜色的实体


8.然后到css文件那边先用选择器编辑背景、边缘、文本颜色和流星的颜色（想要多少种颜色的流星雨就设置多少个颜色）


9.给页面设置白边的内边距，还有整个内容的文字大小；编辑body的宽、高、背景颜色和边框类型，设置盒子和容器的方向上对齐方式


10.编辑第一和第二个div的属性元素。给第一个div绝对定位，设置对齐方式、宽、边缘、平移、字体大小、字体粗细、颜色和堆叠顺序的元素；也给第二个div绝对定位，编辑宽、高、背景颜色、隐藏超出范围的部分、边框类型、盒子和容器的对齐方式、3D元素转换和让子元素不保留其3DF位置


11.给第二个div里的14个div设置属性元素，编辑绝对定位、宽、高、边框圆角、背景图像和动画效果；选择14个div的属性前后输入内容，设置绝对定位、内容为空、宽、高和背景颜色；随后分别再元素前后添加滤镜，设置成高斯模糊


12.使用@keyframes创建动画，命名down。设置0%——100%的动画效果

0% {
                transform: translateY(calc(var(--z) * 60px))
                translateZ(calc(var(--z) * 100px))
                rotate(-45deg)
                translateX(calc(var(--x) * 100px));
        }
        100% {
                transform: translateY(calc(var(--z) * 60px))
                 translateZ(calc(var(--z) * 100px))
                 rotate(-45deg)
                 translateX(calc(var(--x) * -100px));
        }


13.设置显示网站的频道，裁剪区域之外的文字，编辑颜色


14.保存好后复制web浏览器里的链接粘贴到本机浏览器中，就可以看到效果


15.效果图如下



16.效果视频呈现（手机拍摄）

（手机录制）

又学了一个撩仔的技术

冲冲冲！            

看着好复杂 学不会

太复杂，看不懂，学不废

           

很Good de