喜迎
春节

实验室-一些有趣小demo汇总(今天吃啥,生日打字机...)


前言: 收集了一些有趣的网页demo,这才是程序员表达的最佳方式嘛,傲娇脸...

今晚吃啥呢?随机摇店名

总是在纠结吃什么,于是就可以…

主要原理:其实就是random一个数组,和随机摇数字的原理一样,只不过把数字改成数组的下标就可以了。
效果页面:https://nekodeng.gitee.io/demolist
源码链接:https://gitee.com/nekodeng/some-funny-demo/tree/master/what2eat

生日祝福文字打字机效果

实现生日祝福文字,打字机效果循环执行。

主要代码:

<script type="text/javascript">
var a = "HappyBirthday Bao" ;
var b = 0 ; 
setTimeout("birth()", 1000);
function birth() { 
  document.getElementById("hbbao").innerHTML = a.substring(0, b);
  if (b == a.length){ 
    setTimeout("b=0",2000);
  } 
  else{
    b++;
  }
  setTimeout("birth()", 300); 
}

效果页面:https://nekodeng.gitee.io/demolist
源码链接:https://gitee.com/nekodeng/some-funny-demo/tree/master/happybirth

纯css画的卫生巾

本来我还愁着卫生巾这玩意儿怎么玩都玩不出他那样的节操,不过我觉得我也已经把卫生巾玩到下限了。
我感觉你们应该不需要这玩意儿的,不过代码我还是放出来吧,没啥意图,勿喷哈。
然后就不放效果图了,感兴趣的去复制源码看效果。

  • css代码
.jj{width:100px;height:100px;background:#fff;border-top-right-radius:100px;border-top-left-radius:100px;border:1px solid  #000;border-bottom:none}
.jj2{width:100px;height:100px;background:#fff;border:1px solid  #000;border-top:none;border-bottom:none}
.jj3{width:100px;height:100px;background:#fff;border:1px solid  #000;border-bottom-right-radius:100px; border-bottom-left-radius:100px;border-top:none; }
.jj4{width:50px;height:80px;background:#fff;position:absolute; left:-50px;border:1px solid #000;border-bottom-left-radius:100px;border-top-left-radius:100px;border-right:none;}
.jj5{ width:50px;height:80px;background:#fff; border-bottom-right-radius:100px;border-top-right-radius:100px;border:1px solid #000;border-left:none;position:absolute;  left:100px;    }
.jian{ position:absolute; left:500px;top:200px;display:none  } 
#jianjian:hover .jian{display:block}
.jj6{ border-radius:200px / 250px;position:absolute;top:100px;left:30px;-webkit-animation:jianjian 2s ease-in;  -webkit-animation-fill-mode:forwards; -moz-animation:jianjian 2s ease-in;  -moz-animation-fill-mode:forwards;width: 60px;height: 120px;background: #9C0505;box-shadow: 0 0 60px #C20101,inset 0 0 10px #FF9B9B;  }  
@-webkit-keyframes jianjian{  
  0%   {width:0px;height:0px;left:50%;top:50%; opacity:0;}  
  100% {width: 50px;height:80px; opacity:1;}  
}  
@-moz-keyframes jianjian{  
  0%   {width:0px;height:0px;left:50%;top:50%; opacity:0;}  
  100% {width: 50px;height:80px; opacity:1;} 
} 
.jj7{-webkit-animation: bleeding 1s linear 3s infinite;-moz-animation:  bleeding 1s linear 3s infinite;width:10px;height:10px;border-radius:200px ;position:absolute;top:120px;left:40px}
@-webkit-keyframes bleeding {
0% { -webkit-transform: translate3d(0,0,0) rotate(0deg);background:#9C0505;}
100% {-webkit-transform: translate3d(0,1000px,0) rotate(360deg);}    
}
@-moz-keyframes bleeding {
0% { -moz-transform: translate3d(0,0,0) rotate(0deg);background:#9C0505;}
100% {-moz-transform: translate3d(0,1000px,0) rotate(360deg);}    
}
.jj8{-webkit-animation: bleeding2 5s ease-in 3s infinite;-moz-animation:bleeding2 5s ease-in 3s infinite;width:5px;height:10px;border-radius:200px ;position:absolute;top:170px;left:60px;}
@-webkit-keyframes bleeding2 {
0% {  height:0;background:#9C0505}
100% {height:120px}    
}
@-moz-keyframes bleeding2 {
0% {  height:0;background:#9C0505}
100% {height:120px}    
}

来源于博主:
小蝴蝶


文章作者: NekoDeng
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 NekoDeng !
评论
 上一篇
关于给hexo博客增加视频vlog页面(主要引入哔哩哔哩视频)
关于给hexo博客增加视频vlog页面(主要引入哔哩哔哩视频)
前言: 这里是博主的vlog区,博主也是B站的一名普通up🐖,欢迎观看交流。本文基于matery主题,主要引入哔哩哔哩视频。 新建视频页面 在source文件下新建一个video文件 在该文件里新建一个index.md文件,其中文件内容
下一篇 
关于给hexo博客增加音乐页面(使用Aplayer和MetingJS插件)
关于给hexo博客增加音乐页面(使用Aplayer和MetingJS插件)
前言: 作为一个音乐发烧友,一直想在博客网站里弄一个音乐播放歌单页面,现在它来了。本文基于matery主题,利用hexo-tag-aplayer插件和MetingJS实现。 新建音乐页面 在source文件下新建一个musics文件
  目录