.site-author-image {
  display: block;
  margin: 0 auto;
  padding: 2px;
  max-width: 120px;
  height: auto;
  border: 1px solid #eee;
/* 头像圆形 */
  border-radius: 80px;
  -webkit-border-radius: 80px;
  -moz-border-radius: 80px;
  box-shadow: inset 0 -1px 0 #333 sf;
/* 设置循环动画 [animation: (play)动画名称 (2s)动画播放时长单位秒或微秒 (ase-out)动画播放的速度曲线为以低速结束
    (1s)等待1秒然后开始动画 (1)动画播放次数(infinite为循环播放) ]*/
/* 鼠标经过头像旋转360度 */
  -webkit-transition: -webkit-transform 1s ease-out;
  -moz-transition: -moz-transform 1s ease-out;
  transition: transform 1s ease-out;
}
img:hover {
/* 鼠标经过停止头像旋转
  -webkit-animation-play-state:paused;
  animation-play-state:paused;*/
/* 鼠标经过头像旋转360度 */
  -webkit-transform: rotateZ(360deg);
  -moz-transform: rotateZ(360deg);
  -webkit-transform: rotateZ(360deg);
  -moz-transform: rotateZ(360deg);
  -ms-transform: rotateZ(360deg);
  -o-transform: rotateZ(360deg);
  transform: rotateZ(360deg);
}
#home {
opacity: 0.80;
margin: 0 auto;
width: 65%;
min-width: 950px;
background-color: #fff;
padding: 30px;
margin-top: 30px;
margin-bottom: 50px;
box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}
    /*雪花css*/
    #Snow{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 99999;
        background: rgba(255,255,240,0.1);
        pointer-events: none;
    }
    /*雪花css  end*/
/*屏蔽广告*/
#site_nav_under {
    display: none;
}
.c_ad_block, .ad_text_commentbox {
    display: none;
    margin: 0;
    padding: 0;
}
#ad_under_google {
    height: 0;
    overflow: hidden;
}
#ad_under_google a {
    display: none;
}
#ad_t2{
 display: none;
    margin: 0;
    padding: 0;

}
#site_nav_under {
    display: none;
}
.c_ad_block, .ad_text_commentbox {
    display: none;
    margin: 0;
    padding: 0;
}
#ad_under_google {
    height: 0;
    overflow: hidden;
}
#ad_under_google a {
    display: none;
}


@charset "utf-8";
/* CSS Document */

/**************************************************
第一部分：所有的模板都使用的公共样式。公告样式是为了更好的向前和向后兼容。
如果不符合你皮肤的要求，你可以在后面通过更好的优先级覆盖着这些样式，但是
你不能删除这些样式。
**************************************************/
#EntryTag {
    margin-top: 20px;
    font-size: 9pt;
    color: gray;
}
.topicListFooter {
    text-align: right;
    margin-right: 10px;
    margin-top: 10px;
}
#divRefreshComments{
    text-align: right; 
    margin-right: 10px;
    margin-bottom: 5px;
    font-size: 9pt;
}
/*****第一部分结束*******************************/

/**************************************************
第二部：公共样式（全局样式）。公共会对所有页面的标签都起作用。这个部分你
可以随意的更改，并不会牵扯到其他的皮肤模板。但是每次更改都要注意你的皮肤
模板所有页面的变化。因为它们是全局的。
**************************************************/
* {
    margin: 0;
    padding: 0;
}
html {
    height: 100%;
}
body {
    background:url(https://www.cnblogs.com/images/cnblogs_com/akoasm/1297283/o_123.jpg) fixed  ;
    background-size: cover;
    background-repeat: no-repeat;
    color:#000;
    font-family: "微软雅黑","verdana","ms song","宋体","Arial", "Helvetica", "sans-serif";
    font-size: 15px;
    min-height: 101%;
    width:75em;
    margin-left:auto;
    margin-right:auto;
    z-index:0;
}

#Uleft, #Uright,#Dleft, #Dright{
    /* Firefox 4 */
    -moz-transition-property:top; 
    -moz-transition-duration:1s;

    /* Safari and Chrome */
    -webkit-transition-property:top; 
    -webkit-transition-duration:1s;

    /* Opera */
    -o-transition-property:top;
    -o-transition-duration:1s;
    position: fixed;
    width: 80px;
    height: 80px;
    line-height: 500px;
    text-align: center;
    z-index:1;
}
#Uleft{
    width: 80px;
    height: 80px;
    top:-60px;
    left: 50px;
}
#Uright{
    width: 110px;
    height: 110px;
    top: -75px;
    right: 50px;
}
#Dleft{
    bottom:10px;
    left: 10px;
    width: 200px;
    height: 200px;
}
#Dright{
    bottom:-50px;
    right: 0px;
    width: 200px;
    height: 250px;
}

