存档在 2014年6月

CSS3 text-shadow实现3D字体(Chrome浏览器)

2014年6月27日

支持浏览器

chrome,Safari 等现代浏览器支持。

3D效果预览

3D 字体

代码

h1 {
  text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}

利用CSS3动画绘制旋转环(使用chrome浏览器,不支持IE)

2014年6月27日

浏览器支持情况

Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性,Chrome 需要前缀 -webkit-。

CSS3 动画

使用 @-webkit-keyframes定义动画规则,一般使用%来表达变化。比如以下的代码就定义了名为x-spin的CSS3动画。

      @-webkit-keyframes x-spin {
        0%    { -webkit-transform: rotateX(0deg); }
        50%   { -webkit-transform: rotateX(180deg); }
        100%  { -webkit-transform: rotateX(360deg); }
      }

在定义好动画后,需要将动画绑定到选择器,并且定义动画的持续时间,如下的代码将x-spin动画绑定到了类rotate上,并且定义了动画的持续时间为7秒,动画播放次数无限,动画播放速度均匀。

      #rotate {
        margin: 0 auto;
        width: 600px;
        height: 400px;
        -webkit-transform-style: preserve-3d;
        -webkit-animation-name: x-spin;
        -webkit-animation-duration: 7s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-timing-function: linear;
      }

js动态生成子div

通过js代码来旋转生成的每个div,并附加到ring上。

U盘安装Fedora Live Desktop版

2014年6月26日

The most straightforward way to place a Fedora image on USB media using a Windows operating system is to transfer the Fedora live image to the USB device with the LiveUSB Creator tool.
Note that the dd tool discussed in Section 3.2.2, “Making Fedora USB Media in UNIX, Linux, and Similar Operating Systems” is also available for Windows. Follow the instructions in that section to use an implementation of dd for Windows operating systems. The instructions in this section assume that you will use LiveUSB Creator.

  • Download the LiveUSB Creator program for Windows from http://fedorahosted.org/liveusb-creator.
  • LiveUSB Creator can create live USB media either from an image file that you downloaded previously, as described in Section 2.1.3, “Which Files Do I Download?”, or it can download an image file from the Internet. Either:
    • click the Browse button under the Use existing LiveCD label, browse to the location where you previously downloaded a Fedora Live ISO file, and select that file.
    • select a Fedora Live ISO file from the drop-down menu that LiveUSB Creator presents under the Download Fedora label. Note that image files are large and that it is probably impractical to use LiveUSB Creator to download an image file if you do not have a broadband connection to the Internet.
  • Click Create Live USB.

CS/CF等fps游戏人物模型

2014年6月23日

一直比较好奇,像CS/CF等fps射击游戏里的游戏角色是如何仿人动作,甚至身体的各个关节弯曲状态都拟人,今天看了一篇文章,读完后基本上了解整个实现的流程,感觉很有趣,放这里备忘一下。

http://www.maya09.cn/thread-9170-1-1.html

Win 7通知栏喇叭红叉解决办法

2014年6月17日

Win7系统下,在没有插入耳机或者外接音箱时将会再音量通知图标上显示一个“红叉”,提示未插入“未插入扬声器或耳机”。关注这个问题的由来是因为我使用的是手机的耳机,当把耳机插头完全插入时只能听见背景音乐,没有了人声。前期的解决办法是把耳机插入3/4,这样也能使用,但是最近几天好像不管插入什么位置都有问题。

  • Step1:安装声卡驱动
  • 根据你声卡型号安装相应的驱动,一般驱动精灵就能解决。

  • Step2:配置
  • 依此打开:控制面板–>Realtek/lenovo高清晰音频管理器–>点击“右上角的文件夹”–>勾选“禁用前面板插孔检测”–>确定即可。我看了下

现在红叉没有了,使用手机耳机也很方便,随便插入然后能听见声音就OK了。

2014-06-17 The end!

使用CSS3美化图片显示

2014年6月10日

浏览器支持情况:Internet Explorer 10, Firefox,Chrome 和 Opera支持。
Chrome 2+(-webkit-transition)
Firefox3.7+(-moz-transition)
Safari 3.1+(-webkit-transition)
Opera 10.5+(-o-transition)

效果预览

原图(该图从网上下载)

美化后的图,美化后图片有了阴影,而且有指针hover效果。

使用的CSS 3属性

使用属性transition来实现变换效果,使用box-shadow来实现阴影。transition:all .2s ease-out分别意味着所有属性都将获得过渡效果,2秒完成,以慢速结束过渡效果。

测试代码

以下为测试的html代码,CSS加载在head中。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<title>图片测试</title>
	<style type="text/css">
	img#sd { 
		max-width:850px; 
		border:6px solid #FFF; 
		box-shadow:1px 1px 10px #666666; 
		-webkit-transition:all .2s ease-out;
		-moz-transition:all .2s ease-out;
		transition:all .2s ease-out}
	img#sd:hover {  box-shadow:2px 2px 20px #333;}
	</style>
</head>
<body>
<img id = "sd" src="./1.jpg"/></img>
</body>
</html>

Sublime Text 3中文乱码解决办法

2014年6月10日
  • Step1:安装包管理器Sublime Package Control
  • 可以通过菜单栏或者快捷键(Ctrl+~)打开控制台,输入以下代码:

    import urllib2,os; pf='Package Control.sublime-package'; 
    	ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print('Please restart Sublime Text to finish installation')
  • Step2:打开命令行模式下包安装器
  • 重启Sublime,使用菜单栏或者快捷键(Ctrl+Shift+P)打开命令行模式,输入Install Package即可搜索需要的Package

  • Step3:安装编码包
  • 输入“ConvertToUTF8”,则会自动筛选出该软件,点击安装后即可。

HTML a标签中调用js函数

2014年6月3日

通常有以下几种调用方式:

  • a href=”javascript:js_method()
  • 这是一种常用方法,但是在传递this等参数的时候容易出问题,而且javascript:协议作为a的href属性的时候不仅会导致不必要的触发window.onbeforeunload事件,在IE里面更会使gif动画图片停止播放。W3C标准不推荐在href里面执行javascript语句

  • a href=”javascript:void(0);” onclick=”js_method()
  • 这种方法是很多网站最常用的方法,也是最周全的方法,onclick方法负责执行js函数,而void是一个操作符,void(0)返回undefined,地址不发生跳转。而且这种方法不会接将js方法暴露在浏览器的状态栏。

  • a href=”javascript:;” onclick=”js_method()
  • 这种方法跟跟2种类似,区别只是执行了一条空的js代码。

  • a href=”#” onclick=”js_method()
  • 这种方法也是网上很常见的代码,#是标签内置的一个方法,代表top的作用。所以用这种方法点击后网页后返回到页面的最顶端。

  • a href=”#” onclick=”js_method();return false;
  • 这种方法点击执行了js函数后return false,页面不发生跳转,执行后还是在页面的当前位置。
    有的时候每个href里的javascript方法都用try、catch包围。

综合上述,在a中调用js函数最适当的方法推荐使用:

a href=”javascript:void(0);” onclick=”js_method()”
a href=”javascript:;” onclick=”js_method()”
a href=”#” onclick=”js_method();return false;”