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

Memory

Trespassing

Trespassing is the second studio album by Adam Lambert, originally scheduled for U.S. release on March 20, 2012. In mid-February

一言一语

为新的主题(SimpleHome)加上了日志形式的文章,也不能称之为新,只是在GreenCatch的基础上做出了一些修改,使得各方面的布局相对统一,说实话,之前GreenCatch的风格越改越有些不伦不类的感觉,这几天比较忙,过段时间我会整理一下,将GreenCatch分享给大家~

星期五

CSS3制作3D跳动的小球

今天在网上看到一个国外写的CSS3 3D Bouncing Ball(3D反弹球),很有意思,并且实现起来也不难,于是忍不住自己也试写一遍。

大家可以先看看DEMO,http://www.im050.com/im050/memory/demo/css3-bouncing-ball.html

好玩的东西当然要大家一起分享,所以接下来我就简单讲解一下如何实现跳动的效果

<div class="wrap">
 <div class="ball">
 <div></div>
 </div>
 <div class="ballshadow"></div>
</div>

首先讲解一下结构,wrap是用来控制小球跳动的区域,ball就是小球啦,ballshadow是用来制作小球的投影,因为小球的运动和投影部分的运动(动画)效果是分开的,所以小球和投影部分要两个div来组成,而wrap设置的高度即为小球运动的高度,此时我们就可以通过top属性来很好的控制小球的位置变化。

小球运动区域CSS

.wrap {
 

一些wordpress主题制作中功能文件(functions.php)里常会用到的函数

在Wordpress主题开发过程中,会创建一个functions.php的文件来创建自定义代码,对原有功能的拓展及程序逻辑的完善,这就是Wordpress主题的功能文件。当主题被启用时,Wordpress会自动加载主题中的functions.php。

有些时候,我们在更换不同主题的过程中,会发现缺失了一些常见的功能,譬如特色图像、自定义菜单等等,因为这些东西的启用都与主题的功能文件有关,接下来我们看看如何来启用一些我们所常见的功能。

为主题添加FEED链接

add_theme_support( 'automatic-feed-links' );

为主题启用特色图像功能

add_theme_support( 'post-thumbnails' );

为主题启用文章格式功能

add_theme_support( 'post-formats', array( 'aside', 'image', 'video', 'quote', 'link' ) 

CSS3分享Animate.css

Animate.css是用CSS3编写的动画合集,拥有数十种元素入场或离场的动画效果,你只需要引入animate.css文件就可以轻松调用里面的动画,为自己的元素增加动画效果。

而我们调用的方法也很简单,首先引入animate.css

<link href="http://daneden.github.io/animate.css/animate.min.css" rel="stylesheet"  />

譬如你的

<div class="circle"></div>

需要调用名为bounce的动画,只需要

<div class="circle bounce animated"></div>

如果想要动画无限循环,再多加一个名为infinite的class

<div class="circle bounce animated infinite"></div>

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

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

此外DOM Monster还是一个开源项目,代码以托管在github,如果你想改进他,不凡试一试。

 

dbg

 

项目地址: http://mir.aculo.us/dom-monster/ 
下载地址: https://github.com/madrobby/dom-monster 

使用highlight.js为你的代码块增加高亮效果

wordpress本身有很多使代码高亮的插件,但这样一来无疑使网站的加载速度变慢,于是想说是否能够通过js来实现代码的高亮,经过一番查找,网上确实有很多此类的插件,譬如SyntaxHighlighter,这个插件虽然强大,但是对于我来说却过于繁琐,我需要的仅仅只是美观简便易用,毕竟人总有惰性,为了满足自己的需求,终于发现了一款让人满意的js代码高亮插件,那就是今天要给大家介绍的highlight.js,它不仅功能强大,而且使用便捷,你只需要三行代码就能完成全部的配置。先说说这个插件的优点:

  • 提供86种语言和49种风格
  • 自动语言检测
  • 多语言代码高亮
  • 可用于Node.js
  • 适用于任何标记语言
  • 兼容任何JS框架

接着你可以在官网http://highlightjs.org/ 自行定制你的highlight.js

通过下面三行代码,就完成了全部的配置。

<!-- 引用highlight.js的风格 -->
<link rel="stylesheet" 

详解CSS3绘制会跳动的爱心

CSS3与HTML5为网页设计提供了更多的便捷,同时丰富的动画效果也为网页增添了许多鲜活色彩,现在,让我们一起走进CSS3,学习使用CSS3的新增属性绘制一些简单的图示。

今天要教大家制作的是一个会跳动的爱心。

没了DEMO怎么行,点我查看

heart

 

从图中可以看见,红色线部分所组成的就是一个爱心。

经过分析,我们将爱心的组成方法拆分开来,如下图:heart-2

 

图片构成的方案已经确定,接着我们看看如何利用CSS3代码来实现这一的效果。

首先,我们只需要一个div来包裹这个爱心,通过简单的计算,一个美观的爱心宽高比约为1.2:1

我们创建一个宽200px,高165px的div层,并将其position设置为relative以控制子元素的定位。

.myheart {
	width: 200px;
	height: 165px

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

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

代码如下

body {
-webkit-tap-highlight-color:rgba(0,0,0,0);
}

这是我们就屏蔽了默认的点击黑色背景块的显示。然后接下来我们对我们的按钮进行一个点击设置

首先我们先设置一下CSS

body {
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
.btn {
width:100px;
height:40px;