#MagicArray{
    /* Firefox 4 */
    -moz-transition-property:width height bottom right; 
    -moz-transition-duration:0.5s;

    /* Safari and Chrome */
    -webkit-transition-property:width height bottom right; 
    -webkit-transition-duration:0.5s;

    /* Opera */
    -o-transition-property:width height bottom right;
    -o-transition-duration:0.5s;

    position: fixed;
    bottom:107px;
    right: 108px;
    width: 0px;
    height: 0px;
    text-align: center;
    z-index:2;
}
#Tab1{
    -moz-transition-property:fontSize width height; 
    -moz-transition-delay:0.4s;

    -webkit-transition-property:fontSize width height; 
    -webkit-transition-delay:0.4s;

    -o-transition-property:fontSize width height;
    -o-transition-delay:0.4s;

    color:#8B0A50;
    position: fixed;
    font-size: 0px;
    text-align: center;
    z-index:3;
    font-weight:500;
    text-shadow:
        -1px 0 #7A67EE,
1px #7A67EE,
        1px 0 #7A67EE,
-1px #7A67EE;
}

::selection{background:#698B22;color:#FFF;}
::-moz-selection{background#698B22;color:#FFF;}
body{cursor:url('//fq.wc.lt//up/1499563659.cur'),auto;}
A{cursor:url('//fq.wc.lt//up/1499563659.cur'),auto;}
input{cursor:url('//fq.wc.lt//up/1499563659.cur'),auto;}
wait{cursor:url('//fq.wc.lt//up/1499563659.cur'),auto;}
input{outline:medium;}
/*
//fq.wc.lt//up/1499566113.cur
//fq.wc.lt//up/1499565578.cur
//fq.wc.lt//up/1499564884.cur
*/
/*鼠标*/

table {
    border-collapse: collapse;
    border-spacing: 0;
}
fieldset, img {
    border: 0;
}
ul {
    word-break: break-all;
}
li {
    list-style: none;
}
h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: normal;
}
a:link {
    color:black;
    text-decoration:none;
}
a:visited {
    color:#111;
    text-decoration: none;
}
a:hover {
    color: #7B68EE;
    -moz-border-radius: 9px;
    -khtml-border-radius: 9px;
    -webkit-border-radius: 9px;
    border-radius: 9px;
    transition: all 0.4s linear 0s;
}
a:active {
    color: black;
    text-decoration: none;
}
.clear {
    clear: both;
}
/*****第二部分结束*******************************/

/**************************************************
第三部分：各个页面元素的样式。你可以根据需要随意的更改，并不会牵扯到其他
的皮肤模板。这个部分是最能展现你想象力的部分。其中头部和侧边栏部分是此皮
肤公共的部分。而每个页面特有的部分会有相应的注释和说明。
**************************************************/
/*****home和头部开始**************************/
#home {
    margin: 0 auto;
    width:95%;
    min-width: 60em;
}
#header {
    padding-bottom: 0.4em;
    margin-top: 0.8em;
}
#blogTitle {
    height: 7em;
    clear: both;
    border:1px solid #000;
    -moz-border-radius: 11px;
    -khtml-border-radius: 11px;
    -webkit-border-radius: 11px;
    border-radius: 12px;
    -webkit-box-shadow:5px 2px 6px #000;-moz-box-shadow:5px 2px 6px #000;padding:4px 10px;
    text-shadow:1px 1px 1px #e9f3e8
}
#blogTitle h1 {
    font-size: 300%;
    font-weight: bold;
    margin-left: 1em;
    margin-top: 0.4em;
    width: 50%;
    float: left;
}
#blogTitle h2 {
    margin-left: 6em;
    line-height: 1.5em;
    width: 50%;
    float: left;
    text-shadow:-1px 0 #ddd,
1px #ddd,
                1px 0 #ddd,
