#免费直播课#绚丽CSS3之“谜灯卡片”

话不多说,看效果:

能学到的知识点:

  • 1、transform、perspective、
  • 2、transition
  • 3、css3倒影
  • 4、线性渐变、圆形渐变
  • 5、transitionend
  • 6、减速运动、摩擦力

今晚8点(03月21日)不见不散
 
 

往期案例《css3炫酷轮播图》

基础效果:

效果功能:

  •     1、轮播图效果
  •     2、css3特效
  •     3、轮播预览


能学到的知识点:

  • 1、循环生成方块思路
  • 2、方块运动形式算法
  • 3、transition
  • 4、transitionend
  • 5、定时器
  • 6、data-自定义属性

今晚八点(3月8号女神节),不见不散~

详情:http://apeclass.cn/article/209​


案例:《简易全屏背景切换》

效果功能:

  •     1、轮播图效果
  •     2、点击移动切换
  •     3、简易动画


能学到的知识点:

  • 1、transition运动
  • 2、延迟运动
  • 3、transform
  • 4、transitionend事件
  • 5、定时器

今晚八点(2月16号),不见不散~

详情:http://apeclass.cn/article/206​


案例《css3特效-3D动态照片墙》

线上效果:http://apeclass.cn/shows/3dimage/index.html

效果功能:

  •     1、整个照片墙跟随鼠标的位置而倾斜
  •     2、所有单个照片都是一个立方体
  •     3、鼠标移入单个方块,方块要旋转(方向随机)并放大。鼠标离开,回到原位
  •     4、鼠标移入单个方块,背景色随机变化(淡入淡出效果)


能学到的知识点:

  •     1、弹性布局
  •     2、css3实现立方体
  •     3、transform
  •     4、transition
  •     5、css3倍数选择器
  •     6、border-box盒模型
  •     7、mouseenter与mouseleave事件
  •     8、根据鼠标的位置去修改transform

 

详情点击:http://apeclass.cn/article/195

 


案例:《海棠官网——css3立体学员作品墙》

线上效果可以参见 http://apeclass.cn/1212/index.html “学员作品”板块

废话不多说,请看图~!

功能点:

1、css3动画
2、图片播放切换
3、层叠效果
4、翻页效果

涉及知识点:

1、transform

2、transition

3、transitionend

4、图片预加载功能


 

详情:http://apeclass.cn/article/153

 


案例:《css3页面抖动&立方体旋转》

功能点:

1、入场页面抖动
2、css3立方体旋转

涉及知识点:

1、animation
2、transition
3、transitionend
4、弹性布局
5、transform、rotate、translate


 

详情点击:http://apeclass.cn/article/121

 


案例:《简易javascript文字查找&替换》

功能点:

1、点击展开按钮,右侧查找与替换显示,点击查找与替换任意一个才能关闭
2、点击右侧查找与替换任意一个按钮,下面的功能块会显示
3、点击右侧与下边的查找按钮,功能块只显示查找内容
4、点击右侧与下边的替换按钮,功能块只显示替换内容
5、点击查找内容里的输入框,没有输入内容会提示,输入的内容没找到也会有提示。输入的内容找到了,会在上面把它标黄
6、替换内容区域两个框里都没内容,点击替换按钮会有提示
7、替换内容区域第一个框里没内容,会有提示
8、替换内容区域第一个框里有内容末找到,会有提示
9、替换内容区域第一个框里有内容也找到了,但是第二个框里没内容,会提示是否删除
10、替换内容区域两个框里都有内容,也能找到内容,点击后就会把原来的内容替换成第二个输入框里的内容

涉及知识点:

1、字符串的操作方法
2、数组的操作方法
3、return关键字


案例:《简易javascript文字左右移动》

功能点:

1、点击按钮后,左侧没有输入内容会有提示
2、点击按钮后,左边的数字,是移动文字的数量。右侧的数字是左边放内容的总量
3、点击按钮后,左边文字会一个一个移到右边
4、点击按钮后,左边的数字会一直增加
5、点击按钮后,进度条显示
6、点击按钮后,按钮变成灰色,不能再次点击
7、文字移动完成后,按钮可以再次点击,进度条隐藏


涉及知识点:

1、字符串操作的相关方法
2、定时器
3、清除定时器
4、选项卡原理

详情:http://apeclass.cn/article/96


 

往期案例:《仿迅雷首页》

功能点:

1、页面大图透明度切换,同时每张图上都有一个文字与按钮滑动
2、底部按钮自动播放,同时支持手动切换
3、底部信息根据鼠标滚轮滚动运动出现或者运动隐藏
4、右侧导航,鼠标放到更多上运动出来
5、导航上小圆点跟随鼠标而移动
6、鼠标离开导航后,导航消失,同时圆点也回到最初的位置


涉及知识点:

1、运动框架
2、链式运动
3、运动切换的问题
4、鼠标滚轮事件
5、事件传递

 

详情:http://apeclass.cn/article/88



 

往期案例回顾:

 

案例:原生javascript实现《win10日历效果》

废话不多说,请看图~!

涉及知识点:

1、获取日期对象
2、设置日期对象
3、如何知道这个月有多少天
4、如何获取上个月最后一天是多少号
5、如何获取这个月最后一天是多少号
6、如何获取这个月第一天是周几
7、定时器使用

详情请点击:http://apeclass.cn/article/76

 

往期案例回顾


不是干货,劈脸就揍!

这年头没点像样的案例都不好意思说自己做前端教育的!

忘记说,该效果没有借助任何框架、任何库
纯原生javascript!
纯原生javascript!
纯原生javascript!

你是不是学习前端感到枯燥无味?

或者即使学习了这么多基础知识,依然不知道可以做点什么?

跟着大神一步一步来拆解吧!

废话不多说,旁友们自己看!!


案例一:《javascript炫酷照片墙》

涉及知识点:

1、javascript事件
2、函数自执行方法
3、定时器的使用,给元素同时加定时器,实现运动时间差的效果
4、CSS3旋转、缩放、位移等知识
5、transition、transitionend的bug
6、javascript随机数
7、回调函数

案例链接:http://apeclass.cn/shows/photo_wall/index.html

学习教程:http://apeclass.cn/course/47


案例二:《canvas气泡+扇形导航效果图》

涉及知识点:

1、canvas基本操作
2、取两个数字间的随机数
3、定时器的使用
4、事件对象
5、数组方法的运用
6、CSS3的transform应用
7、速度(运动)原理

案例链接:http://apeclass.cn/shows/canvas_pop/index.html

学习教程:http://apeclass.cn/course/48


怎么样!是不是还有点意思?

其实这些效果并没有运用特别高深的知识点,可能大家看了咱们的免费课也能自己鼓捣出一二来。

Q:想不想学习如何实现的?

A:想!

请问怎么才能学习这些炫酷的案例呢?

问的好~请联系QQ:723936083 ,或直接点击报名链接https://ke.qq.com/course/149980锁定免费直播坐席!

晚上八点!晚上八点开始!

如下图:

免费!免费!免费!免费!

重要的事说四遍!

我们的金牌讲师陈学辉会在这次的直播公开课中带领大家一步一步拆解案例。

怎么拆解?

从第一个html标签开始 ( ^_^ ) 


号外!号外!

2017年新年《WEB前端全栈高级工程师特训班》招生啦~报名咨询 QQ:723936083

 《致学员的一封信》• 一家不吹牛x的培训机构到底行不行?http://apeclass.cn/article/61

从今天起,跟我们一起做一点改变。