ホームページ >ウェブフロントエンド >CSSチュートリアル >パープルプラネットへの神秘的な航海
パープルプラネットへの神秘的な航海
- 王林オリジナル
- 2024-09-07 14:34:02849ブラウズ
パープルプラネットへの神秘的な航海
広大な宇宙で、一人の航海者が遠い宇宙を航海し、奇妙な紫色の惑星に到着しました。船が着地すると、巨大な触手が影から飛び出し、船と風になびく隣の旗の両方を食い荒らしました。すべてが跡形もなく消え去った。惑星は奇妙に沈黙していましたが、この神秘的な出来事は何か深いことを示唆していました。エイリアンは存在し、私たちは彼らの世界では正真正銘の部外者でした。
デモは次のとおりです:
https://jagroop2001.github.io/DEV-To-Frontend-challenge/
コード展開:
このプロジェクトでは、シンプルな HTML と CSS を使用して宇宙の旅のビジュアルを作成し、JavaScript で星を動的に追加して没入型の宇宙環境を作成します。アニメーションにはいくつかの重要な要素が含まれています:
- 夜空を駆ける流れ星
- 宇宙を航行する回転宇宙船。
- クレーターや波打つ触手など、神秘的な火星の風景。
HTML 構造
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Space Animation</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="space">
<div class="shooting-star shooting1"></div>
<div class="shooting-star shooting2"></div>
<div class="shooting-star shooting3"></div>
<div class="ship">
<div class="ship-rotate">
<div class="pod"></div>
<div class="fuselage"></div>
</div>
</div>
<div class="ship-shadow"></div>
<div class="mars">
<div class="tentacle"></div>
<div class="flag">
<div class="small-tentacle"></div>
</div>
<div class="planet">
<div class="surface"></div>
<div class="crater1"></div>
<div class="crater2"></div>
<div class="crater3"></div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
この HTML 構造には、星、船、火星、および惑星表面の触手やクレーターなどの追加の詳細を表す div 要素のいくつかのレイヤーが含まれています。 CSS セクションでこれらの要素のスタイルを設定し、アニメーション化します。
CSS マジック: スペースのスタイリングとアニメーション化
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
body {
margin: 0;
height: 100vh;
overflow: hidden;
font-family: 'Roboto', sans-serif;
}
.space {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000000;
overflow: hidden;
}
.star {
position: absolute;
background-color: white;
border-radius: 50%;
opacity: 0.8;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
animation: twinkle 2s infinite ease-in-out alternate, move 5s infinite ease-in-out;
}
@keyframes move {
0%,
100% {
transform: translateX(0) translateY(0);
}
50% {
transform: translateX(10px) translateY(5px);
}
}
@keyframes twinkle {
0% {
opacity: 0.8;
}
100% {
opacity: 0.3;
}
}
.ship {
position: absolute;
right: 50%;
top: 50%;
margin-top: -55px;
margin-right: -55px;
height: 22px;
background: rgba(0, 0, 0, .1);
transform-origin: 0% 100% 0;
z-index: 1;
animation: ship 12s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
.ship-rotate {
position: absolute;
height: 22px;
transform: rotate(-110deg);
animation: ship-rotate 12s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
}
.pod {
position: absolute;
top: 0;
left: -8px;
height: 16px;
width: 16px;
background: #eee;
border-radius: 100% 0 100% 0;
transform: rotate(-45deg);
}
.fuselage {
position: absolute;
top: 14px;
left: -6px;
height: 8px;
width: 12px;
background: #eee;
border-radius: 100% 100% 0 0;
&:after {
content: "";
position: absolute;
left: 2px;
top: 100%;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 6px solid #fc7100;
}
}
}
.mars {
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
.tentacle {
position: absolute;
top: -60px;
right: -80px;
z-index: 1;
height: 70px;
width: 70px;
border-radius: 100%;
border-left: 15px solid #fd13f2;
transform: rotate(-30deg);
animation: tentacle 12s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
}
.flag {
position: absolute;
height: 17px;
width: 15px;
top: -57px;
left: -1px;
animation: flag-pole 12s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
&:before {
content: "";
position: absolute;
height: 17px;
width: 2px;
background: #eee;
}
&:after {
content: "";
position: absolute;
height: 10px;
width: 14px;
left: 2px;
top: 0;
background: #aaa;
animation: flag-unfurl 12s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
}
.small-tentacle {
position: absolute;
left: -16px;
top: 3px;
height: 50px;
width: 50px;
border-left: 10px solid #fd13f2;
border-radius: 100%;
transform: rotate(25deg);
animation: small-tentacle 12s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
z-index: 2;
}
}
.planet {
position: absolute;
border-radius: 100%;
height: 120px;
width: 120px;
overflow: hidden;
margin-left: -60px;
margin-top: -60px;
z-index: 2;
.surface {
position: absolute;
border-radius: 100%;
height: 140%;
width: 140%;
top: -30%;
right: -10%;
border: 30px solid rgba(0, 0, 0, .15);
background: #9562C7;
}
.crater1,
.crater2,
.crater3 {
position: absolute;
border-radius: 100%;
background: rgba(0, 0, 0, .15);
box-shadow: inset 3px 3px 0 rgba(0, 0, 0, .2);
}
.crater1 {
height: 20px;
width: 20px;
top: 32%;
left: 17%;
}
.crater2 {
height: 10px;
width: 10px;
top: 26%;
left: 55%;
box-shadow: inset 2px 2px 0 rgba(0, 0, 0, .2);
}
.crater3 {
height: 10px;
width: 10px;
top: 60%;
left: 40%;
box-shadow: inset 2px 2px 0 rgba(0, 0, 0, .2);
}
}
}
@keyframes small-tentacle {
0% {
transform: rotate(-60deg);
}
86% {
transform: rotate(-60deg);
}
89% {
transform: rotate(10deg);
}
100% {
transform: rotate(10deg);
}
}
@keyframes tentacle {
0% {
transform: rotate(-30deg);
}
75% {
transform: rotate(-30deg);
}
80% {
transform: rotate(-165deg) translate(6px, 8px);
}
82.5% {
transform: rotate(-165deg) translate(28px, -17px);
}
100% {
transform: rotate(-165deg) translate(35px, -22px);
}
}
@keyframes ship {
0% {
right: -10%;
top: -10%;
margin-top: -55px;
margin-right: -55px;
}
40% {
right: 50%;
top: 50%;
}
79.5% {
margin-top: -55px;
margin-right: -55px;
}
84% {
margin-top: -20px;
margin-right: 0px;
}
100% {
right: 50%;
top: 50%;
margin-top: 0px;
margin-right: 0px;
}
}
@keyframes ship-rotate {
0% {
transform: rotate(-110deg);
}
20% {
transform: rotate(-110deg);
}
34% {
transform: rotate(47deg);
}
79% {
transform: rotate(47deg);
}
100% {
transform: rotate(47deg);
}
}
@keyframes ship-shadow {
0% {
right: -10%;
transform: scale(1.4, 1);
opacity: .3;
}
40% {
right: 50%;
transform: scale(.75, 1);
opacity: 1;
}
100% {
right: 50%;
}
}
@keyframes flag-pole {
0% {
top: -57px;
}
48% {
top: -57px;
}
54% {
top: -77px;
}
90% {
top: -77px;
}
92% {
top: -57px;
}
100% {
top: -57px;
}
}
@keyframes flag-unfurl {
0% {
width: 0;
}
55% {
width: 0;
}
60% {
width: 14px;
}
90% {
width: 14px;
}
100% {
width: 14px;
}
}
JavaScript でスターを追加する
document.addEventListener('DOMContentLoaded', () => {
const galaxy = document.querySelector('.space');
for (let i = 0; i < 200; i++) {
const star = document.createElement('div');
star.classList.add('star');
// Randomize the position and size of the stars
const size = Math.random() * 4 + 'px';
star.style.width = size;
star.style.height = size;
star.style.top = Math.random() * 100 + '%';
star.style.left = Math.random() * 100 + '%';
galaxy.appendChild(star);
}
});
以上がパープルプラネットへの神秘的な航海の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。