为了账号安全,请及时绑定邮箱和手机立即绑定

SVG实现Tooltip气泡效果

学习人数
难度级别 高级
课程时长 1小时35分
综合评分 9.8
20人评价 查看评价
9.9 内容实用
9.8 简洁易懂
9.7 逻辑清晰

简介:本课程通过html5的一系列技术制作一个SVG气泡的案例,并把生产环境中使用到的一些技术和手段一起介绍给大家。其中包括样式表调试、SVG编辑和使用、前端依赖管理、资源动态加载等。并且教会大家怎么用chrome去调试CSS和LESS

第1章 课程概览
如何使用 HTML5 技术以及一系列的工程技术来实现一个酷炫的聊天气泡?本案例手把手教你使用一些实际开发环境当中常用的工具以及手段来高效制作精彩的效果。

第2章 使用 Chrome 调试 CSS 和 LESS
CSS 大家都很熟练,但是大家调试的方法方式是否高效,太扯淡给你一个更好的选择!觉得 CSS 逼格不够高?太扯淡给你推荐更高效率的 LESS。使用 Chrome 浏览器,配合 wr 工具,轻松快速调试 LESS 样式表!

第3章 Illustrator 与 SVG
使用 Adobe 强大的矢量工具编辑 SVG 文件,如何在页面中使用到。编辑之后的 SVG 文件,如何动态加载?为了实现动态加载加入第三方工具的依赖,怎么管理这些依赖?太扯淡讲师给你娓娓道来。

讲师提示

techird JS工程师
课程须知
1、需要有一定前端知识基础(HTML/CSS/JS) 2、安装 node.js 并对 node 的包管理工具 npm 有一定的了解 3、讲师使用的编辑器是 WebStorm,可以提前安装 4、需要提前安装 Adobe Illustrator
老师告诉你能学到什么?
1、如何使⽤用 Chrome 调试样式(CSS 和 LESS)? 2、如何添加并调试 CSS3 Transition 动画? 3、如何使⽤用设计软件 Illustrator 编辑 SVG 文件? 4、如何使用 bower 管理前端包依赖? 5、如何动态加载 SVG? 如何制作任意矢量图的绘边效果?
意见反馈 常见问题 APP下载
官方微信