CocosCreator之KUOKUO带你修改web打包后loading页面

引擎版本:2.0.7

编辑工具:VsCode

目标:修改web打包后加载页面

小伙伴们应该都知道,h5打包后的包体有个加载页面。就是这个。

那么,我们能不能自定义呢?答案是肯定的。

实际上就是html+css所为我们呈现的页面。

首先。

第一步:改名字。

在打包后的文件夹里有个index.html

title标签里的就是。

对应这里

也就是浏览器的标签页标题。

第二步:改图片。

这里我有一张自己的图片:kk.png

然后,在style-mobile.css中,我们找到#splash这里:

修改后:

然后,我们看url前面的颜色之前是#171717.

那就是背景色,我们选个喜欢的颜色。

看!背景色和图片已经更改。

(我圈出来的进度条就是我们下一步要修改的。)

接下来!

第三步:修改进度条。

首先是进度条外框相关,在颜色最后加两个0,就是透明度为0(小伙伴们可以改成自己喜欢的颜色)

我不太喜欢,所以把阴影删除,如下图。

(伙伴们一定要随便打包一个,自己动手改一改哦。)

然后是进度条的圆角与上边外发光。这里我就是把圆角改大点。

第四步:进度条内容填充。

我们把角度改成90度试试:

 会是这样:

然后看看那个渐变样式,linear-gradient

我删除后:

接下来就是动画:

都是CSS相关知识。

推荐一个网址:

然后我修改为渐变动画:

最终效果:

 

好了,本期分享结束。

好玩吧!O(∩_∩)O~~

 

加我QQ群:(博客里面的项目,群文件里都有哦)

706176551

我们一起学习!

 

O(∩_∩)O~~

  • 2
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
回答: 在Cocos Creator中,常用的设计模式括子弹工厂模式、单例模式和建造者模式。子弹工厂模式是通过工厂来创建子弹节点,根据提供的子弹种类、速度和方向来自动创建子弹节点并返回,实现了代码的精简和灵活性。\[1\]单例模式用于创建一个全局唯一的实例,可以在整个应用程序中共享和访问该实例,避免了多次实例化的问题。\[2\]建造者模式用于创建复杂的对象,通过将对象的构建过程分解为多个步骤,使得对象的构建更加灵活和可扩展。\[3\]这些设计模式在Cocos Creator中可以帮助开发者更好地组织和管理代码,提高开发效率和代码质量。 #### 引用[.reference_title] - *1* [CocosCreator进阶实战第四部分:工厂模式](https://blog.csdn.net/kuokuo666/article/details/103722679)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [设计模式---创建型模式(工厂模式、抽象工厂模式、单例模式、建造者模式、原型模式)](https://blog.csdn.net/sinat_36499762/article/details/115624011)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

KUOKUO众享

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值