「text-shadow」で文字をずらしたローディングアニメーション

keyframeで「text-shadow」を指定し文字が下にずれるアニメーションにしています。
B!
css ずらし アニメーション loading

関連パーツ

フリーランスエンジニアについて図解付きで解説
CSS基礎完全ガイド
HTML基礎完全ガイド
'); } // タイトルとdescriptionを設定 if ($clonedHtml.find('head title').length > 0) { $clonedHtml.find('head title').text(pageTitle); } else { $clonedHtml.find('head').prepend('' + pageTitle + ''); } if (pageDescription) { if ($clonedHtml.find('head meta[name="description"]').length > 0) { $clonedHtml.find('head meta[name="description"]').attr('content', pageDescription); } else { $clonedHtml.find('head').append(''); } } const htmlContent = '\n' + $clonedHtml.prop('outerHTML'); const blob = new Blob([htmlContent], { type: 'text/html;charset=utf-8' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'index.html'; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); console.log('HTMLのみダウンロード完了'); } catch (error) { console.error('HTMLダウンロードエラー:', error); alert('HTMLのダウンロードに失敗しました。'); } }); //--------------------------------- // CSSのみダウンロード //--------------------------------- $(document).on('click', '#download-css-btn', function() { try { const { $clonedHtml } = getCleanedIframeContent(); // すべてのstyleタグの内容を抽出 let cssContent = ''; $clonedHtml.find('style').each(function() { const content = $(this).html(); if (content) { cssContent += content + '\n\n'; } }); if (!cssContent.trim()) { alert('CSSが見つかりませんでした。'); return; } const blob = new Blob([cssContent], { type: 'text/css;charset=utf-8' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'style.css'; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); console.log('CSSダウンロード完了'); } catch (error) { console.error('CSSダウンロードエラー:', error); alert('CSSのダウンロードに失敗しました。'); } }); //--------------------------------- // JavaScriptのみダウンロード //--------------------------------- $(document).on('click', '#download-js-btn', function() { try { const { $clonedHtml } = getCleanedIframeContent(); // すべてのscriptタグの内容を抽出（外部スクリプトは除く） let jsContent = ''; $clonedHtml.find('script').each(function() { // src属性がないインラインスクリプトのみ if (!$(this).attr('src')) { const content = $(this).html(); if (content) { jsContent += content + '\n\n'; } } }); if (!jsContent.trim()) { alert('JavaScriptが見つかりませんでした。'); return; } const blob = new Blob([jsContent], { type: 'text/javascript;charset=utf-8' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'script.js'; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); console.log('JavaScriptダウンロード完了'); } catch (error) { console.error('JavaScriptダウンロードエラー:', error); alert('JavaScriptのダウンロードに失敗しました。'); } }); });