背景画像が銀河な404ページ
銀河背景と土星風のアニメーションを使った404エラーページ。真ん中の「0」が回転する土星風のSVGに置き換えられています。
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style"></style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">html,
body {
margin: 0;
height: 100%;
overflow: hidden;
background: url('https://pa-tu.work/storage/img/templates/stars-1837306_1920.jpg') center center / cover no-repeat fixed;
font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}
/* オーバーレイで少し暗く */
body::before {
content: "";
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.3);
z-index: 0;
}
/* 中央配置 */
.container {
position: relative;
height: 100%;
display: grid;
place-items: center;
z-index: 1;
}
/* 404 漂う */
.error {
display: flex;
align-items: center;
gap: -20px;
font-size: clamp(80px, 20vw, 200px);
font-weight: 700;
color: #ffffff;
letter-spacing: 0.02em;
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}
/* 土星（0の代わり） */
.astronaut {
position: relative;
width: clamp(100px, 25vw, 250px);
height: clamp(100px, 25vw, 250px);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.astronaut svg {
width: 100%;
height: 100%;
}
/* リング回転アニメーション */
.ring {
stroke-dasharray: 3 5;
animation: ringRotate 52s linear infinite;
transform-origin: 120px 120px;
}
@keyframes ringRotate {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: 400;
}
}
/* 浮遊アニメーション */
@keyframes float {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-28px);
}
100% {
transform: translateY(0);
}
}
/* ホーム */
.home {
position: absolute;
bottom: 48px;
text-align: center;
text-decoration: none;
color: rgba(255, 255, 255, 0.8);
font-size: 14px;
transition: opacity 0.2s ease;
}
.home:hover {
opacity: 1;
}
/* 地球アイコン */
.earth {
font-size: 32px;
display: block;
margin-bottom: 4px;
}
</style><style id="pic-style">html { max-height: 100%; }</style><style id="vsc-protection">body { pointer-events: auto !important; opacity: 1 !important; }.vsc-controller { display: none !important; }</style></head><body id="svg-section" style="width: 800px; height: 450px; transform-origin: left top; transform: scale(1); overflow: auto; margin: 0; padding: 0;" data-vsc-ignore="true" class="vsc-ignore"><div class="container">
<div class="error">
<span>4</span>
<div class="astronaut">
<svg viewBox="0 0 240 240" xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="planetClip">
<circle cx="120" cy="120" r="70"></circle>
</clipPath>
<filter id="glow">
<feGaussianBlur stdDeviation="6" result="coloredBlur"></feGaussianBlur>
<feMerge>
<feMergeNode in="coloredBlur"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
</defs>
<!-- 後ろ側のリング（上半分） -->
<ellipse class="ring" cx="120" cy="120" rx="95" ry="35" fill="none" stroke="rgb(161, 162, 178)" stroke-width="3" filter="url(#glow)" clip-path="url(#backRing)"></ellipse>
<clipPath id="backRing">
<rect x="0" y="0" width="240" height="120"></rect>
</clipPath>
<!-- 球体 -->
<circle cx="120" cy="120" r="70" fill="#e8e8e8"></circle>
<!-- 手前側のリング（下半分）- 球体でクリップ -->
<g clip-path="url(#planetClip)" style="clip-path: none;">
<ellipse class="ring" cx="120" cy="120" rx="95" ry="35" fill="none" stroke="rgb(161, 162, 178)" stroke-width="3" filter="url(#glow)" clip-path="url(#frontRing)"></ellipse>
</g>
<clipPath id="frontRing">
<rect x="0" y="120" width="240" height="120"></rect>
</clipPath>
</svg>
</div>
<span>4</span>
</div>
<a href="/" class="home" aria-label="ホームへ戻る">
<span class="earth">🌍</span>
HOME
</a>
</div>
<script id="js-section"></script></body></html>
数字がランダムに変化する404ページ
JSの「setInterval」「setTimeout」で数字をランダムに表示してます
<html style="max-height: 100%;"><head><script id="js-section">document.addEventListener('DOMContentLoaded', () => {
const slots = document.querySelectorAll('.block-404 p');
const finalNumbers = ['4', '0', '4'];
const intervalTime = 50; // 数字が変わる間隔（ミリ秒）
slots.forEach((slot, index) => {
const intervalId = setInterval(() => {
const randomNum = Math.floor(Math.random() * 10); // 0から9までのランダムな数字
slot.textContent = randomNum;
}, intervalTime);
// 指定した時間後に数字を固定
setTimeout(() => {
clearInterval(intervalId);
slot.textContent = finalNumbers[index];
}, 1000 + 1000 * index);
});
});</script><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">@import url('https://fonts.googleapis.com/css2?family=Quantico:wght@700&display=swap');
* {
margin: 0;
padding: 0;
line-height: 1;
}
.container {
position: relative;
display: grid;
place-content: center;
background-color: #353535;
background-size: cover;
width: 100%;
height: 100vh;
}
.container::before {
position: absolute;
inset: 0;
background: inherit;
filter: brightness(.1);
animation: textSlide 4s 1s forwards linear;
content: '';
}
.box {
position: relative;
text-align: center;
font-family: 'Quantico', sans-serif;
}
.block-404 {
display: flex;
justify-content: center;
gap: 1rem;
margin-bottom: 2rem;
}
.block-404 p {
width: 100px;
background-color: #fff;
color: #353535;
font-size: 120px;
}
.label-area {
color: #fff;
font-size: 30px;
font-weight: bold;
animation: textAnime 6s 0.5s forwards;
margin-bottom: 4rem;
}
a {
padding: 0.5rem 1rem;
background-color: #fff;
color: #353535;
text-decoration: none;
}
</style><style id="pic-style"></style>
</head><body id="svg-section" style="width: 800px; height: 450px; transform-origin: left top; transform: scale(1); overflow: auto; margin: 0px; padding: 0px;" class="vsc-initialized"><div class="container">
<div class="box">
<div class="block-404">
<p>4</p>
<p>0</p>
<p>4</p>
</div>
<p class="label-area">Page Not Found</p>
<div class="block-link">
<a href="#">TopPage</a>
</div>
</div>
</div>
<script id="js-section">document.addEventListener('DOMContentLoaded', () => {
const slots = document.querySelectorAll('.block-404 p');
const finalNumbers = ['4', '0', '4'];
const intervalTime = 50; // 数字が変わる間隔（ミリ秒）
slots.forEach((slot, index) => {
const intervalId = setInterval(() => {
const randomNum = Math.floor(Math.random() * 10); // 0から9までのランダムな数字
slot.textContent = randomNum;
}, intervalTime);
// 指定した時間後に数字を固定
setTimeout(() => {
clearInterval(intervalId);
slot.textContent = finalNumbers[index];
}, 1000 + 1000 * index);
});
});</script></body></html>
徐々に背景画像が表示される404ページ
keyframesで「filter: brightness」を徐々に変化させてます。
<html style="max-height: 100%;"><head><script id="js-section">
</script><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
* {
margin: 0;
padding: 0;
line-height: 1;
}
.container {
position: relative;
display: grid;
place-content: center;
background-image: url("https://pa-tu.work/storage/img/posts/653e2c21eab18.jpg");
background-size: cover;
width: 100%;
height: 100vh;
}
.container::before {
position: absolute;
inset: 0;
background: inherit;
filter: brightness(.1);
animation: textSlide 4s 1s forwards linear;
content: '';
}
.box {
position: relative;
text-align: center;
font-family: 'Anton', sans-serif;
}
h1 {
font-size: 150px;
margin-bottom: 1rem;
font-weight: bold;
color: #fff;
}
p {
color: #fff;
font-size: 30px;
font-weight: bold;
animation: textAnime 6s 0.5s forwards;
margin-bottom: 4rem;
}
a {
padding: 0.5rem 1rem;
background-color: #121212;
color: #fff;
text-decoration: none;
}
@keyframes textSlide {
100% {
filter: brightness(.8);
}
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" style="width: 800px; height: 450px; transform-origin: left top; transform: scale(1); overflow: auto; margin: 0px; padding: 0px;" class="vsc-initialized"><div class="container">
<div class="box">
<h1>404</h1>
<p>Page Not Found</p>
<div class="block-link">
<a href="#">TopPage</a>
</div>
</div>
</div>
<script id="js-section">
</script></body></html>
徐々にテキストが表示される404ページ
「text-shadow」「box-shadow」を徐々に入れてます
<html style="max-height: 100%;"><head><script id="js-section">
</script><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
* {
margin: 0;
padding: 0;
line-height: 1;
}
.container {
display: grid;
place-content: center;
width: 100%;
height: 100vh;
text-align: center;
background-color: #f1ebe5;
font-family: 'Anton', sans-serif;
}
h1 {
font-size: 150px;
margin-bottom: 1rem;
font-weight: bold;
color: #f1ebe5;
animation: textAnime 6s 0.5s forwards;
}
p {
font-size: 30px;
color: #f1ebe5;
font-weight: bold;
animation: textAnime 6s 0.5s forwards;
margin-bottom: 4rem;
}
a {
color: #f1ebe5;
padding: 0.5rem 1rem;
text-decoration: none;
animation: linkAnime 6s 3s forwards;
}
@keyframes textAnime {
0% {
text-shadow: 0px;
}
100% {
text-shadow: 0px 8px 9px #c4b59d, 0px -2px 1px white;
}
}
@keyframes linkAnime {
0% {
background-color: #f1ebe5;
}
100% {
background-color: #353535;
box-shadow: 0px 8px 9px #c4b59d, 0px -2px 1px white;
}
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" style="width: 800px; height: 450px; transform-origin: left top; transform: scale(1); overflow: auto; margin: 0px; padding: 0px;" class="vsc-initialized"><div class="container">
<h1>404</h1>
<p>Page Not Found</p>
<div class="block-link">
<a href="#">TopPage</a>
</div>
</div>
<script id="js-section">
</script></body></html>
CSSで文字に3Dエフェクトをかけた404ページ
「transform」プロパティに「perspective」「rotateX」「rotateZ」を指定し404ページを作成しました
<html style="max-height: 100%;"><head><script id="js-section">
</script><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="out-style">.pic-container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100vw;
height: 100vh;
background: #bae52d;
}
h1,
p {
transform: perspective(1500px) rotateX(42deg);
font-weight: bold;
margin:0;
padding:0;
}
h1 {
text-shadow:
0px 5px 5px #404f0f,
0px 10px 5px #404f0f,
0px 15px 5px #404f0f,
0px 20px 5px #404f0f,
0px 25px 5px #404f0f,
0px 35px 5px #7c991e,
0px -2px 1px #dce2c5;
color: #bae52d;
font-size: 180px;
}
p {
color: white;
font-size: 50px;
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style></head><body id="svg-section" class="vsc-initialized" style="overflow: auto; margin: 0px; height: 337.5px; padding: 0px;"><div class="pic-container pic-background">
<h1>404</h1>
<p>Page Not Found</p>
</div>
</body></html>