こんな出力結果が帰ってきた。
<!DOCTYPE html>
<html>
<head>
<title>地球</title>
<style>
#earth {
width: 400px;
height: 400px;
border-radius: 50%;
background: url(https://www.example.com/earth.jpg) no-repeat center;
background-size: cover;
}
</style>
</head>
<body>
<div id="earth"></div>
</body>
</html>
これだとバックグランドの画像が地球じゃないといけないけど画像がないな。
画像をこれに差し替えて実行すると・・・
いやそういうことじゃないな。
CSSのみで表現してもらうようにしました。
<!DOCTYPE html>
<html>
<head>
<title>地球</title>
<style>
.earth {
width: 200px;
height: 200px;
border-radius: 50%;
background: radial-gradient(circle at center, #3a7bd5 10%, #000000 70%);
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.4);
}
.earth::before {
content: '';
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
border-radius: 50%;
background: radial-gradient(circle at center, #ffffff 20%, transparent 60%);
}
</style>
</head>
<body>
<div class="earth"></div>
</body>
</html>
出たぞ
ちがうな。もう少し
いや違う。。
俺の説明の仕方が悪いのだ。。
質問方法を変えた
CSS で 3Dな地球儀の作り方を教えてもらうことにしました。
<!DOCTYPE html>
<html>
<head>
<style>
#globe {
perspective: 600px;
width: 300px;
height: 300px;
position: relative;
margin: 0 auto;
margin-top: 100px;
}
#earth {
width: 100%;
height: 100%;
border-radius: 50%;
background: blue;
position: relative;
animation: spin 20s infinite linear;
}
@keyframes spin {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(1turn);
}
}
</style>
</head>
<body>
<div id="globe">
<div id="earth"></div>
</div>
</body>
</html>
円が回る画像が作れた。
もう少しどの方向からみても球状になるようにしてもらいました。
<!DOCTYPE html>
<html>
<head>
<style>
body {
perspective: 1200px;
background: #000;
overflow: hidden;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.globe {
position: relative;
width: 300px;
height: 300px;
border-radius: 50%;
background-color: #0099ff;
}
.globe:after {
content: '';
position: absolute;
top: 5%;
left: 5%;
width: 90%;
height: 90%;
border-radius: 50%;
background-color: #0033ff;
opacity: 0.5;
}
.globe:before {
content: '';
position: absolute;
top: 15%;
left: 15%;
width: 70%;
height: 70%;
border-radius: 50%;
background-color: #0000ff;
opacity: 0.5;
}
@keyframes rotation {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(1turn);
}
}
.globe {
animation: rotation 20s infinite linear;
}
</style>
</head>
<body>
<div class="globe"></div>
</body>
</html>
いや。。平面です。
更にテキストを加えてみたが。。
なんか違うぞ・・・
<!DOCTYPE html>
<html>
<head>
<style>
body {
perspective: 1200px;
background: #000;
overflow: hidden;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.globe {
position: relative;
width: 300px;
height: 300px;
border-radius: 50%;
background-color: #0099ff;
}
.globe:after {
content: '';
position: absolute;
top: 5%;
left: 5%;
width: 90%;
height: 90%;
border-radius: 50%;
background-color: #0033ff;
opacity: 0.5;
}
.globe:before {
content: '';
position: absolute;
top: 15%;
left: 15%;
width: 70%;
height: 70%;
border-radius: 50%;
background-color: #0000ff;
opacity: 0.5;
}
.mountain {
position: absolute;
bottom: 0;
width: 2%;
background-color: white;
border-radius: 0 0 10px 10px;
}
@keyframes rotation {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(1turn);
}
}
.globe {
animation: rotation 20s infinite linear;
}
</style>
</head>
<body>
<div class="globe">
<div class="mountain" style="height: 30%; left: 10%;"></div>
<div class="mountain" style="height: 20%; left: 20%;"></div>
<div class="mountain" style="height: 40%; left: 30%;"></div>
<div class="mountain" style="height: 25%; left: 40%;"></div>
<div class="mountain" style="height: 35%; left: 50%;"></div>
</div>
</body>
</html>
次回に続く
コメントを残す