25款404网页源码（下）

13
- 部分源码
14
- 部分源码
15
- 部分源码
16
- 部分源码
17
- 部分源码
18
- 部分源码
19
- 部分源码
20
- 部分源码
21
- 部分源码
22
- 部分源码
23
- 部分源码
24
- 部分源码
25
- 部分源码
领取完整源码
下期更新

13

在这里插入图片描述

部分源码

.rail {position: absolute;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;transform: rotateX(-30deg) rotateY(-30deg);
}
.rail .stamp {position: absolute;width: 200px;height: 200px;display: flex;justify-content: center;align-items: center;background: #141414;color: #fff;font-size: 7rem;
}

14

在这里插入图片描述

部分源码

svg {position: absolute;top: 50%;left: 50%;margin-top: -250px;margin-left: -400px;
}
.message-box {height: 200px;width: 380px;position: absolute;top: 50%;left: 50%;margin-top: -100px;margin-left: 50px;color: #FFF;font-family: Roboto;font-weight: 300;
}
.message-box h1 {font-size: 60px;line-height: 46px;margin-bottom: 40px;
}
.buttons-con .action-link-wrap {margin-top: 40px;
}

15

在这里插入图片描述

部分源码

<body><div class="not-found parallax"><div class="sky-bg"></div><div class="wave-7"></div><div class="wave-6"></div><a class="wave-island" href="https://haiyongcsdn.gitee.io/"><img src="http://res.cloudinary.com/andrewhani/image/upload/v1524501929/404/island.svg" alt="Island"></a><div class="wave-5"></div><div class="wave-lost wrp"><span>4</span><span>0</span><span>4</span></div><div class="wave-4"></div><div class="wave-boat"><img class="boat" src="http://res.cloudinary.com/andrewhani/image/upload/v1524501894/404/boat.svg"alt="Boat"></div><div class="wave-3"></div><div class="wave-2"></div><div class="wave-1"></div><div class="wave-message"><p>Your're lost</p><p>Click on the island to return</p></div></div><script src="https://rsupanta-weather.herokuapp.com/js/404.js"></script></body>

16

在这里插入图片描述

部分源码

