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

Memory

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 […]

分享一个前端性能检测的小玩意——DOM Monster

从事前端开发,使效果能够完美呈现的同时,还会遇到一个不可规避的问题,那就是性能。而DOM Monster则能够辅助你对页面的DOM进行相关的性能调试,并且使用简单,我们只需将DOM Monster添加进书签,在需要他的时候点击他,这样,他就能够替你分析出当前网页中所出现的性能问题及相应的优化方案,诸如提示减少JAVASCRIPT全局变量,某某处有多少空节点,去除他们以提高速度等等。 此外DOM M […]

使用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设备中 […]

JS判断鼠标进入或离开容器的方向做出特殊hover效果

无意中在uemo的一个子站点看到一个很动感的hover效果,经过简单分析,想必是通过JS判断鼠标进入方向来实现这个hover效果,使父容器中的子容器通过判断鼠标进入方向,从而使子容器从相同的方向“进入”到父容器中并且从鼠标离开的方向“离开”父容器。下面这一段js代码来源于网络,如果想深入了解代码的意义请跳转 http://sentsin.com/web/112.html DEMO: http:// […]

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

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