世界一不安になるCSSを作ってみた
暇だったんで作りました。
目次
PureCSS デーモンコア
See the Pen PureCSS デーモンコア by Leo_8192 (@Leo_8192) on CodePen.
元ネタはこちら。
デーモンコアの作り方
これいる？
HTML・CSS
<div class="dc_container"> <div class="dc_top"> </div> <div class="dc_base"> <div class="dc_core"></div> <div class="dc_bottom_1"></div> <div class="dc_bottom_2_1"></div> <div class="dc_bottom_2_2"></div> <div class="dc_bottom_3"></div> </div> <div class="tool"> <div class="tool_t"></div> <div class="tool_m"></div> <div class="tool_b"></div> </div> </div>
.container{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.dc_container{
position: relative;
}
.dc_top{
position: relative;
top: 0;
left: 50%;
z-index: 3;
transform-origin: right bottom;
background: radial-gradient(circle at 20%,#eee,#333);
border-radius: 50% 50% 0 0 / 100% 100% 0 0;
width: 120px;
height: 60px;
animation: top_anm 1s ease-in-out infinite alternate;
}
@keyframes top_anm{
0% {transform: translatex(-50%) rotate(9.7deg);}
100%{transform: translatex(-50%) rotate(15.6deg);}
}
.dc_core{
position: absolute;
top: 30px;
left: 50%;
transform: translatex(-50%);
background: radial-gradient(circle at 20%,#888,#333);
border-radius: 50% 50% 0 0 / 100% 100% 0 0;
width: 60px;
height: 30px;
}
.dc_bottom_1{
position: relative;
z-index: 2;
background: radial-gradient(circle at 10% top,#ddd,#111);
border-radius: 0 0 50% 50% / 0 0 100% 100%;
width: 200px;
height: 100px;
}
.dc_bottom_2_1{
position: absolute;
z-index: 1;
top: 140px;
left: 30%;
transform: translatex(-50%);
background: linear-gradient(90deg,#888,#333);
width: 10px;
height: 40px;
}
.dc_bottom_2_2{
position: absolute;
z-index: 1;
top: 140px;
left: 70%;
transform: translatex(-50%);
background: linear-gradient(90deg,#888,#333);
width: 10px;
height: 40px;
}
.dc_bottom_3{
position: absolute;
z-index: 1;
top: 180px;
left: 50%;
transform: translatex(-50%);
background: linear-gradient(90deg,#999,#333);
width: 150px;
height: 20px;
}
.tool{
position: relative;
z-index: 9999;
top: -101px;
left: -112px;
transform-origin: right bottom;
animation: t_anm 1s ease-in-out infinite alternate;
}
@keyframes t_anm{
0% {transform: translatey(0) rotate(30deg);}
100%{transform: translatey(10px) rotate(50deg);}
}
.tool_t{
position: absolute;
top: 5px;
left: 160px;
width: 16px;
height: 10px;
background: linear-gradient(90deg,#aaa,#aaa 12px,#999 12px);
}
.tool_m{
position: absolute;
top: 7px;
left: 60px;
width: 100px;
height: 6px;
background: #aaa;
}
.tool_b{
position: absolute;
top: 0;
left: 0;
border-radius: 10% 40% 40% 10%;
width: 100px;
height: 20px;
background: repeating-linear-gradient(#f00,#f00 2px,#d00 2px,#d00 4px);
}
デーモンコアで遊ぼう
.container1{ display: flex; justify-content: center; align-items: center; height: 800px; } .dc_container{ position: relative; } .dc_top{ position: relative; top: 0; left: 50%; z-index: 3; transform-origin: right bottom; background: radial-gradient(circle at 20%,#eee,#333); border-radius: 50% 50% 0 0 / 100% 100% 0 0; width: 120px; height: 60px; animation: top_anm 0.2s ease-in-out infinite alternate; } @keyframes top_anm{ 0% {transform: translatex(-50%) rotate(9.7deg);} 100%{transform: translatex(-50%) rotate(15.6deg);} } .dc_core{ position: absolute; top: 30px; left: 50%; transform: translatex(-50%); background: radial-gradient(circle at 20%,#888,#333); border-radius: 50% 50% 0 0 / 100% 100% 0 0; width: 60px; height: 30px; } .dc_bottom_1{ position: relative; z-index: 2; background: radial-gradient(circle at 10% top,#ddd,#111); border-radius: 0 0 50% 50% / 0 0 100% 100%; width: 200px; height: 100px; } .dc_bottom_2_1{ position: absolute; z-index: 1; top: 140px; left: 30%; transform: translatex(-50%); background: linear-gradient(90deg,#888,#333); width: 10px; height: 40px; } .dc_bottom_2_2{ position: absolute; z-index: 1; top: 140px; left: 70%; transform: translatex(-50%); background: linear-gradient(90deg,#888,#333); width: 10px; height: 40px; } .dc_bottom_3{ position: absolute; z-index: 1; top: 180px; left: 50%; transform: translatex(-50%); background: linear-gradient(90deg,#999,#333); width: 150px; height: 20px; } .tool{ position: relative; z-index: 9999; top: -101px; left: -112px; transform-origin: right bottom; animation: t_anm 0.2s ease-in-out infinite alternate; } @keyframes t_anm{ 0% {transform: translatey(0) rotate(30deg);} 100%{transform: translatey(10px) rotate(50deg);} } .tool_t{ position: absolute; top: 5px; left: 160px; width: 16px; height: 10px; background: linear-gradient(90deg,#aaa,#aaa 12px,#999 12px); } .tool_m{ position: absolute; top: 7px; left: 60px; width: 100px; height: 6px; background: #aaa; } .tool_b{ position: absolute; top: 0; left: 0; border-radius: 10% 40% 40% 10%; width: 100px; height: 20px; background: repeating-linear-gradient(#f00,#f00 2px,#d00 2px,#d00 4px); }～Fin～
