CSS

UI制作:雨滴滑落动画、app使用阿里巴巴矢量图标库

通过本章节你能学到那些?

先来预览一下H5效果图:

UI制作:雨滴滑落动画、app使用阿里巴巴矢量图标库

这里我们主要用到了以下技术点:
1、SCSS + "阿里巴巴矢量图标库"
2、css3 flex布局
3、css3 动画
4、scss 循环遍历
5、NavigationBar兼容app/小程序
6、调用原生api(修改头部状态颜色)

下面我们来具体看看

SCSS + "阿里巴巴矢量图标库"

如何你还不会使用"阿里巴巴矢量图标库"的小伙伴,可以点这里:
阿里巴巴矢量图标库Iconfont的使用方法

h5小程序端,随便一种方法,都可以用起来,但是app端就不行了,如果引入字体,会找不到。

正确方法:
1、选择图标,下载至本地

UI制作:雨滴滑落动画、app使用阿里巴巴矢量图标库

2、解压,选择 “iconfont.css”复制到项目下“commons”下(没有这个目录新建一个)
UI制作:雨滴滑落动画、app使用阿里巴巴矢量图标库

3、修改“iconfont.css”

@font-face {
  font-family: "iconfont";
  src: url('data:application/x-font-woff2;charset=utf-8;base64...);
}
...

把,其他src都删除掉,只留下base64的即可。

4、应用 iconfont

<i class="iconfont"></i>
<!--or-->
<i class="icon iconfont icon-calendar"></i>

这里的“”、“icon-calendar”分别是"阿里巴巴矢量图标库"的 Unicode和Font Class。需要根据你选择的图标来决定。

css3 flex布局

对flex不了解的小伙伴,可以点这里:
CSS3中Flex弹性布局该如何灵活运用?

下面简单介绍一下

UI制作:雨滴滑落动画、app使用阿里巴巴矢量图标库

.dis-flex{
  display: flex;
}
.flex-item{
  flex: 1;
}

.dis-flex下没有定义.flex-item类的容器,会自动根据内容宽度自适应。定义了.flex-item类的容器,宽度等于总宽减去另外一个没有定义容器的宽度,都定义了,根据“flex: 数值”里面的数值等比分割。

css3 动画

推荐文章:如何快速上手基础的CSS3动画

剩余50%内容付费后可查看
* 请输入手机号和阅读码(忘记阅读码?
(1)

本文由 Web秀 作者:Javan 发表,转载请注明来源!

热评文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注