-1px #ddd;
}
#blogLogo {
    float: right;
}
#navigator {
/*    background-color: black;
    height: 30px;
    clear: both;*/

    margin-top:0.3em;
    height: 2em;
    clear:both;
    border:1px solid #999;
    -moz-border-radius: 11px;
    -khtml-border-radius: 11px;
    -webkit-border-radius: 11px;
    border-radius: 11px;
    -webkit-box-shadow:5px 2px 6px #000;-moz-box-shadow:5px 2px 6px #000;padding:4px 10px;
    background:#FFF;
    opacity: 0.60;
}
#navList {
    min-height: 1.5em;
    float: left;
}
#navList li {
    float: left;
}
#navList a {
    display: block;
    padding-left:0.5em;
    padding-right:0.5em;
    line-height:2em;
    float: left;
    text-align: center;
    border-right: 1px solid #999;
}
#navList a:link, #navList a:visited, #navList a:active {
/*    color: #ccc;*/
}
#navList a:hover {
    color: #7B68EE;
    padding-left:0.8em;
    padding-right:0.8em;
}

.blogStats {
    float: right;
    font-size:0.8em;
    color: #000;
    margin-top: 0.9em;
    margin-right: 0.2em;
    text-align: right;
}
/*****home和头部结束**************************/

/*****主页文章列表开始**************************/
#main{
    width: 100%;
    min-width: 70em;
    text-align: left;
    background:#FFF5EE;
    opacity: 0.90;
}
#mainContent .forFlow{
    margin-left: 13em;
    float: none; 
    width: auto;
}

#mainContent {
    min-height: 18em;
    padding: 0px 0px 10px 0;
    *padding-top:10px;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    
    float: right;
    margin-left: -26em;
    width: 100%
}
.day {
    min-height: 10px;
    _height: 10px;
    margin-bottom: 20px;
    padding-bottom: 5px;
}
.dayTitle {
    width: 100%;
    color: #666;

    font-weight: bold;
    line-height: 1.5em;
    font-size: 90%;
    margin-top: 3px;
    margin-bottom: 10px;
    clear:both;
    border-bottom: 2px solid #e9f3e8;
    text-align:center;

}
.postTitle {
    font-size: 150%;
    font-weight: bold;
    /*border-bottom: 1px solid #9DAAF4;*/
    float: right;
    line-height: 1.5em;
    width: 100%;
    clear:both;
    text-shadow:-3px 3px 3px #999
}
.postTitle a:link, .postTitle a:visited, .postTitle a:active {
    color: #000;
    transition: all 0.4s linear 0s;
}
.postTitle a:hover {
    margin-left: 10px;
    color: #7B68EE;
    text-decoration: none;
    text-shadow:-13px 3px 3px #999
}
.postCon {
    float: right;
    line-height: 1.5em;
    width: 100%;
    clear:both;
    padding: 10px 0;
}
.postDesc {
    float: right;
    width: 100%;
    clear:both;
    text-align: right;
    padding-right: 5px;
    color: #666;
    margin-top: 5px;
}
.postDesc a:link, .postDesc a:visited, .postDesc a:active {
    color: #666;
    padding-right: 10px;
}
.postDesc a:hover {
    color: #7B68EE;
    text-decoration: none;
}
.postSeparator {
    clear: both;
    height: 1px;
    border-top: 1px dotted #666;
    width: 100%;
    clear:both;
    float: right;
    margin: 0 auto 15px auto;
}
/*.diggit{
    text-align: center;
    width:50px;
    height:40px;
    background:url(//fq.wc.lt//up/1503755899.png);
    background-size:100% 100%;
}*/
.buryit{
    font-size:0px;
    width:0;
    height:0;
}
.burynum{
    font-size:0px;
    width:0;
    height:0;
}
/*****主页文章列表结束**************************/

