xunyunyun

前端路上的小蜗牛

  • Home
  • Archives
  • Demo
  • About
2048小游戏
F

2048小游戏

用CSS实现16点棋盘格,用JS实现游戏逻辑。实现的2048小游戏可以在移动端和PC端兼容

照片墙
A

照片墙

由CSS3实现的动画效果:用到了box-shodaw阴影效果;绝对定位和z-index显示层级; transform中的rotate旋转角度、scale缩放倍数、skew扭曲元素;tansition实现动画。

瀑布流demo
J

瀑布流demo

其中包括三种实现方式:javascript原生实现、jQuery实现、CSS3实现瀑布流的效果。随着滚动条滚动来实现图片的动态加载。

小球滚动
A

小球滚动demo

用canvas实现的小球滚动效果,实现切换背景图片和停止滚动效果

侧边固定导航条
A

侧边固定导航条demo

实现随着网页滚动条的滚动位置来切换侧边导航条tag;及点击侧边导航条tag实现页面跳转

仿新浪微博
J

仿新浪微博

其中用到的图标为使用Bootstrap中的图标,微博图片实现了查看大图的效果

移动web相册
U

移动web相册

使用zepto.js中touch.js实现移动端的触屏事件;使用animate.css实现相册浏览时的动画效果

整站搭建
A

整站搭建

由给定的PSD图实现的整站搭建,技术点有如下:

photoshop切图、CSS Sprite、CSS对合成图的position定位、用CSS实现圆角的背景图、图片无缝滚动等。

此网站兼容IE7及以上版本。支持firefox、chrome、safari、opera。

图片循环滚动播放
J

图片循环滚动播放效果

实现了鼠标悬停,点指定tag到指定图片,向左向右切换图片效果

todolist
U

todolist

这是一个项目任务管理小应用

实现了添加、删除项目和任务,可设置任务优先级和任务截止时间,提醒用户按优先级或者任务截止时间去完成任务

此网站兼容PC端和移动端

resume
F

个人网站

根据百度前端学院完成的任务task0001

此网页由为四个分页构成,分别是index,blog,demo和ahout

这些网页的实现仅通过CSS、html实现,没有用过JS

A

局部放大demo

用canvas实现的局部方法效果,利用canvas的drawImage()函数,实现了一个局部放大的效果。

  • xunyunyun1990@163.com
  • xunyunyun
  • xunyunyun's Blog