优化知更鸟beginlts主题的go跳转页面更有特效感

2018.8. 1722:43:44 发表评论 175

作为一个wordpress的菜鸟,总是不由自主的习惯性的去折腾主题,这或许才是进步的最快方法吧,昨晚辛辛苦苦的汉化了No External LInks跳转插件以后,又在捯饬这个跳转页面的事情。如果我跟你说昨晚我并没有睡觉你觉得这事情靠谱么,

是的,我今早上酒店才睡,不是我精神头好,而是上了年纪tmd的睡眠质量直线下降。

鸟叔的知更鸟主题的go跳转页面,使用的是张戈的代码,这个是很久以前我就知道的事情,用的时间久了,总是觉得鸟叔的这个跳转好丑,所幸我自己就做了一个。

在原有的代码基础上面,添加了我自己喜欢的东西,大家可以去瞅瞅样子。https://chonzi.com/wp-content/themes/begin/inc/go.php

优化知更鸟beginlts主题的go跳转页面更有特效感

这是我自己选了十几个以后,最终觉得很喜欢的一个页面,要是在打开新页面可以有一点点的渐隐效果那么会看起来更加的自然,希望有大神可以优化一下。

我呢,是一个对代码一窍不通的小白,所以这样的事情也都是在不断的摸索中,实践中获得的成果。当然还是老规矩,如果你喜欢,可以去下载我的这个跳转页面,当然前提是你使用的必须是begin主题,如果不是,是无法实现跳转的。

其实在原有的基础上我是没有做任何的修改的,而只是将我需要的内容添加了进入,如果你喜欢,那就瞅瞅,大神请不要喷我。

<?php 
// https://chonzi.com/

$t_url = preg_replace('/^url=(.*)$/i','$1',$_SERVER["QUERY_STRING"]);
if(!empty($t_url)) {
  preg_match('/(http|https):\/\//',$t_url,$matches);
  if($matches){
    $url=$t_url;
    $title='页面加载中,请稍候...';
  } else {
    $title='加载中...';
    echo "<script>setTimeout(function(){window.opener=null;window.close();}, 3000);</script>";
  }
}
?>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="refresh" content="3;url='<?php echo $url;?>';">
<title><?php echo $title;?></title>
<style type="text/css">
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline
}

body {
  background: #202020;
}

#loader-container {
  width: 188px;
  height: 188px;
  color: white;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  border: 5px solid #3498db;
  border-radius: 50%;
  -webkit-animation: borderScale 3s infinite ease-in-out;
  animation: borderScale 3s infinite ease-in-out;
}

#loadingText {
  font-family: 'Raleway', sans-serif;
  font-size: 1.4em;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}

@-webkit-keyframes borderScale {
  0% {
    border: 5px solid white;
  }

  50% {
    border: 25px solid #3498db;
  }

  100% {
    border: 5px solid white;
  }
}

@keyframes borderScale {
  0% {
    border: 5px solid white;
  }

  50% {
    border: 25px solid #3498db;
  }

  100% {
    border: 5px solid white;
  }
}
</style>
</head>
<html>
<head>
<meta charset="utf-8">
<title>云螺旋动画虫子博客</title>
<style>
html, body {
  overflow: hidden;
  background: #202020;
}

.wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  -moz-perspective: 500px;
  -webkit-perspective: 500px;
  perspective: 500px;
}

