开源中国愚人节特效存档

OSC愚人节首页的特效存档

1
2
3
//主要的css样式
.shake{display:inherit;transform-origin:center center;animation-name:shake;animation-duration:8s;animation-timing-function:ease-in-out;animation-iteration-count:infinite}@keyframes shake{2%{transform:translate(-2px,10px) rotate(0.5deg)}4%{transform:translate(-8px,-1px) rotate(-2.5deg)}6%{transform:translate(0px,-2px) rotate(-2.5deg)}8%{transform:translate(-8px,-5px) rotate(2.5deg)}10%{transform:translate(-4px,-3px) rotate(1.5deg)}12%{transform:translate(-8px,10px) rotate(1.5deg)}14%{transform:translate(3px,10px) rotate(1.5deg)}16%{transform:translate(7px,9px) rotate(-1.5deg)}18%{transform:translate(-9px,2px) rotate(0.5deg)}20%{transform:translate(7px,5px) rotate(-1.5deg)}22%{transform:translate(-8px,4px) rotate(-2.5deg)}24%{transform:translate(-2px,9px) rotate(-0.5deg)}26%{transform:translate(-3px,-9px) rotate(-2.5deg)}28%{transform:translate(-1px,-6px) rotate(3.5deg)}30%{transform:translate(-2px,10px) rotate(0.5deg)}32%{transform:translate(7px,3px) rotate(-2.5deg)}34%{transform:translate(3px,-6px) rotate(-1.5deg)}36%{transform:translate(5px,-7px) rotate(1.5deg)}38%{transform:translate(8px,10px) rotate(3.5deg)}40%{transform:translate(-3px,-1px) rotate(2.5deg)}42%{transform:translate(-7px,8px) rotate(1.5deg)}44%{transform:translate(-6px,-2px) rotate(3.5deg)}46%{transform:translate(-4px,8px) rotate(3.5deg)}48%{transform:translate(-6px,-5px) rotate(1.5deg)}50%{transform:translate(10px,5px) rotate(-2.5deg)}52%{transform:translate(-2px,-9px) rotate(-2.5deg)}54%{transform:translate(5px,-7px) rotate(-1.5deg)}56%{transform:translate(10px,-6px) rotate(-0.5deg)}58%{transform:translate(-3px,8px) rotate(2.5deg)}60%{transform:translate(7px,-6px) rotate(2.5deg)}62%{transform:translate(-8px,6px) rotate(-2.5deg)}64%{transform:translate(10px,6px) rotate(-1.5deg)}66%{transform:translate(-2px,-1px) rotate(3.5deg)}68%{transform:translate(9px,5px) rotate(-1.5deg)}70%{transform:translate(-5px,6px) rotate(-0.5deg)}72%{transform:translate(-1px,9px) rotate(0.5deg)}74%{transform:translate(5px,0px) rotate(3.5deg)}76%{transform:translate(7px,-8px) rotate(-0.5deg)}78%{transform:translate(-3px,-5px) rotate(1.5deg)}80%{transform:translate(-2px,9px) rotate(1.5deg)}82%{transform:translate(7px,6px) rotate(3.5deg)}84%{transform:translate(8px,-2px) rotate(-1.5deg)}86%{transform:translate(-5px,-6px) rotate(1.5deg)}88%{transform:translate(9px,0px) rotate(-0.5deg)}90%{transform:translate(7px,3px) rotate(-0.5deg)}92%{transform:translate(-9px,-7px) rotate(-0.5deg)}94%{transform:translate(10px,10px) rotate(-1.5deg)}96%{transform:translate(-1px,6px) rotate(-2.5deg)}98%{transform:translate(-2px,1px) rotate(1.5deg)}0%,100%{transform:translate(0,0) rotate(0)}}.fool-day{display:none;position:fixed;z-index:9999999;background:rgba(0,0,0,.5);top:0;left:0;right:0;bottom:0}.fool-day img{position:fixed;display:block;top:50%;left:50%;transform:translate(-50%,-50%);margin: 0;}

这里看demo


开源中国愚人节特效存档
https://xypecho.github.io/2018/04/01/开源中国愚人节特效存档/
作者
很青的青蛙
发布于
2018年4月1日
许可协议