25款404网页源码（下）
25款404网页源码（下）
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 level
if (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>
领取完整源码
25款404网页源码https://www.123pan.com/s/ji8kjv-jjPU3.html
下期更新
孤客支付系统
- 📢本人公众号：祖龙科技工作室
- 📢博客主页：孤客网络科技工作室官方账号
- 📢欢迎点赞👍收藏⭐️留言 📝如有错误敬请指正！
- 📢本文由孤客原创，若侵权联系作者，首发于CSDN博客
- 📢停下休息的时候不要忘了别人还在奔跑，希望大家抓紧时间学习，全力奔赴更好的生活💻
原文地址：https://blog.csdn.net/m0_70474954/article/details/140231017
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！