i {
  display: block;
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 8px;
  opacity: 0;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0px 0px 10px white;
  animation-name: spin;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

i:nth-child(1) {
  -moz-transform: rotate(11.6129deg) translate3d(80px, 0, 0);
  -ms-transform: rotate(11.6129deg) translate3d(80px, 0, 0);
  -webkit-transform: rotate(11.6129deg) translate3d(80px, 0, 0);
  transform: rotate(11.6129deg) translate3d(80px, 0, 0);
  animation-delay: 0.04839s;
}

i:nth-child(2) {
  -moz-transform: rotate(23.22581deg) translate3d(80px, 0, 0);
  -ms-transform: rotate(23.22581deg) translate3d(80px, 0, 0);
  -webkit-transform: rotate(23.22581deg) translate3d(80px, 0, 0);
  transform: rotate(23.22581deg) translate3d(80px, 0, 0);
  animation-delay: 0.09677s;
}

i:nth-child(3) {
  -moz-transform: rotate(34.83871deg) translate3d(80px, 0, 0);
  -ms-transform: rotate(34.83871deg) translate3d(80px, 0, 0);
  -webkit-transform: rotate(34.83871deg) translate3d(80px, 0, 0);
  transform: rotate(34.83871deg) translate3d(80px, 0, 0);
  animation-delay: 0.14516s;
}

i:nth-child(4) {
  -moz-transform: rotate(46.45161deg) translate3d(80px, 0, 0);
  -ms-transform: rotate(46.45161deg) translate3d(80px, 0, 0);
  -webkit-transform: rotate(46.45161deg) translate3d(80px, 0, 0);
  transform: rotate(46.45161deg) translate3d(80px, 0, 0);
  animation-delay: 0.19355s;
}

i:nth-child(5) {
  -moz-transform: rotate(58.06452deg) translate3d(80px, 0, 0);
  -ms-transform: rotate(58.06452deg) translate3d(80px, 0, 0);
  -webkit-transform: rotate(58.06452deg) translate3d(80px, 0, 0);
  transform: rotate(58.06452deg) translate3d(80px, 0, 0);
  animation-delay: 0.24194s;
}

i:nth-child(6) {
  -moz-transform: rotate(69.67742deg) translate3d(80px, 0, 0);
  -ms-transform: rotate(69.67742deg) translate3d(80px, 0, 0);
  -webkit-transform: rotate(69.67742deg) translate3d(80px, 0, 0);
  transform: rotate(69.67742deg) translate3d(80px, 0, 0);
  animation-delay: 0.29032s;
}

i:nth-child(7) {
  -moz-transform: rotate(81.29032deg) translate3d(80px, 0, 0);
  -ms-transform: rotate(81.29032deg) translate3d(80px, 0, 0);
  -webkit-transform: rotate(81.29032deg) translate3d(80px, 0, 0);
  transform: rotate(81.29032deg) translate3d(80px, 0, 0);
  animation-delay: 0.33871s;
}

i:nth-child(8) {
  -moz-transform: rotate(92.90323deg) translate3d(80px, 0, 0);
  -ms-transform: rotate(92.90323deg) translate3d(80px, 0, 0);
  -webkit-transform: rotate(92.90323deg) translate3d(80px, 0, 0);
  transform: rotate(92.90323deg) translate3d(80px, 0, 0);
  animation-delay: 0.3871s;
}

i:nth-child(9) {
  -moz-transform: rotate(104.51613deg) translate3d(80px, 0, 0);
  -ms-transform: rotate(104.51613deg) translate3d(80px, 0, 0);
  -webkit-transform: rotate(104.51613deg) translate3d(80px, 0, 0);
  transform: rotate(104.51613deg) translate3d(80px, 0, 0);
  animation-delay: 0.43548s;
}

i:nth-child(10) {
  -moz-transform: rotate(116.12903deg) translate3d(80px, 0, 0);
  -ms-transform: rotate(116.12903deg) translate3d(80px, 0, 0);
  -webkit-transform: rotate(116.12903deg) translate3d(80px, 0, 0);
  transform: rotate(116.12903deg) translate3d(80px, 0, 0);
  animation-delay: 0.48387s;
}

i:nth-child(11) {
  -moz-transform: rotate(127.74194deg) translate3d(80px, 0, 0);
  -ms-transform: rotate(127.74194deg) translate3d(80px, 0, 0);
  -webkit-transform: rotate(127.74194deg) translate3d(80px, 0, 0);
  transform: rotate(127.74194deg) translate3d(80px, 0, 0);
  animation-delay: 0.53226s;
}

i:nth-child(12) {
  -moz-transform: rotate(139.35484deg) translate3d(80px, 0, 0);
  -ms-transform: rotate(139.35484deg) translate3d(80px, 0, 0);
  -webkit-transform: rotate(139.35484deg) translate3d(80px, 0, 0);
  transform: rotate(139.35484deg) translate3d(80px, 0, 0);
  animation-delay: 0.58065s;
}

i:nth-child(13) {
  -moz-transform: rotate(150.96774deg) translate3d(80px, 0, 0);
  -ms-transform: rotate(150.96774deg) translate3d(80px, 0, 0);
  -webkit-transform: rotate(150.96774deg) translate3d(80px, 0, 0);
  transform: rotate(150.96774deg) translate3d(80px, 0, 0);
  animation-delay: 0.62903s;
}

i:nth-child(14) {
  -moz-transform: rotate(162.58065deg) translate3d(80px, 0, 0);
  -ms-transform: rotate(162.58065deg) translate3d(80px, 0, 0);
  -webkit-transform: rotate(162.58065deg) translate3d(80px, 0, 0);
  transform: rotate(162.58065deg) translate3d(80px, 0, 0);
  animation-delay: 0.67742s;
}

i:nth-child(15) {
  -moz-transform: rotate(174.19355deg) translate3d(80px, 0, 0);
  -ms-transform: rotate(174.19355deg) translate3d(80px, 0, 0);
  -webkit-transform: rotate(174.19355deg) translate3d(80px, 0, 0);
  transform: rotate(174.19355deg) translate3d(80px, 0, 0);
  animation-delay: 0.72581s;
}

i:nth-child(16) {
  -moz-transform: rotate(185.80645deg) translate3d(80px, 0, 0);
  -ms-transform: rotate(185.80645deg) translate3d(80px, 0, 0);
  -webkit-transform: rotate(185.80645deg) translate3d(80px, 0, 0);
  transform: rotate(185.80645deg) translate3d(80px, 0, 0);
  animation-delay: 0.77419s;
}

i:nth-child(17) {
  -moz-transform: rotate(197.41935deg) translate3d(80px, 0, 0);
  -ms-transform: rotate(197.41935deg) translate3d(80px, 0, 0);
  -webkit-transform: rotate(197.41935deg) translate3d(80px, 0, 0);
  transform: rotate(197.41935deg) translate3d(80px, 0, 0);
  animation-delay: 0.82258s;
}

i:nth-child(18) {
  -moz-transform: rotate(209.03226deg) translate3d(80px, 0, 0);
  -ms-transform: rotate(209.03226deg) translate3d(80px, 0, 0);
  -webkit-transform: rotate(209.03226deg) translate3d(80px, 0, 0);
  transform: rotate(209.03226deg) translate3d(80px, 0, 0);
  animation-delay: 0.87097s;
}

i:nth-child(19) {
  -moz-transform: rotate(220.64516deg) translate3d(80px, 0, 0);
  -ms-transform: rotate(220.64516deg) translate3d(80px, 0, 0);
  -webkit-transform: rotate(220.64516deg) translate3d(80px, 0, 0);
  transform: rotate(220.64516deg) translate3d(80px, 0, 0);
  animation-delay: 0.91935s;
}

i:nth-child(20) {
  -moz-transform: rotate(232.25806deg) translate3d(80px, 0, 0);
  -ms-transform: rotate(232.25806deg) translate3d(80px, 0, 0);
  -webkit-transform: rotate(232.25806deg) translate3d(80px, 0, 0);
  transform: rotate(232.25806deg) translate3d(80px, 0, 0);
  animation-delay: 0.96774s;
}

i:nth-child(21) {
  -moz-transform: rotate(243.87097deg) translate3d(80px, 0, 0);
  -ms-transform: rotate(243.87097deg) translate3d(80px, 0, 0);
  -webkit-transform: rotate(243.87097deg) translate3d(80px, 0, 0);
  transform: rotate(243.87097deg) translate3d(80px, 0, 0);
  animation-delay: 1.01613s;
}

i:nth-child(22) {
  -moz-transform: rotate(255.48387deg) translate3d(80px, 0, 0);
  -ms-transform: rotate(255.48387deg) translate3d(80px, 0, 0);
  -webkit-transform: rotate(255.48387deg) translate3d(80px, 0, 0);
  transform: rotate(255.48387deg) translate3d(80px, 0, 0);
  animation-delay: 1.06452s;
}

i:nth-child(23) {
  -moz-transform: rotate(267.09677deg) translate3d(80px, 0, 0);
  -ms-transform: rotate(267.09677deg) translate3d(80px, 0, 0);
  -webkit-transform: rotate(267.09677deg) translate3d(80px, 0, 0);
  transform: rotate(267.09677deg) translate3d(80px, 0, 0);
  animation-delay: 1.1129s;
}

i:nth-child(24) {
  -moz-transform: rotate(278.70968deg) translate3d(80px, 0, 0);
  -ms-transform: rotate(278.70968deg) translate3d(80px, 0, 0);
  -webkit-transform: rotate(278.70968deg) translate3d(80px, 0, 0);
  transform: rotate(278.70968deg) translate3d(80px, 0, 0);
  animation-delay: 1.16129s;
}

i:nth-child(25) {
  -moz-transform: rotate(290.32258deg) translate3d(80px, 0, 0);
  -ms-transform: rotate(290.32258deg) translate3d(80px, 0, 0);
  -webkit-transform: rotate(290.32258deg) translate3d(80px, 0, 0);
  transform: rotate(290.32258deg) translate3d(80px, 0, 0);
  animation-delay: 1.20968s;
}

i:nth-child(26) {
  -moz-transform: rotate(301.93548deg) translate3d(80px, 0, 0);
  -ms-transform: rotate(301.93548deg) translate3d(80px, 0, 0);
  -webkit-transform: rotate(301.93548deg) translate3d(80px, 0, 0);
  transform: rotate(301.93548deg) translate3d(80px, 0, 0);
  animation-delay: 1.25806s;
}

i:nth-child(27) {
  -moz-transform: rotate(313.54839deg) translate3d(80px, 0, 0);
  -ms-transform: rotate(313.54839deg) translate3d(80px, 0, 0);
  -webkit-transform: rotate(313.54839deg) translate3d(80px, 0, 0);
  transform: rotate(313.54839deg) translate3d(80px, 0, 0);
  animation-delay: 1.30645s;
}

i:nth-child(28) {
  -moz-transform: rotate(325.16129deg) translate3d(80px, 0, 0);
  -ms-transform: rotate(325.16129deg) translate3d(80px, 0, 0);
  -webkit-transform: rotate(325.16129deg) translate3d(80px, 0, 0);
  transform: rotate(325.16129deg) translate3d(80px, 0, 0);
  animation-delay: 1.35484s;
}

i:nth-child(29) {
  -moz-transform: rotate(336.77419deg) translate3d(80px, 0, 0);
  -ms-transform: rotate(336.77419deg) translate3d(80px, 0, 0);
  -webkit-transform: rotate(336.77419deg) translate3d(80px, 0, 0);
  transform: rotate(336.77419deg) translate3d(80px, 0, 0);
  animation-delay: 1.40323s;
}

i:nth-child(30) {
  -moz-transform: rotate(348.3871deg) translate3d(80px, 0, 0);
  -ms-transform: rotate(348.3871deg) translate3d(80px, 0, 0);
  -webkit-transform: rotate(348.3871deg) translate3d(80px, 0, 0);
  transform: rotate(348.3871deg) translate3d(80px, 0, 0);
  animation-delay: 1.45161s;
}

i:nth-child(31) {
  -moz-transform: rotate(360deg) translate3d(80px, 0, 0);
  -ms-transform: rotate(360deg) translate3d(80px, 0, 0);
  -webkit-transform: rotate(360deg) translate3d(80px, 0, 0);
  transform: rotate(360deg) translate3d(80px, 0, 0);
  animation-delay: 1.5s;
}

i:nth-child(32) {
  -moz-transform: rotate(371.6129deg) translate3d(80px, 0, 0);
  -ms-transform: rotate(371.6129deg) translate3d(80px, 0, 0);
  -webkit-transform: rotate(371.6129deg) translate3d(80px, 0, 0);
  transform: rotate(371.6129deg) translate3d(80px, 0, 0);
  animation-delay: 1.54839s;
}

i:nth-child(33) {
  -moz-transform: rotate(383.22581deg) translate3d(80px, 0, 0);
  -ms-transform: rotate(383.22581deg) translate3d(80px, 0, 0);
  -webkit-transform: rotate(383.22581deg) translate3d(80px, 0, 0);
  transform: rotate(383.22581deg) translate3d(80px, 0, 0);
  animation-delay: 1.59677s;
}

i:nth-child(34) {
  -moz-transform: rotate(394.83871deg) translate3d(80px, 0, 0);
  -ms-transform: rotate(394.83871deg) translate3d(80px, 0, 0);
  -webkit-transform: rotate(394.83871deg) translate3d(80px, 0, 0);
  transform: rotate(394.83871deg) translate3d(80px, 0, 0);
  animation-delay: 1.64516s;
}

i:nth-child(35) {
  -moz-transform: rotate(406.45161deg) translate3d(80px, 0, 0);
  -ms-transform: rotate(406.45161deg) translate3d(80px, 0, 0);
  -webkit-transform: rotate(406.45161deg) translate3d(80px, 0, 0);
  transform: rotate(406.45161deg) translate3d(80px, 0, 0);
  animation-delay: 1.69355s;
}

i:nth-child(36) {
  -moz-transform: rotate(418.06452deg) translate3d(80px, 0, 0);
  -ms-transform: rotate(418.06452deg) translate3d(80px, 0, 0);
  -webkit-transform: rotate(418.06452deg) translate3d(80px, 0, 0);
  transform: rotate(418.06452deg) translate3d(80px, 0, 0);
  animation-delay: 1.74194s;
}

i:nth-child(37) {
  -moz-transform: rotate(429.67742deg) translate3d(80px, 0, 0);
  -ms-transform: rotate(429.67742deg) translate3d(80px, 0, 0);
  -webkit-transform: rotate(429.67742deg) translate3d(80px, 0, 0);
  transform: rotate(429.67742deg) translate3d(80px, 0, 0);
  animation-delay: 1.79032s;
}

i:nth-child(38) {
  -moz-transform: rotate(441.29032deg) translate3d(80px, 0, 0);
  -ms-transform: rotate(441.29032deg) translate3d(80px, 0, 0);
  -webkit-transform: rotate(441.29032deg) translate3d(80px, 0, 0);
  transform: rotate(441.29032deg) translate3d(80px, 0, 0);
  animation-delay: 1.83871s;
}

i:nth-child(39) {
  -moz-transform: rotate(452.90323deg) translate3d(80px, 0, 0);
  -ms-transform: rotate(452.90323deg) translate3d(80px, 0, 0);
  -webkit-transform: rotate(452.90323deg) translate3d(80px, 0, 0);
  transform: rotate(452.90323deg) translate3d(80px, 0, 0);
  animation-delay: 1.8871s;
}

i:nth-child(40) {
  -moz-transform: rotate(464.51613deg) translate3d(80px, 0, 0);
  -ms-transform: rotate(464.51613deg) translate3d(80px, 0, 0);
  -webkit-transform: rotate(464.51613deg) translate3d(80px, 0, 0);
  transform: rotate(464.51613deg) translate3d(80px, 0, 0);
  animation-delay: 1.93548s;
}

i:nth-child(41) {
  -moz-transform: rotate(476.12903deg) translate3d(80px, 0, 0);
  -ms-transform: rotate(476.12903deg) translate3d(80px, 0, 0);
  -webkit-transform: rotate(476.12903deg) translate3d(80px, 0, 0);
  transform: rotate(476.12903deg) translate3d(80px, 0, 0);
  animation-delay: 1.98387s;
}

i:nth-child(42) {
  -moz-transform: rotate(487.74194deg) translate3d(80px, 0, 0);
  -ms-transform: rotate(487.74194deg) translate3d(80px, 0, 0);
  -webkit-transform: rotate(487.74194deg) translate3d(80px, 0, 0);
  transform: rotate(487.74194deg) translate3d(80px, 0, 0);
  animation-delay: 2.03226s;
}

i:nth-child(43) {
  -moz-transform: rotate(499.35484deg) translate3d(80px, 0, 0);
  -ms-transform: rotate(499.35484deg) translate3d(80px, 0, 0);
  -webkit-transform: rotate(499.35484deg) translate3d(80px, 0, 0);
  transform: rotate(499.35484deg) translate3d(80px, 0, 0);
  animation-delay: 2.08065s;
}

i:nth-child(44) {
  -moz-transform: rotate(510.96774deg) translate3d(80px, 0, 0);
  -ms-transform: rotate(510.96774deg) translate3d(80px, 0, 0);
  -webkit-transform: rotate(510.96774deg) translate3d(80px, 0, 0);
  transform: rotate(510.96774deg) translate3d(80px, 0, 0);
  animation-delay: 2.12903s;
}

i:nth-child(45) {
  -moz-transform: rotate(522.58065deg) translate3d(80px, 0, 0);
  -ms-transform: rotate(522.58065deg) translate3d(80px, 0, 0);
  -webkit-transform: rotate(522.58065deg) translate3d(80px, 0, 0);
  transform: rotate(522.58065deg) translate3d(80px, 0, 0);
  animation-delay: 2.17742s;
}

i:nth-child(46) {
  -moz-transform: rotate(534.19355deg) translate3d(80px, 0, 0);
  -ms-transform: rotate(534.19355deg) translate3d(80px, 0, 0);
  -webkit-transform: rotate(534.19355deg) translate3d(80px, 0, 0);
  transform: rotate(534.19355deg) translate3d(80px, 0, 0);
  animation-delay: 2.22581s;
}

i:nth-child(47) {
  -moz-transform: rotate(545.80645deg) translate3d(80px, 0, 0);
  -ms-transform: rotate(545.80645deg) translate3d(80px, 0, 0);
  -webkit-transform: rotate(545.80645deg) translate3d(80px, 0, 0);
  transform: rotate(545.80645deg) translate3d(80px, 0, 0);
  animation-delay: 2.27419s;
}

i:nth-child(48) {
  -moz-transform: rotate(557.41935deg) translate3d(80px, 0, 0);
  -ms-transform: rotate(557.41935deg) translate3d(80px, 0, 0);
  -webkit-transform: rotate(557.41935deg) translate3d(80px, 0, 0);
  transform: rotate(557.41935deg) translate3d(80px, 0, 0);
  animation-delay: 2.32258s;
}

i:nth-child(49) {
  -moz-transform: rotate(569.03226deg) translate3d(80px, 0, 0);
  -ms-transform: rotate(569.03226deg) translate3d(80px, 0, 0);
  -webkit-transform: rotate(569.03226deg) translate3d(80px, 0, 0);
  transform: rotate(569.03226deg) translate3d(80px, 0, 0);
  animation-delay: 2.37097s;
}

i:nth-child(50) {
  -moz-transform: rotate(580.64516deg) translate3d(80px, 0, 0);
  -ms-transform: rotate(580.64516deg) translate3d(80px, 0, 0);
  -webkit-transform: rotate(580.64516deg) translate3d(80px, 0, 0);
  transform: rotate(580.64516deg) translate3d(80px, 0, 0);
  animation-delay: 2.41935s;
}

i:nth-child(51) {
  -moz-transform: rotate(592.25806deg) translate3d(80px, 0, 0);
  -ms-transform: rotate(592.25806deg) translate3d(80px, 0, 0);
  -webkit-transform: rotate(592.25806deg) translate3d(80px, 0, 0);
  transform: rotate(592.25806deg) translate3d(80px, 0, 0);
  animation-delay: 2.46774s;
}

i:nth-child(52) {
  -moz-transform: rotate(603.87097deg) translate3d(80px, 0, 0);
  -ms-transform: rotate(603.87097deg) translate3d(80px, 0, 0);
  -webkit-transform: rotate(603.87097deg) translate3d(80px, 0, 0);
  transform: rotate(603.87097deg) translate3d(80px, 0, 0);
  animation-delay: 2.51613s;
}

i:nth-child(53) {
  -moz-transform: rotate(615.48387deg) translate3d(80px, 0, 0);
  -ms-transform: rotate(615.48387deg) translate3d(80px, 0, 0);
  -webkit-transform: rotate(615.48387deg) translate3d(80px, 0, 0);
  transform: rotate(615.48387deg) translate3d(80px, 0, 0);
  animation-delay: 2.56452s;
}

i:nth-child(54) {
  -moz-transform: rotate(627.09677deg) translate3d(80px, 0, 0);
  -ms-transform: rotate(627.09677deg) translate3d(80px, 0, 0);
  -webkit-transform: rotate(627.09677deg) translate3d(80px, 0, 0);
  transform: rotate(627.09677deg) translate3d(80px, 0, 0);
  animation-delay: 2.6129s;
}

i:nth-child(55) {
  -moz-transform: rotate(638.70968deg) translate3d(80px, 0, 0);
  -ms-transform: rotate(638.70968deg) translate3d(80px, 0, 0);
  -webkit-transform: rotate(638.70968deg) translate3d(80px, 0, 0);
  transform: rotate(638.70968deg) translate3d(80px, 0, 0);
  animation-delay: 2.66129s;
}

i:nth-child(56) {
  -moz-transform: rotate(650.32258deg) translate3d(80px, 0, 0);
  -ms-transform: rotate(650.32258deg) translate3d(80px, 0, 0);
  -webkit-transform: rotate(650.32258deg) translate3d(80px, 0, 0);
  transform: rotate(650.32258deg) translate3d(80px, 0, 0);
  animation-delay: 2.70968s;
}

i:nth-child(57) {
  -moz-transform: rotate(661.93548deg) translate3d(80px, 0, 0);
  -ms-transform: rotate(661.93548deg) translate3d(80px, 0, 0);
  -webkit-transform: rotate(661.93548deg) translate3d(80px, 0, 0);
  transform: rotate(661.93548deg) translate3d(80px, 0, 0);
  animation-delay: 2.75806s;
}

i:nth-child(58) {
  -moz-transform: rotate(673.54839deg) translate3d(80px, 0, 0);
  -ms-transform: rotate(673.54839deg) translate3d(80px, 0, 0);
  -webkit-transform: rotate(673.54839deg) translate3d(80px, 0, 0);
  transform: rotate(673.54839deg) translate3d(80px, 0, 0);
  animation-delay: 2.80645s;
}

i:nth-child(59) {
  -moz-transform: rotate(685.16129deg) translate3d(80px, 0, 0);
  -ms-transform: rotate(685.16129deg) translate3d(80px, 0, 0);
  -webkit-transform: rotate(685.16129deg) translate3d(80px, 0, 0);
  transform: rotate(685.16129deg) translate3d(80px, 0, 0);
  animation-delay: 2.85484s;
}

i:nth-child(60) {
  -moz-transform: rotate(696.77419deg) translate3d(80px, 0, 0);
  -ms-transform: rotate(696.77419deg) translate3d(80px, 0, 0);
  -webkit-transform: rotate(696.77419deg) translate3d(80px, 0, 0);
  transform: rotate(696.77419deg) translate3d(80px, 0, 0);
  animation-delay: 2.90323s;
}

i:nth-child(61) {
  -moz-transform: rotate(708.3871deg) translate3d(80px, 0, 0);
  -ms-transform: rotate(708.3871deg) translate3d(80px, 0, 0);
  -webkit-transform: rotate(708.3871deg) translate3d(80px, 0, 0);
  transform: rotate(708.3871deg) translate3d(80px, 0, 0);
  animation-delay: 2.95161s;
}

i:nth-child(62) {
  -moz-transform: rotate(720deg) translate3d(80px, 0, 0);
  -ms-transform: rotate(720deg) translate3d(80px, 0, 0);
  -webkit-transform: rotate(720deg) translate3d(80px, 0, 0);
  transform: rotate(720deg) translate3d(80px, 0, 0);
  animation-delay: 3s;
}

@keyframes spin {
  from {
    opacity: 0.0;
  }
  to {
    opacity: 0.6;
    transform: translate3d(-4px, -4px, 570px);
  }
}
#black {
  position: absolute;
  left: 10px;
  bottom: 10px;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
}
#black:after {
  content: 'Black & white';
}

#black:target {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: #111;
  cursor: default;
}
#black:target:after {
  content: '';
}
</style>
</head>
<body>
<div class='wrapper'>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
</div>
<script>
</script>
</body>
</html>

代码有许多地方可以优化,各位自己玩,我不懂哈。最近越发的感觉使用百度云服务器是一个坑,网站也越来越慢。

本文是全系列中第5 / 16篇:知更鸟begin主题

虫子君

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: