心愿墙前端Demo

一个简单的demo,使用了诸多HTML5和CSS3的特性,比如HTML5的classList API、History API等,以及CSS3的动画、变换等等。

使用各家最新的浏览器浏览就是对的了,webkit内核的最好。

首页还是这个风格的,我发现我已经欲罢不能了。

这也算是个单页应用吧,点击start进入心愿墙页面,可以查看心愿,许愿,并且点击过的会有颜色改变现实,没有做后端,如果做好后端,那么就是一个完整的应用了。

下面是一些截图。

许愿墙页面:

鼠标滑过心愿,像纸张翻起的效果。

查看心愿的详细内容:

许愿面板:

技术上倒没有多少难度,一些技术点博客里也写过。除了引用了normalize.css之外,其余都是自己写的。

github地址,欢迎拍砖:https://github.com/zjzhome/wishwall

时间: 2024-10-30 03:16:54

心愿墙前端Demo的相关文章

前端demo工具网站

最近准备好好写博客了,写一系列前端的博客,总结下最近所学. 前端的东西总体来说是比较肤浅的,只是多而繁杂,如果后端的理论能勉强称得上是科学,前端只能说是技术,技巧,没有多少深层次的思维.这样的技巧需要很多即视的例子,看看就成,所以找了几个在线demo的例子,注册使用搞了一上午. 1.Codepen 这个网站我个人比较喜欢,比较简洁友好.我做了一个例子试下效果: 它的编辑页面如下: 做好例子之后,只要点击Share,选择Embed,点击当中的iframe生成iframe代码,拷贝下来放到自己的代码

有用的前端demo

1.给li a加一个gif new ico图标 <style type="text/css"> .icon{position:absolute;top:20px;right: 588px;line-height:15px;} </style> <li> <a href="http://doc.idouly.com/" target="_blank">开发手册</a> <em cla

BodeAbp前端介绍

BodeAbp的前端可以根据自己的喜好选型,推荐React.js.angular2.js.vue.js,后续我会以react.js为例说明BodeAbp前端的一些设计思路. BodeAbp提供的前端demo涉及到一些最新的前端技术,需要一定的学习成本.主要涉及到的技术:react.js.es6.webpack.babel.fetch等. react采用了蚂蚁金服组件库:antd 相关的学习资料: react官方文档:http://reactjs.cn/react/docs/getting-sta

微信积分墙调研

原理 微信积分墙是指主要经过微信途径传播,通过具有合作关系的微信公众号,向粉丝们展示任务墙,粉丝完成墙上的各种任务(下载安装推荐的应用.注册.填表等)即可获得各种奖励一种新型广告形式. 微信积分墙有哪些优势? 普通积分墙是InApp的.开发者需要嵌入SDK,对于AppStore上线也会受阻. 而微信积分墙用户只需关注相关的公众号即可开启任务获取奖励. 1.推广成本低,用户数量大. 2.用户操作易上手. 3.真实用户,真实数据. 4.高粘稠度与到达率. 5.无需嵌入SDK. 微信积分墙前端可以做的

前端设计师常用的一些基础工具素材合集

相信每个设计师浏览器的收藏夹都是自己的心头宝,里面收藏了很多好的工具和素材.有些时候在一些设计群里听到好多设计师在问有没有好一点的设计素材网站推荐,今天就给大家分享我在建站的过程中常用到的一些素材工具,素材包括:免费/版权图库.图标资源.色彩搭配.优秀网站欣赏,工具类包括: Web 技术教程.前端demo展示资源.前端框架.建站系统. 一.素材类 1.图片 其实国内对图片版权保护这块的意识不是很够,在免费的素材库和收费素材库都能找到同一张图片,但作者署名却都不一样.所以小编现在基本不用国内这些图

【Python系列】Python自动发邮件脚本

缘起 这段时间给朋友搞了个群发邮件的脚本,为了防止进入垃圾邮件,做了很多工作,刚搞完,垃圾邮件进入率50%,觉得还不错,如果要将垃圾邮件的进入率再调低,估计就要花钱买主机了,想想也就算了,先发一个月,看看效果再拓展吧. 脚本主要是通过Python写的,调的smtplib库,这些是基础,大家在网上一搜一大堆,今天主要给大家讲解下如何避免进入垃圾邮件系统,以及整个系统搭建时的一些思想.可能刚搞Python不久,有很多可能是错误的写法望大家提出来哈~ 配置 CentOS7.0系统 Python 3.4

广商14级软件工程团队第三次冲刺相关问题

团队博客 团队Github 第三次冲刺问题和建议 hgf520 RegionalCrimeUnit 服务器版本无法点餐 xjy-gg goidenbubble 将APP上传到应用商店. liezhihua LWHTF 将APP上传到应用商店,燃尽图用工具画 caicaihong RaiCai Github提交记录太少,无应用截图 14fzf ThroughRain 将app发布到应用商店,你们的部署文档的格式要调整一下,字体太大了 gjpg heavenfires 将app发布到应用商店 qaz

不要害怕服务端开发(一)

经历了前端技术的变更,发现我再也不想去追前端技术了,同学们做java的现在还是做java,我之前做flash的现在没饭吃了,去年改做h5,行业不好混啊,java稳如狗. 之前一直想学服务端开发,现在改变了工作环境,稍微有点时间了,加上最近上班的工作实在是闲,上头布置的游戏前端demo,用3d写了一个,然后用2d写了一个,后面又用h5写了一个. 也找不到好的形容词去形容现在的状态,因为还在试用期,所以不敢太冒进,一直停留在写demo的进度上. 昨天开始,学着用nodejs写来静态服务器. 然后今天

java彩票网站源码WAP版

后台java spring mvc架构,页面程序双分离,oracle数据库严谨数据结构.多重数据审核机制.出票机制和监控机制,html5前端技术适用移动端,后台逻辑更多以server接口可快捷实现对接pc和ap,下载会有少量图片素材丢失,附件有下载说明前端demo账户密码和后台管理地址管理员账户密码. 源码下载:http://code.662p.com/view/8038.html<ignore_js_op> <ignore_js_op> <ignore_js_op>