/*****侧边栏开始********************************/
#sideBar {
    width: 14em;
    min-height: 14em;
    padding: 0px 0px 0px 5px;
    float: left;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    font-size:0.7em;
    opacity:0.85;
}
.counter{
}
.notice{
    font-size:xx-small;
}
.btn_my_zzk{
  display: inline-block;
  font-size: 24px;
  cursor: pointer;
  text-align: center;   
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #a55b97;
  border: none;
  border-radius: 15px;
  box-shadow: 0 4px #999;
}
.newsItem .catListTitle {
    display: none;
}
.newsItem {
    padding: 15px 0 5px 0px;
    font-weight:bold;
    font-size:14px;
    margin-bottom: 8px;
}
/**日历控件样式开始**/
#calendar {
    width: 14em;
}
#calendar .Cal {
    width: 100%;
    line-height: 1.5em;
}
.Cal {/**日历容器table**/
    border: none;
    color: #111;
}
#calendar table a:link, #calendar table a:visited, #calendar table a:active {
    font-weight: bold;
}
#calendar table a:hover {
    color: #7B68EE;
    text-decoration: none;
    background-color: #7B68EE;
}
.CalTodayDay{/**今天日期样式**/
    color: #EE82EE;
}
#calendar .CalNextPrev a:link,#calendar  .CalNextPrev a:visited, #calendar .CalNextPrev a:active {/**上个月、下个月箭头样式**/
    font-weight: bold;
    background-color: #7B68EE;
}
.CalDayHeader{
    border-bottom:1px solid #ccc;    
}
.CalTitle{/**日历年月头部样式**/
    width:100%;
    background:#FFF;
    color:black;
    border-bottom:1px solid #666;    
}
/**日历控件样式结束**/
.catListTitle {
    font-weight: bolder;
    font-family:STCaiyun;
    color:     #B03060;
    line-height: 2em;
    font-size: 150%;
    margin-top: 50px;
    margin-bottom: 10px;
    border-bottom: 1px solid #e9f3e8;
    text-align: center;
}
.catListComment {
    line-height: 1.5em;
}
.divRecentComment {
    color: #666;
    margin-bottom:1em;
}
.c_b_p_link_desc{
    color: #666;
    font-size: 30%;
    margin-bottom:1.5em;
}
#sideBarMain ul {
    line-height: 1.5em;
}
.catListEssay{
    font-weight: bolder;
}
.catListTag{
    font-weight: bolder;
}
.catList{
    font-weight: bolder;
}
.catListFeedback{
    font-weight: bolder;
}
.catListView{
    font-weight: bolder;
}
.recent_comment_title{
    font-weight: bolder;
}
.recent_comment_body{
    font-size: 30%;
}
.recent_comment_author{
    color:#666;
    font-size: 30%;
}
/*****侧边栏结束********************************/


/****查看文章页面开始*************************/
#topics {
    width: 100%;
    min-height: 18em;
    padding: 0px 0px 10px 0;
    float: left;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
}
#topics .postTitle {
    font-size: 200%;
    font-weight: bold;
    border-bottom: 1px solid #999;
    float: left;
    line-height: 1.5em;
    width: 100%;
    text-align: center;
}
.postBody {
    padding: 5px 2px 5px 5px;
    line-height: 1.5em;
    color: #000;
    border-bottom: 1px solid #8686FF;
}
#EntryTag {
    color: #000;
}
#EntryTag a {
    margin-left: 5px;
}
#EntryTag a:link, #EntryTag a:visited, #EntryTag a:active {
    color: #000;
}
#EntryTag a:hover {
    color: #7B68EE;
}
#topics .postDesc {
    float: right;
    width: 100%;
    font-size:0.9em;
    text-align: right;
    padding-right: 5px;
    color: #000;
    margin-top: 5px;
}
.feedback_area_title {
    font-weight: bold;
    margin-top: 20px;
    border-bottom: 1px solid #8686FF;
    margin-bottom: 10px;
    padding-left: 8px;
}
.louzhu {
    background:transparent url('/images/icoLouZhu.gif') no-repeat scroll right top;
    padding-right:16px;
}
.layer{
    font-family:STFangsong;
    font-size:15px;
    padding-left: 8px;
}
.feedbackListSubtitle {
    margin-left: 10px;
    color: #666;
    font-size:0.9em;
}
.feedbackListSubtitle a:link, .feedbackListSubtitle a:visited, .feedbackListSubtitle a:active {
    font-weight:bold;
    color: #666;
    font-weight: normal;
}
.feedbackListSubtitle a:hover {
    color: #7B68EE;
    text-decoration: none;
}
.feedbackManage {
    width: 160px;
    text-align: right;
    float: right;
}
.feedbackCon {
    font-weight:bold;
    border-bottom: 1px solid #ccc;
    padding: 15px 18px 20px 50px;
    min-height: 35px;
    _height: 35px;
    margin-bottom: 1em;
    line-height: 1.5em;
    width:80%;
}
#divRefreshComments {
    text-align: right;
    margin-bottom: 10px;
}
.commenttb {
    width: 320px;
}
.cnblogs_code{
}
.comment_actions{
    margin-right:30px;
    font-size:16px;
    font-family:STFangsong;
}
.comment_digg{
    font-weight:bold;
    margin-right:10px;
    font-size:15px;
    font-family:STXinwei;
}
.comment_bury{
    font-weight:bold;
    margin-right:10px;
    font-size:15px;
    font-family:STXinwei;
}
/****查看文章页面结束************************

/****列表页面开始******************************/
.entrylistTitle,.PostListTitle,.thumbTitle{/**几个分类列表的标题样式**/
    font-size: 110%;
    font-weight: bold;
    border-bottom: 1px solid #8686FF;
    text-align: right;
    padding-bottom: 3px;
    padding-right: 10px;
}

