妙味茶馆

 找回密码
 注册

QQ登录

只需一步,快速开始

查看: 4236|回复: 1

妙味JS班学员:李敏【淡雅版CSS3+JS相册】作品

[复制链接]
leo 发表于 2015-10-14 16:24:28 | 显示全部楼层 |阅读模式
现在的女生学习前端越来越多,技术也是巾帼不让须眉,技术宅男们,你们要继续提高水平啦,不然你和女生们的技术一样,然后都跑去面试的话……哈哈,在招聘选择上,你懂的 ^_^


妙味JS实体班学员:李敏 结课作品之一《淡雅版CSS3相册》作品
*请用chrome浏览器获得最佳体验


进入作品,就看到一个用CSS3实现的虚拟进度条:
0.png
现在用CSS3来完成各种小动画,来取代原有的GIF图,的确是方便许多~


点击进入以后,就是一个向前翻页的动画方式,虽然弹性动画并不那么柔和,不过学了就用的感觉,应该是所有初学者的想法吧^_^:
1.png
这个界面是一个角度随机摆放的图片册,鼠标移入到左侧或右侧,可以出现“上一页、下一页”的按钮,查看更多图片。


右侧有一个菜单:
2.png
由于这个作品还没做完,就去上班了,所以暂时只做了一个功能,就是:
3.png


点完以后右侧滑入一个界面:
4.png
这里的交互是:双击其他图片,可旋转式替换到正中间的图片。


另外,导航部分也是用CSS3处理成3D效果:
5.png


虽然这个作品还没有完成(在这个作品制作的过程中,她就顺利进入 链接地产 成为了一名 “前端开发工程师”但从目前的状态来看,仍然不失为一件可被用于商用的作品,期待她完成以后的样子。


在线地址:http://2013.miaov.com/student/limin/css3object/





注:李敏 同学目前已经成功面试到 链家地产 成为一名前端开发工程师,因此作品只供学习交流,不用作求职目的。




回复

使用道具 举报

wine 发表于 2015-10-22 09:37:34 | 显示全部楼层
看起来很不错,有自己的创意和想法。不过在火狐里面看的话,有的效果不能实现,,
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|Archiver|小黑屋|妙味课堂 ( 京ICP备08102442号

GMT+8, 2019-3-22 21:55 , Processed in 0.152293 second(s), 30 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表