結果を表示する
元にもどす
<html> <meta charset="utf-8"> <style> hr{margin-top:24px; margin-left:-10px; background-color:#123456; width:600px; height:20px;} .テキスト{position:absolute; top:50px; left:200px; z-index:10; text-align:center;} .テキスト span:nth-of-type(1){animation-delay:0;} .テキスト span:nth-of-type(2){animation-delay:0.2s;} .テキスト span:nth-of-type(3){animation-delay:0.24s;} .テキスト span:nth-of-type(4){animation-delay:0.28s;} .テキスト span:nth-of-type(5){animation-delay:0.32s;} .テキスト span:nth-of-type(6){animation-delay:0.36s;} .テキスト span:nth-of-type(7){animation-delay:0.4s;} .テキスト span:nth-of-type(8){animation-delay:0.44s;} .テキスト span:nth-of-type(9){animation-delay:0.48s;} .テキスト span{display:block; font-family:Arial Black; font-size:40px; color:#123456; opacity:0; transform:translate(-150px,-50px)rotate(-180deg)scale(3); animation:アニメーション_ロゴ 0.8s forwards;} @keyframes アニメーション_ロゴ{50%{transform:translate(20px,20px)rotate(30deg)scale(0.5);} 100%{transform:translate(0)rotate(0)scale(1); opacity:0.8; filter:drop-shadow(3px 3px 5px silver);}} .パス_0{position:fixed; top:30px; left:8px; z-index:-30;} .パス_1{position:fixed; top:42px; left:162px; z-index:-10;} .パス_2{position:absolute; top:20px; left:0; z-index:40;} .パス_3{position:fixed; top:124px; left:102px; filter:drop-shadow(4px 4px 4px rgba(0,0,0,0.5)); z-index:0;} .ストローク_ダッシュ_0{stroke:#456879; stroke-width:5; fill:#abcdef; stroke-dasharray:10; stroke-dashoffset:300; animation:line 1s infinite linear forwards;} @keyframes line{to{stroke-dashoffset:0;}} .ストローク_ダッシュ_1{stroke:#778899; stroke-width:2; fill:none; stroke-dasharray:2000; stroke-dashoffset:2000; animation:line 2s linear forwards; animation-delay:1s;} @keyframes line{to{stroke-dashoffset:0;}} .ストローク_ダッシュ_2{stroke:#123456; stroke-width:20; fill:none; stroke-dasharray:800; stroke-dashoffset:800; animation:line 1s linear forwards; animation-delay:3s;} @keyframes line{to{stroke-dashoffset:0;}} .ストローク_ダッシュ_3{stroke:#ffffff; stroke-width:0.5; fill:none; stroke-dasharray:4000; stroke-dashoffset:4000; animation:line 12s linear forwards; animation-delay:1s;} @keyframes line{to{stroke-dashoffset:0;}} .スピナー .サークル{display:inline-block; position:absolute; top:108; left:306; width:0px; height:440px; animation:spin 3s cubic-bezier(0.64,0.01,0.29,1)0s infinite; z-index:-20;} .スピナー .サークル::after{content:''; display:block; width:20px; height:20px; background-color:#ffffff; border-radius:10px;} .スピナー .サークル.ポイント_1{animation-delay:200ms;} .スピナー .サークル.ポイント_2{animation-delay:400ms;} .スピナー .サークル.ポイント_3{animation-delay:600ms;} .スピナー .サークル.ポイント_4{animation-delay:800ms;} .スピナー .サークル.ポイント_5{animation-delay:1000ms;} .スピナー .サークル.ポイント_6{animation-delay:1200ms;} .スピナー .サークル.ポイント_7{animation-delay:1400ms;} .スピナー .サークル.ポイント_8{animation-delay:1600ms;} @keyframes spin{0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);}} .スピナー .ボックス .サークル:after{box-shadow:0 6px 10px 0 rgba(0, 0, 0, 0.2);} </style> <hr> <div class="パス_0"> <svg width="600" height="600""viewBox="0 0 100 100"> <circle cx="300"cy="300"r="220"class="ストローク_ダッシュ_0"> </svg> </div> <div class="テキスト"> <span>Study</span> <span>H</span><span>T</span><span>M</span><span>L</span> <span>C</span><span>S</span><span>S</span> <span>JavaScript</span> </div> <svg width="600"height="600"viewBox="0 0 600 600"class="パス_1"> <path d="M10.3,545.1c0-19.7,64.3-35.6,143.7-35.6s143.7,15.9,143.7,35.6c0,19.7-64.3,33.7-143.7,35.6 c-26.8,0.6-82.7-3.3-82.7-3.3s-60.9-3.8-60.9-36.9c0,0-5.3-42.7,77.5-43.1h68.5c47.7,0,86.4-38.7,86.4-86.4 c0-32-17.4-59.9-43.2-74.9l-0.8-0.5c0,0-14.6-10.2-44.9-17.6c-38.8-9.5-58-21.5-58-21.5l-0.7-0.4C64.4,276,44,241.2,44,201.6 c0-36.1,17-68.3,43.5-88.8c0,0,13.7-11.5,29.6-19s33.2-10.3,33.2-10.3s90.9-18.5,81.9-42.8c-5.7-15.2-34.1-29.5-76.2-29.5 S79.9,24.5,79.9,40.8s34.1,29.5,76.2,29.5c33.2,0,61.4-8.2,71.8-19.6"class="ストローク_ダッシュ_1"></path> </svg> <svg width="1000"height="1000"viewBox="0 0 1000 1000"class="パス_2"> <path d="M10,625v-620"class="ストローク_ダッシュ_2"></path> <path d="M0,620h600"class="ストローク_ダッシュ_2"></path> <path d="M590,5v625"class="ストローク_ダッシュ_2"></path> </svg> </div> <div class="セット スピナー"> <div class="ボックス"> <span class="サークル ポイント_1"></span> <span class="サークル ポイント_2"></span> <span class="サークル ポイント_3"></span> <span class="サークル ポイント_4"></span> <span class="サークル ポイント_5"></span> <span class="サークル ポイント_6"></span> <span class="サークル ポイント_7"></span> <span class="サークル ポイント_8"></span> </div> </div> <svg width="600"height="600"viewBox="0 0 600 600"class="パス_3"> <path d="M349.2,63.9C311.5,26.2,261.3,5.4,207.9,5.4c-53.4,0-103.6,20.8-141.3,58.5C28.9,101.6,8.2,151.8,8.2,205.2 s20.8,103.6,58.5,141.3c37.7,37.7,87.9,58.5,141.3,58.5c53.4,0,103.6-20.8,141.3-58.5c37.7-37.7,58.5-87.9,58.5-141.3 C407.6,151.8,386.9,101.6,349.2,63.9z M406.6,205.2c0,21-3.2,41.5-9.5,61l-30.6-10c5.2-16.3,7.9-33.4,7.9-51 c0-44.5-17.3-86.3-48.7-117.8c-6.1-6.1-12.6-11.7-19.5-16.7l18.9-26.1c8.2,6,16,12.7,23.3,20C386,102.1,406.6,152,406.6,205.2z M208.7,204.9l18.8-25.9c7.9,6,13.1,15.5,13.1,26.2c0,3.4-0.5,6.6-1.4,9.6L208.7,204.9z M238.8,215.7 c-4.4,12.7-16.3,21.9-30.4,22.1v-32L238.8,215.7z M207.9,204.3l-18.8-25.9c5.3-3.8,11.8-6,18.8-6c7,0,13.5,2.2,18.8,6L207.9,204.3 z M207.1,204.9l-30.4,9.9c-0.9-3-1.4-6.3-1.4-9.6c0-10.7,5.1-20.2,13.1-26.2L207.1,204.9z M207.4,205.8v32 c-14.1-0.2-26.1-9.4-30.4-22.1L207.4,205.8z M208.4,238.9c14.6-0.2,26.9-9.7,31.4-22.8l30.6,10c-8.7,26-33.2,44.8-62,45.1V238.9z M240.1,215.1c1-3.1,1.5-6.5,1.5-9.9c0-11-5.3-20.8-13.5-27l18.9-26c16.2,12,26.8,31.3,26.8,53c0,6.9-1.1,13.6-3.1,19.9 L240.1,215.1z M227.3,177.6c-5.5-3.9-12.2-6.2-19.4-6.2s-13.9,2.3-19.4,6.2l-18.9-26c10.8-7.7,24-12.3,38.3-12.3 c14.3,0,27.5,4.6,38.3,12.3L227.3,177.6z M187.7,178.2c-8.2,6.2-13.5,15.9-13.5,27c0,3.5,0.5,6.8,1.5,9.9l-30.6,10 c-2-6.3-3.1-13-3.1-19.9c0-21.7,10.5-41,26.8-53L187.7,178.2z M176,216c4.5,13.1,16.8,22.6,31.4,22.8v32.2 c-28.8-0.2-53.3-19.1-62-45.1L176,216z M207.4,272.1v32.2c-43.6-0.2-80.6-28.7-93.6-68l30.6-10 C153.3,252.7,178.1,271.8,207.4,272.1z M208.4,272.1c29.3-0.2,54.1-19.3,63-45.8l30.6,10c-13,39.3-50,67.8-93.6,68V272.1z M271.7,225.4c2-6.4,3.1-13.2,3.1-20.2c0-22-10.7-41.6-27.2-53.8l18.9-26c24.5,18.1,40.5,47.1,40.5,79.9c0,10.5-1.7,20.6-4.7,30.2 L271.7,225.4z M246.8,150.8c-11-7.9-24.4-12.5-38.9-12.5c-14.5,0-27.9,4.7-38.9,12.5l-18.9-26.1c16.3-11.7,36.3-18.7,57.8-18.7 c21.6,0,41.5,6.9,57.8,18.7L246.8,150.8z M168.2,151.3c-16.5,12.2-27.2,31.8-27.2,53.8c0,7,1.1,13.8,3.1,20.2l-30.6,10 c-3-9.5-4.7-19.6-4.7-30.2c0-32.7,15.9-61.8,40.5-79.9L168.2,151.3z M107.8,205.2c0,10.6,1.7,20.9,4.7,30.5l-30.6,10 c-4.1-12.7-6.3-26.3-6.3-40.4c0-43.8,21.4-82.6,54.2-106.7l18.9,26C123.9,142.7,107.8,172.1,107.8,205.2z M112.8,236.6 c13.2,39.7,50.5,68.5,94.6,68.7v32.2c-58.3-0.2-107.8-38.3-125.2-91L112.8,236.6z M208.4,305.3c44-0.2,81.4-29,94.6-68.7l30.6,10 c-17.4,52.6-66.9,90.7-125.2,91V305.3z M303.3,235.6c3.1-9.6,4.7-19.8,4.7-30.5c0-33.1-16.1-62.4-40.9-80.7l18.9-26 c32.8,24.1,54.2,63,54.2,106.7c0,14.1-2.2,27.7-6.3,40.4L303.3,235.6z M266.3,123.9C249.9,112,229.7,105,207.9,105 c-21.8,0-42,7-58.4,18.9l-18.9-26c21.8-15.7,48.5-25,77.3-25c28.9,0,55.6,9.3,77.3,25L266.3,123.9z M207.9,71.8 c-29.1,0-56,9.4-77.9,25.2l-19-26.1c28-20.3,61.6-31.3,96.9-31.3c35.3,0,68.9,11,96.9,31.3l-19,26.1 C263.9,81.2,237,71.8,207.9,71.8z M129.2,97.6c-33.1,24.3-54.6,63.4-54.6,107.5c0,14.2,2.2,27.9,6.4,40.7l-30.7,10 c-5.2-16.2-7.9-33.2-7.9-50.7c0-44.3,17.2-85.8,48.5-117.1c6.1-6.1,12.5-11.6,19.3-16.6L129.2,97.6z M81.3,246.8 c17.5,53,67.4,91.4,126.1,91.6v32.2c-44.1-0.1-85.4-17.3-116.6-48.4c-18.7-18.7-32.3-41-40.3-65.4L81.3,246.8z M208.4,338.5 c58.7-0.2,108.7-38.6,126.1-91.6l30.7,10c-8,24.4-21.6,46.8-40.3,65.4c-31.1,31.1-72.5,48.3-116.6,48.4V338.5z M334.9,245.9 c4.1-12.8,6.4-26.5,6.4-40.7c0-44.1-21.5-83.2-54.6-107.5l19-26.2c6.8,5,13.3,10.5,19.3,16.6c31.2,31.2,48.5,72.8,48.5,117.1 c0,17.5-2.7,34.5-7.9,50.7L334.9,245.9z M324.4,44l-18.9,26.1c-28.2-20.4-62-31.5-97.5-31.5c-35.5,0-69.3,11-97.5,31.5L91.4,44 c33.7-24.4,74-37.6,116.5-37.6C250.3,6.4,290.7,19.6,324.4,44z M67.3,64.6c7.3-7.3,15.1-14,23.3-20l18.9,26.1 c-6.8,5-13.3,10.6-19.5,16.7c-31.4,31.4-48.7,73.3-48.7,117.8c0,17.6,2.7,34.7,7.9,51l-30.6,10c-6.2-19.4-9.5-40-9.5-61 C9.2,152,29.8,102.1,67.3,64.6z M18.9,267.1l30.6-10c8,24.6,21.8,47,40.5,65.8c31.3,31.3,73,48.6,117.3,48.7v32.2 c-52.9-0.1-102.7-20.8-140.1-58.2C44.9,323.3,28.5,296.4,18.9,267.1z M348.5,345.7c-37.4,37.4-87.1,58-140.1,58.2v-32.2 c44.3-0.1,86-17.4,117.3-48.7c18.8-18.8,32.5-41.3,40.5-65.8l30.6,10C387.3,296.4,370.9,323.3,348.5,345.7z"class="ストローク_ダッシュ_3"></path> </svg> </html>