.entrylistDescription {
    color: #666;
    text-align: right;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 10px;
    margin-bottom: 10px;
}
.entrylistItem {
    min-height: 20px;
    _height: 20px;
    margin-bottom: 30px;
    padding-bottom: 5px;
    width: 100%;
}
.entrylistPosttitle {
    font-size: 110%;
    font-weight: bold;
    border-bottom: 1px solid #666;
    line-height: 1.5em;
    width: 100%;
    padding-left: 5px;
}
.entrylistPosttitle a:hover {
    text-decoration: none;
}
.entrylistPostSummary {
    margin-top: 5px;
    padding-left: 5px;
    margin-bottom: 5px;
}
.entrylistItemPostDesc {
    padding-left: 50px;
    text-align: right;
    color: #666;
}
.entrylistItemPostDesc a:link, .entrylistItemPostDesc a:visited, .entrylistItemPostDesc a:active {
    color: #666;
}
.entrylistItemPostDesc a:hover {
    color: #7B68EE;
}
.entrylist .postSeparator {
    clear: both;
    width: 100%;
    font-size: 0;
    line-height: 0;
    margin: 0;
    padding: 0;
    height: 0;
    border: none;
}

.pager {
    text-align: right;
    margin-right: 10px;
}
.PostList {
    border-bottom: 1px solid #ccc;
    clear: both;
    min-height: 1.5em;
    _height: 1.5em;
    padding-top: 10px;
    padding-left: 5px;
    padding-right: 5px;
    margin-bottom: 5px;
}
.postTitl2 {
    float: left;
    font-size:0.9em;
    color: #666;
}
.postDesc2 {
    color: #666;
    float: right;
    margin-right: ;
    font-size:0.9em;
}
.postText2 {
    clear: both;
    
}
.pfl_feedback_area_title {
    text-align: right;
    line-height: 1.5em;
    font-weight: bold;
    border-bottom: 1px solid #666;
    margin-bottom: 10px;
}
.pfl_feedbackItem {
    border-bottom: 1px solid black;
    margin-bottom: 20px;
}
.pfl_feedbacksubtitle {
    width: 100%;
    border-bottom: 1px dotted #666;
    height: 1.5em;
}
.pfl_feedbackname {
    float: left;
}
.pfl_feedbackManage {
    float: right;
}
.pfl_feedbackCon {
    color: black;
    padding-top: 5px;
    padding-bottom: 5px;
}
.pfl_feedbackAnswer {
    color: #F40;
    text-indent: 2em;
}
.tdSentMessage {
    text-align: right;
}
.errorMessage {
    width: 300px;
    float: left;
}

/****列表页面结束******************************/*/
/****相册页面开始******************************/
.divPhoto {
    border: 1px solid #ccc;
    padding: 2px;
    margin-right: 10px;
}

.thumbDescription {
    color: #666;
    text-align: right;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 10px;
    margin-bottom: 10px;
}
/****相册页面结束******************************/


/*****留言页面开始*****************************/
#footer {
    text-align: center;
    min-height: 15px;
    _height: 15px;
    border-top: 1px solid black;
    margin-top: 10px;
    padding-top: 10px;
    margin-bottom: 10px;
}
/*留言查看页面的个人信息*/
.personInfo {
    margin-bottom: 20px;
}
/*留言分页区域*/
.pages {
    text-align: right;
}
/*****留言页面结束*****************************/
/*****第三部分结束*******************************/

/**************************************************
第四部分：文章内容常用标签格式。这个部分是设置作者写作内容的部分。例如：
如果作者的文章用有p标签，则可通过这个对这些文章中的p标签进行设置。前面
的".postBody"明确的指出了这里样式的作用范围。仅仅适用于文章主体部分。
建议这个不要设置过于详细的细节。因为，一些样式，一篇文章比较适合的话，
并不能保证所有的文章都适合。
**************************************************/
/*文章内部常用标签格式*/
.postBody {
    line-height: 1.5em;
}
.postBody p,.postCon  p{
    text-indent: 2em;
    margin: 0 auto 1em auto;
}
.postBody h2{
    font-size: 150%;
    margin: 15px auto 2px auto;
    font-weight:bold;
}
.postBody h3 {
    font-size: 120%;
    margin: 15px auto 2px auto;
    font-weight:bold;
}
.postBody h4{
    font-size:110%;
    margin:15px auto 2px auto;
    font-weight:bold;
    color:#333;
}

