| 151 |
 2051.Spectrum_White_Light-375w-667h@2x~iphone.heic |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Kiwi+Maru&display=swap" rel="stylesheet"> <style> body { background: black; color: white; font-family: "Kiwi Maru", Arial, sans-serif; } .pickup { color: #ffffff; text-shadow: 0 0 5px white, 0 0 5px white, 0 0 5px white; } .typing { white-space: nowrap; overflow: hidden; display: inline-block; border-right: 3px solid; animation: typing 6s steps(60, end) forwards, blink-caret 0.5s step-end infinite; } .gold { background: linear-gradient(45deg, gold, orange, goldenrod); -webkit-background-clip: text; color: transparent; animation: goldShimmer 3s infinite; } .rainbow { background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet); -webkit-background-clip: text; color: transparent; animation: rainbowShift 3s linear infinite; } .hidden { visibility: hidden; } .visible { visibility: visible; animation: fadeIn 2s forwards; } @keyframes typing { from { width: 0; } to { width: 110%; } } @keyframes blink-caret { 50% { border-color: transparent; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes goldShimmer { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } } @keyframes rainbowShift { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } } </style> <script> document.addEventListener("DOMContentLoaded", function() { const lines = document.querySelectorAll('.line'); lines[0].addEventListener("animationend", () => { lines[1].classList.replace('hidden', 'visible'); setTimeout(() => { lines[2].classList.replace('hidden', 'visible'); setTimeout(() => { lines[3].classList.replace('hidden', 'visible'); }, 2000); }, 2000); }); }); </script> </head> <body> <p class="typing line line1">CSS(style要素)を使うと、<span class="pickup">様々な表現</span>ができます。</p> <p class="line hidden line2 gold">金色の文字や、</p> <p class="line hidden line3 rainbow">虹色に光る文字、</p> <p class="line hidden line4">波打つような文字などを作る事ができます。</p> </body> </html> |
1,081KB |
2024/11/06-21:50 |
アップロード出来る最大ファイル容量は20000KBまでです