8192.jp

世界一不安になるCSSを作ってみた

Web制作 2022/07/29 2022/07/29

暇だったんで作りました。

目次

    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); }
    .dc_top2{ 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; transform: translatex(-50%) rotate(9.7deg); animation: none; } .tool2{ position: relative; z-index: 9999; top: -101px; left: -112px; transform-origin: right bottom; transform: translatey(0) rotate(30deg); animation: none; }
    .dc_top3{ 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; transform: translatex(-50%) rotate(0deg); animation: none; } .tool3{ position: relative; z-index: 9999; top: -111px; left: -150px; transform-origin: right bottom; transform: translatey(0) rotate(30deg); animation: none; }

    ~Fin~