.postBody h5{
    font-size:100%;
    margin:15px auto 2px auto;
    font-weight:bold;
    color:#333;
}

.postBody a:link,.postBody a:visited,.postBody a:active{
    text-decoration:none;
}
.postCon a:link,.postCon a:visited,.postCon a:active{
    text-decoration:none;
}
.postBody ul,.postCon ul{
    margin-left:2em;    
}

.postBody li,.postCon li{
    list-style-type:disc;
    margin-bottom:1em;
}

.postBody blockquote{
    background:url('/images/comment.gif') no-repeat 25px 0px;
    padding:10px 60px 5px 60px;
    min-height:35px;
    _height:35px;
    line-height:1.6em;
    color:#333;
}
/*****第四部分结束*******************************/

body{cursor:url('https://fq.wc.lt//up/1499563659.cur'),auto;}
A{cursor:url('https://fq.wc.lt//up/1499563659.cur'),auto;}

<script>
    window.requestAnimFrame=
        window.requestAnimationFrame||
        window.webkitRequestAnimationFrame||
        window.mozRequestAnimationFrame||
        window.oRequestAnimationFrame||
        window.msRequestAnimationFrame||
        function(callback){window.setTimeout(callback, 1000/60);};
    function work(timestamp){
        timer=requestAnimationFrame(work);
    }
    timer=requestAnimationFrame(work);
</script>
<canvas id="Canvas2" onmousedown="cg()"></canvas>
<button type="button" onclick="ADDnumlimit()">Add ball!</button><br>
<a onclick="_control()">一个完全不成熟的物理模型</a>
<script>
    window.requestAnimFrame=
        window.requestAnimationFrame||
        window.webkitRequestAnimationFrame||
        window.mozRequestAnimationFrame||
        window.oRequestAnimationFrame||
        window.msRequestAnimationFrame||
        function(callback){window.setTimeout(callback, 1000/60);};
    var cancelAnimationFrame=window.cancelAnimationFrame||window.mozCancelAnimationFrame;
    var _W=150,_H=150;
    var _ca=document.getElementById("Canvas2"),_el=_ca.getContext("2d");
    var _num=0,G=0.01,Wi=0.01,Ff=0.99,R=5,NUMlimit=1;
    var _x=new Array(),_y=new Array(),speedx=new Array(),speedy=new Array(),m=new Array(),_timer;
    _ca.width=_W;_ca.height=_H;
    /*_ca.addEventListener("mousedown",function(event){
    },false);*/
    function cg(){
        for (var i=0;i<num;i++)
        speedx[i]+=RandomReal(-5,5),speedy[i]+=RandomReal(-5,5);
    }
    var sta=0;
    function ADDnumlimit(){if(sta==1&&NUMlimit<20)NUMlimit++;}
    function max(A,B){return A>B?A:B;}
    function ADDball(){
        _x.push(RandomNum(0,_W-R*2));
        _y.push(0);
        m.push(RandomReal(3,100));
        speedx.push(RandomReal(0,4));speedy.push(RandomReal(0,4));
        for (;;){
            var i;
            for (i=0;i<_num;i++) if (dis(_x[i],_y[i],_x[_num],_y[_num])<R*2) break;
            if (i==_num) break;
            _x[_num]=RandomNum(0,_W-R*2);
        }
        _num++;
    }
    function _work(timestamp){
        if (_num<NUMlimit) ADDball();
        _el.clearRect(0,0,_W,_H);
        for (var i=0;i<_num;i++)
        for (var j=i+1;j<_num;j++)
        if ((SS=dis(_x[i]+speedx[i],_y[i]+speedy[i],_x[j]+speedx[j],_y[j]+speedy[j]))<=R*2){
            var dx=_x[i]-_x[j],dy=_y[i]-_y[j],vx,vy;
            var F=2*(dx*(speedx[j]-speedx[i])+dy*(speedy[j]-speedy[i]))/(dx*dx+dy*dy)/(1/m[i]+1/m[j]);
            //F*=(R*2-SS)*(R*2-SS)*(R*2-SS)*0.000005+1;
            var E=m[i]*(speedx[i]*speedx[i]+speedy[i]*speedy[i])+m[j]*(speedx[j]*speedx[j]+speedy[j]*speedy[j]);
            var Wx=m[i]*speedx[i]+m[j]*speedx[j];
            var Wy=m[i]*speedy[i]+m[j]*speedy[j];
            speedx[i]+=F*dx/m[i];
            speedy[i]+=F*dy/m[i];
            speedx[j]-=F*dx/m[j];
            speedy[j]-=F*dy/m[j];
        }
        for (var i=0;i<_num;i++){
            speedx[i]*=Ff;speedy[i]*=Ff;
            _x[i]+=speedx[i];
            _y[i]+=speedy[i];
            speedy[i]+=G;
            speedx[i]+=Wi/m[i];
            if (_y[i]+speedy[i]+2*R>=_H&&speedy[i]>=0) speedy[i]*=-Ff,speedy[i]-=0;
            if (_y[i]+speedy[i]<0&&speedy[i]<=0) speedy[i]*=-Ff,speedy[i]+=0;
            if (_x[i]+speedx[i]+2*R>=_W&&speedx[i]>=0) speedx[i]*=-Ff,speedx[i]-=0;
            if (_x[i]+speedx[i]<0&&speedx[i]<=0) speedx[i]*=-Ff,speedx[i]+=0;
        }
        _el.fillStyle="black";
        for (var i=0;i<_num;i++){
            _el.beginPath();
            _el.arc(_x[i]+R,_y[i]+R,R,0,Math.PI*2);
            _el.closePath();
            _el.fill();
        }
        _timer=requestAnimationFrame(_work);
    }
    function _control(){
        if (sta==1){
            cancelAnimationFrame(_timer);
            sta=0;
        }else{
            _timer=requestAnimationFrame(_work);
            sta=1;
        }
    }
