html5图标素材-如何提取html5 app中素材

html5 css3样式图标制作方法:

1、html代码:

<div id="boxes">

<div id="boxShortcode">border-radius: 40px (shortcode)</div>

<div id="box1">border-top-right-radius: 40px (same on both axis)</div>

<div id="box2">border-top-right-radius: 20px 40px (x < y) </div>

<div id="box3">border-top-right-radius: 40px 20px (x > y) </div>

</div>

2、css样式代码:

#boxes div { margin-bottom: 20px; height: 50px; padding-left: 20px }

#boxShortcode {

background: cyan;

border-radius: 40px;

}

#box1 {

background: red;

border-top-right-radius: 40px;

}

#box2  {

background: yellow;

border-top-right-radius: 20px 40px;

}

#box3 {

background: lime;

border-top-right-radius: 40px 20px;

}

3、运行结果:

如果开发者要开发应用,游戏,但自己并不擅长美工,那么只能去网上到处找素材,但网上的免费素材并不多,免费素材很少能满足开发者的需求。不过还有一个办法,我们可以从其他应用中提取素材,这些素材的质量还是比较高的。

我们就拿微信的打飞机为例,首先把微信的安装包下下来,apk文件,或者ipa文件,把后缀名改成rar,然后用winrar解压出来。

ipa解压后素材很好找,资源都放在一个目录下,直接用缩略图来找就能找到需要的图片素材,有些是单独一个对象的图片,可以拿来直接用,有些是多个对象的图片合成一张大图,这就需要对应的打包配置文件才能读取各区域的小图片,如果配置文件加密了,那么这个大图基本上没办法用。

apk解压出来素材都放在assets和res目录下,不过由于微信打飞机是做成一个jar集成在微信里面的,所以我们在assets/preload目录下可以看到一个名字带有“shoot”的jar文件,把这个jar解压出来,在res目录下可以找到一些图片素材,另外在shoot目录下可以找到打包过的图片素材,雷达下载更专业。

这些打包的图片也有对应的打包配置文件,记录了各个小图的裁剪区域,也需要用配置文件来读取图片信息。好在apk版本的配置文件并没有加密,用文本模式打开我们就可以看到配置信息,包括各个小图片的区域和名称,稍作调整支持我们常用的开发引擎,就可以拿来用了。

但并不是所有的应用都可以提取其素材,有些会把图片信息加密处理了,在加载的时候再解密出来使用,这样我们就没法盗用它的素材了。另外,如果明显盗用其他应用的素材,就会涉及到侵权了,所以开发者提取应用的素材最好以自己开发练习来用,不要光明正大的把应用发布到市场上去。

最后还是要说,成功的应用离不开优秀的美工,美工转独立开发者成功的案例很多,但程序员要自己做美工还是很有难度的,实在需要美工的话可以考虑招人或者外包出去。

这是一个示例,可以试着先在

阿里巴巴

图标将图标加入

购物车

,然后再下载代码,将文件加压后,引入文件,在i标签中class属性名为iconfont,style样式可以自定义图标的大小和颜色,这里“&#xe782;”为一个问号的代码。页面显示的为一个红色的问号。i标签做图标的好处就是将图片文字化,还有其他的方法就是通过<i>标题的伪类来显示图标,配合 ::before 或者::after伪元素实现,因为没有内容,读屏器不会朗读(这样即使有特殊处理也跳过了),机器理解起来应该也没什么影响。使用伪类的好处就是:插入的内容在页面的源码里是不可见的,只能在css里可见。