• 展开微博窗口
  • QQ:52619941
  • 微信:cnmemory
  • 展开分类目录
  • 还没有账号?

Memory

CSS3+JS+PHP制作实时时钟

闲下来的时候就爱捣鼓些小玩意,顺便来一首经典的老歌,随意感受一下^_^,回归正题,今天给大家带来的是一款由CSS3实现的实时时钟(DEMO的链接在文本的末尾),主要的思路是利用css3的transform和animation来实现一个会走的钟摆,那么,为什么会利用到PHP呢?因为要通过animation制作一个指针转动的动画,但是在animation动画中,指针的起始点要根据实际的时间来控制,我们 […]

电子菜单系统展示

传统菜单制作成本高,工艺复杂周期长,显示的信息量小,更换非常麻烦。由此,我诞生了 采用HTML5+CSS3这样的开发设计为的是能够最大限度的节省开发成本并且实现多平台的应用,虽然该电子菜单本身的功能并不算多强大,只具有产品展示,产品介绍,价格标签等传统菜单具备的功能,然而相对于传统菜单来说,优点显而易见,那就是电子菜单更新简单,更新速度快,简单明了的界面却具备了传统菜单应有的信息,大图浏览模式更容 […]

CSS3制作3D跳动的小球

今天在网上看到一个国外写的CSS3 3D Bouncing Ball(3D反弹球),很有意思,并且实现起来也不难,于是忍不住自己也试写一遍。 大家可以先看看DEMO,http://www.im050.com/im050/memory/demo/css3-bouncing-ball.html 好玩的东西当然要大家一起分享,所以接下来我就简单讲解一下如何实现跳动的效果 <div class=”w […]

CSS3分享Animate.css

Animate.css是用CSS3编写的动画合集,拥有数十种元素入场或离场的动画效果,你只需要引入animate.css文件就可以轻松调用里面的动画,为自己的元素增加动画效果。 而我们调用的方法也很简单,首先引入animate.css <link href=”http://daneden.github.io/animate.css/animate.min.css” rel=”styleshe […]

使用CSS3制作转动的加载图标

因为代码比较简单,这里就不做过多的解释,直接贴出代码。 点我查看DEMO 下面是CSS代码: .circle-loading { width: 20px; height: 20px; border: 2px solid #27ae61; border-radius: 50%; border-bottom: 2px solid transparent; animation: loading .5s […]

详解CSS3绘制会跳动的爱心

CSS3与HTML5为网页设计提供了更多的便捷,同时丰富的动画效果也为网页增添了许多鲜活色彩,现在,让我们一起走进CSS3,学习使用CSS3的新增属性绘制一些简单的图示。 今天要教大家制作的是一个会跳动的爱心。 没了DEMO怎么行,点我查看   从图中可以看见,红色线部分所组成的就是一个爱心。 经过分析,我们将爱心的组成方法拆分开来,如下图:   图片构成的方案已经确定,接着我 […]

利用active伪类实现网页在触摸屏下的点击状态效果

在开发触摸屏下的网页时,常常会发现hover所带来的效果并不完美,在iOS系统下,hover的效果并不展现,只有当手指点击时才出现效果,并且返回页面的时候,hover的状态一直保留,所以我们需要使用active伪类来为触摸屏下的网站实现一个点击效果。 如果使用ios系统的朋友还应当有所发现,即点击按钮或链接时,会有一个高亮区域,半透明的黑色背景 那么我们如何来改变这个黑色块的样式? 在iOS设备中 […]

CSS3 图片鼠标滑过渐变为灰色

看了老赵茶馆的特色图像鼠标滑过效果,于是自己也模仿了一下,不要见怪。 更改你自己的CSS选择器以达到你想控制图片所属的范围。 .article-img img{ width: 100%; display: block; height: 100%; /* 上述设置是为了使图片自适应容器大小 */ -webkit-transition: 1.5s ease-in; -moz-transition: 1 […]