</script>
<a id="O_O">O_O</a>

<canvas id="Canvas"></canvas>

<script>
    window.requestAnimFrame=
        window.requestAnimationFrame||
        window.webkitRequestAnimationFrame||
        window.mozRequestAnimationFrame||
        window.oRequestAnimationFrame||
        window.msRequestAnimationFrame||
        function(callback){window.setTimeout(callback, 1000/10);};
    s=document.getElementById("O_O");
    s.innerHTML=">_<";
    var ca=document.getElementById("Canvas"),el=ca.getContext("2d");
    var R=100,C=100,H=30,Px=50,Py=50,Pz=1,Fx=0,Fy=1,Fz=0,
    Dx=0,Dy=0,Dz=-1,DDx=1,DDy=0,DDz=0;
    var color=new Array(H),pi=Math.atan(1.0)*4,timer,count=0,Dis=new Array(_W),Ro=0.01;
    var _W=750,_H=750;
    ca.width=_W;ca.height=_H;
    function dis(ax,ay,az,bx,by,bz){return Math.sqrt((ax-bx)*(ax-bx)+(ay-by)*(ay-by)+(az-bz)*(az-bz));}
    function abs(x){return x<0?-x:x;}
    function rot(Rox,Roz){
        var a,b,c,u;
        a=Fx*Math.cos(Rox)-Fy*Math.sin(Rox);
        b=Fx*Math.sin(Rox)+Fy*Math.cos(Rox);
        Fx=a;Fy=b;
        
        a=DDx*Math.cos(Rox)-DDy*Math.sin(Rox);
        b=DDx*Math.sin(Rox)+DDy*Math.cos(Rox);
        DDx=a;DDy=b;
        
        /*
        u=Math.sqrt(Fx*Fx+Fy*Fy);
        a=Fz*Math.cos(Roz)-u*Math.sin(Roz);
        b=Fz*Math.sin(Roz)+u*Math.cos(Roz);
        Fz=a;Fx*=b/u;Fy*=b/u;
        
        u=Math.sqrt(Dx*Dx+Dy*Dy);
        a=Dz*Math.cos(Roz)-u*Math.sin(Roz);
        b=Dz*Math.sin(Roz)+u*Math.cos(Roz);
        Dz=a;Dx*=b/u;Dy*=b/u;
        */
        //alert(Fx+" "+Fy+" "+Fz);
    }
    document.onkeypress=function(ev){
        var oEvent=ev||event;
        var In=String.fromCharCode(oEvent.keyCode);
        
        //alert(In);
        
        if (In=="w"||In=="W"){
            Px++;
        }else if (In=="s"||In=="S"){
            Px--;
        }else if (In=="a"||In=="A"){
            Py--
        }else if (In=="d"||In=="D"){
            Py++;
        }else if (In==" "){
            Pz++;
        }else if (In=="z"||In=="Z"){
            Pz--;
        }else if (In=="1") rot(Ro,0);
        else if (In=="3") rot(-Ro,0);
        else if (In=="5") rot(0,Ro);
        else if (In=="2") rot(0,-Ro);
    };
    for (var i=0;i<H;i++){
        color[i]=new Array(R)
        for (var j=0;j<R;j++) color[i][j]=new Array(C);
    }
    for (var i=0;i<_W;i++) Dis[i]=new Array(_H);
    for (var i=0;i<H;i++)
    for (var j=0;j<R;j++)
    for (var k=0;k<C;k++) color[i][j][k]="";
    
    for (var j=0;j<R;j++)
    for (var k=0;k<C;k++) color[0][j][k]="black";
    /*
    for (var j=0;j<R;j++)
    for (var k=0;k<C;k++) color[parseInt(Math.sin(j/10)*30+30)][j][k]="red";
    
    for (var j=0;j<R;j++)
    for (var k=0;k<C;k++) color[parseInt((j-150)*(j-150)/300)][j][k]="blue";
    */
    
    for (var j=0;j<R;j++)
    for (var k=0;k<C;k++) color[10][j][k]="red";
    
    for (var j=0;j<R;j++)
    for (var k=0;k<C;k++) color[20][j][k]="blue";
    
    
    //alert("O_O");
    function work(){
        el.clearRect(0,0,_W,_H);
        var SS;
        for (var i=0;i<_W;i++)
        for (var j=0;j<_H;j++) Dis[i][j]=1000000000;
        for (var i=0;i<H;i++)
        for (var j=0;j<R;j++)
        for (var k=0;k<C;k++)
        if (color[i][j][k]!=""){
            var L=Fx*(j-Px)+Fy*(k-Py)+Fz*(i-Pz);
            if (L<=0) continue;
            var fx=j-Px-Fx*L,fy=k-Py-Fy*L,fz=i-Pz-Fz*L;
            //alert(i+" "+j+" "+k+" "+fx+" "+fy+" "+fz);
            var X=parseInt((fx*DDx+fy*DDy+fz*DDz)/L*5+_W/2+0.5);
            var Y=parseInt((fx*Dx+fy*Dy+fz*Dz)/L*5+_H/2+0.5);
            if (X>=_W||Y>=_H||X<0||Y<0) continue;
            //if ((SS=dis(i,j,k,Px,Py,Pz))>=Dis[X][Y]) continue;
            //Dis[X][Y]=SS;
            //alert(i+" "+j+" "+k+"   "+fx+" "+fy+" "+fz);
            el.fillStyle=color[i][j][k];
            el.fillRect(X,Y,1,1);
        }
        timer=requestAnimationFrame(work);
    }
    timer=requestAnimationFrame(work);
</script>
#back-to-top {
    background-color:wheat;
    bottom: 0;
    box-shadow: 0 0 6px ;
    color: #444444;
    padding: 2px 2px;
    position: fixed;
    right: 20px;
    cursor: pointer;
}
/*! Color themes for Google Code Prettify | MIT License | github.com/jmblog/color-themes-for-google-code-prettify */
.pln{color:#4d4d4c}ol.linenums{margin-top:0;margin-bottom:0;color:#8e908c}li.L0,li.L1,li.L2,li.L3,li.L4,li.L5,li.L6,li.L7,li.L8,li.L9{padding-left:1em;background-color:#fff;list-style-type:decimal!important;}@media screen{.str{color:#718c00}.kwd{color:#8959a8}.com{color:#8e908c}.typ{color:#4271ae}.lit{color:#f5871f}.pun{color:#4d4d4c}.opn{color:#4d4d4c}.clo{color:#4d4d4c}.tag{color:#c82829}.atn{color:#f5871f}.atv{color:#3e999f}.dec{color:#f5871f}.var{color:#c82829}.fun{color:#4271ae}}

/*下面是我设置背景色，字体大小和字体*/
.cnblogs-markdown code{
background:#fff!important;
}
.cnblogs_code,.cnblogs_code span,.cnblogs-markdown .hljs{
    font-size:16px!important;
}

.syntaxhighlighter a, .syntaxhighlighter div, .syntaxhighlighter code, .syntaxhighlighter table, .syntaxhighlighter table td, .syntaxhighlighter table tr, .syntaxhighlighter table tbody, .syntaxhighlighter table thead, .syntaxhighlighter table caption, .syntaxhighlighter textarea {
    font-size: 16px!important;
}

.cnblogs_code, .cnblogs_code span, .cnblogs-markdown .hljs{
font-family:consolas, "Source Code Pro", monaco, monospace !important;
}