var Game = function() {this.level = -1;this.lost = false;this.player = new Player();this.invaders = [];this.invaderShots = [];if (invaderDownTimer === undefined) {invaderDownTimer = setInterval(function() {for (i = 0; i < game.invaders.length; i++) game.invaders[i].move();}, 1000 - (this.level * 1.8));};}Game.prototype = {update: function() {// Next levelif (game.invaders.length === 0) {spawnDelayCounter += 1;if (spawnDelayCounter < invaderSpawnDelay) return;this.level += 1;invaderAttackRate -= 0.002;invaderSpeed += 10;game.invaders = createInvaders();spawnDelayCounter = 0;}

17

在这里插入图片描述

部分源码

head {display: block;position: relative;width: 200px;margin: 10% auto 0;-webkit-animation: shvr 0.2s infinite;animation: shvr 0.2s infinite;
}
head::after {content: '';width: 20px;height: 20px;background: #000;position: absolute;top: 30px;left: 25px;border-radius: 50%;box-shadow: 125px 0 0 #000;-webkit-animation: eye 2.5s infinite;animation: eye 2.5s infinite;
}meta {position: relative;display: inline-block;background: #fff;width: 75px;height: 80px;border-radius: 50% 50% 50% 50%/45px 45px 45% 45%;transform: rotate(45deg);
}

18

在这里插入图片描述

部分源码

.container {position: relative;display: flex;align-items: center;justify-content: center;height: 100vh;background: white;color: black;font-family: arial, sans-serif;overflow: hidden;
}.content {position: relative;width: 600px;max-width: 100%;margin: 20px;background: white;padding: 60px 40px;text-align: center;box-shadow: -10px 10px 67px -12px rgba(0, 0, 0, 0.2);opacity: 0;animation: apparition 0.8s 1.2s cubic-bezier(0.39, 0.575, 0.28, 0.995) forwards;
}

19

在这里插入图片描述

部分源码

body {background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/257418/andy-holmes-698828-unsplash.jpg);background-size: cover;background-repeat: no-repeat;min-height: 100vh;min-width: 100vw;font-family: "Roboto Mono", "Liberation Mono", Consolas, monospace;color: rgba(255, 255, 255, 0.87);
}.mx-auto {margin-left: auto;margin-right: auto;
}.container,
.container > .row,
.container > .row > div {height: 100%;
}

20

在这里插入图片描述

部分源码

.container {margin: 0 auto;position: relative;width: 250px;height: 250px;margin-top: -40px;
}.ghost {width: 50%;height: 53%;left: 25%;top: 10%;position: absolute;border-radius: 50% 50% 0 0;background: #EDEDED;border: 1px solid #BFC0C0;border-bottom: none;animation: float 2s ease-out infinite;
}.ghost-copy {width: 50%;height: 53%;left: 25%;top: 10%;position: absolute;border-radius: 50% 50% 0 0;background: #EDEDED;border: 1px solid #BFC0C0;border-bottom: none;animation: float 2s ease-out infinite;z-index: 0;
}

21

在这里插入图片描述

部分源码

body {font-family: 'Roboto', sans-serif;min-height: 100vh;background: linear-gradient(35deg, #a1eeeb 30%, #4331ec 85%);background: linear-gradient(35deg, #f8d60f 20%, #fc5c5c 85%);background: linear-gradient(65deg, #fbdc14 20%, #04c4d4 20%, #04c4d4 65%, #fc5c5c 65%, #fc5c5c 85%);
}
canvas {height: 30vh;left: 0;position: absolute;top: 0;width: 100vw;
}

22

在这里插入图片描述

部分源码

<script>function type(n, t) {var str = document.getElementsByTagName("code")[n].innerHTML.toString();var i = 0;document.getElementsByTagName("code")[n].innerHTML = "";setTimeout(function() {var se = setInterval(function() {i++;document.getElementsByTagName("code")[n].innerHTML =str.slice(0, i) + "|";if (i == str.length) {clearInterval(se);document.getElementsByTagName("code")[n].innerHTML = str;}}, 10);}, t);
}

23

在这里插入图片描述

部分源码

.left-section, .right-section {position: relative;
}.left-section {width: 40%;
}
@media (max-width: 770px) {.left-section {width: 100%;height: 40%;position: absolute;top: 0;}
}
@media (max-width: 770px) {.left-section .inner-content {position: relative;padding: 1rem 0;}
}

24

在这里插入图片描述

部分源码

<script>(function() {//novacancy.min.js(function(e){"use strict";var t=function(t,n){this._el=e(t);if(this.repeat())return true;this._settings=n;this._powerOn=false;this._loopTimeout=0;this._el.html(this.buildHTML());this._items=this._el.find("span.novacancy");this._blinkArr=this.arrayMake();this.bindEvent();this.writeCSS();if(this._settings.autoOn)this.blinkOn()};t.prototype.repeat=function(){var e=this._el;if(e[0].novacancy){return true}else{e[0].novacancy=true;return false}};t.prototype.writeCSS=function(){var t=this.css();var n=e("<style>"+t+"</style>");e("body").append(n)};t.prototype.selector=function(){var e=this._el;var t=e[0].tagName;if(e[0].id)t+="#"+e[0].id;if(e[0].className)t+="."+e[0].className;return t};t.prototype.css=function(){var e=this.selector();var t=this._settings;var n="text-shadow: "+t.glow.toString()+";";var r="color: "+t.color+";"+n;var i="color: "+t.color+"; opacity: 0.3;";var s="";s+=e+" .novacancy.on { "+r+" }"+"\n";s+=e+" .novacancy.off { "+i+" }"+"\n";return s};t.prototype.rand=function(e,t){return Math.floor(Math.random()*(t-e+1)+e)};t.prototype.isNumber=function(e){return!isNaN(parseFloat(e))&&isFinite(e)};t.prototype.blink=function(e){var t=this._settings;var n=this;this.off(e);e[0].blinking=true;setTimeout(function(){n.on(e);e[0].blinking=false;n.reblink(e)},this.rand(t.blinkMin,t.blinkMax))};t.prototype.reblink=function(e){var t=this._settings;var n=this;setTimeout(function(){if(n.rand(1,100)<=t.reblinkProbability){n.blink(e)}},this.rand(t.blinkMin,t.blinkMax))};t.prototype.on=function(e){e.removeClass("off").addClass("on")};t.prototype.off=function(e){e.removeClass("on").addClass("off")};t.prototype.buildHTML=function(){var t=this._el;var n="";e.each(t.contents(),function(t,r){if(r.nodeType==3){var i=r.nodeValue.split("");e.each(i,function(e,t){n+='<span class="novacancy on">'+t+"</span>"})}else{n+=r.outerHTML}});return n};t.prototype.arrayMake=function(){var t=this._el;var n=this._settings;var r=this._items;var i=r.length;var s=this.randomArray(i);var o;var u;var a=n.off;var f=n.blink;var l=this;a=Math.min(a,i);a=Math.max(0,a);u=s.splice(0,a);e.each(u,function(t,n){l.off(e(r[n]))});f=f===0?i:f;f=Math.min(f,i-a);f=Math.max(0,f);o=s.splice(0,f);return o};t.prototype.randomArray=function(e){var t=[];var n;var r;var i;for(n=0;n<e;++n){t[n]=n}for(n=0;n<e;++n){r=parseInt(Math.random()*e,10);i=t[r];t[r]=t[n];t[n]=i}return t};t.prototype.loop=function(){if(!this._powerOn)return;var t=this._el;var n=this._settings;var r=this._blinkArr;var i=this._items;if(r.length===0)return;var s;var o;var u=this;s=r[this.rand(0,r.length-1)];o=e(i[s]);if(!o[0].blinking)this.blink(o);this._loopTimeout=setTimeout(function(){u.loop()},this.rand(n.loopMin,n.loopMax))};t.prototype.blinkOn=function(){if(!this._powerOn){var e=this._settings;var t=this;this._powerOn=true;this._loopTimeout=setTimeout(function(){t.loop()},this.rand(e.loopMin,e.loopMax))}};t.prototype.blinkOff=function(){if(this._powerOn){this._powerOn=false;clearTimeout(this._loopTimeout)}};t.prototype.bindEvent=function(){var e=this._el;var t=this;e.on("blinkOn",function(e){t.blinkOn()});e.on("blinkOff",function(e){t.blinkOff()})};var n=function(t){var n=e.extend({reblinkProbability:1/3,blinkMin:.01,blinkMax:.5,loopMin:.5,loopMax:2,color:"ORANGE",glow:["0 0 80px Orange","0 0 30px Red","0 0 6px Yellow"],off:0,blink:0,autoOn:true},t);n.reblinkProbability*=100;n.blinkMin*=1e3;n.blinkMax*=1e3;n.loopMin*=1e3;n.loopMax*=1e3;return n};e.fn.novacancy=function(r){return e.each(this,function(e,i){new t(this,n(r))})}})(jQuery);$(function() {$('#error').novacancy({'reblinkProbability': 0.1,'blinkMin': 0.2,'blinkMax': 0.6,'loopMin': 8,'loopMax': 10,'color': '#ffffff','glow': ['0 0 80px #ffffff', '0 0 30px #008000', '0 0 6px #0000ff']});return $('#code').novacancy({'blink': 1,'off': 1,'color': 'Red','glow': ['0 0 80px Red', '0 0 30px FireBrick', '0 0 6px DarkRed']});});

25

在这里插入图片描述

部分源码

<script>/* refresh if you didn't have body's background which appears*/
$(function() {
$(document).ready(function() {var one =false;$('.button span').mouseover(function(){     if(!one){$('body').jGravity({target: 'span',ignoreClass: 'dontMove',weight: 25,depth: 100,drag: true});one =true;};});});
});</script>