文字へのスタイルシートの適用結果を、アニメーションで比較できるJavaScriptコードを出力する、Webサービスを作成しました

イントロダクション

文字に対するスタイルシートの適用結果の違いを、アニメーションで比較したいときがありますよね？

そんな時に、使える Web サービスを作ってみました。

文字へのスタイルシートの適用結果を、アニメーションで比較できるJavaScriptコードを出力する、Webサービス

このブログ内の以下のページで公開しています。

Dr.ウーパのコンピュータ備忘録: 文字へのスタイルシートの適用結果を、アニメーションで表示するJavaScriptコードジェネレータ
http://upa-pc.blogspot.jp/p/anime-css.html

文字へのスタイルシートの適用結果を、アニメーションで表示するJavaScriptコードジェネレータ

出来ること

以下のプレビューのように、文字に適用するスタイルシートを一定時間間隔で切り替えます。

プレビュー：

こんにちは！

このプレビューは、以下の条件で生成しました。

スタイルを適用するテキスト:
こんにちは！

テキストのスタイルシート(CSS):
border-style:solid;border-left-color:#ff0000;
border-style:solid;border-top-color:#ff0000;
border-style:solid;border-right-color:#ff0000;
border-style:solid;border-bottom-color:#ff0000;


それらの条件を入力すると、以下の貼り付けコードが提示されます。

貼り付けコード：
<!-- anime css begin -->
<div id="anime-css-container">こんにちは！<script type="text/javascript">
<!--
(function(){function e(){a.setAttribute("style",c[b]);f&&(d.innerHTML="",d.appendChild(document.createTextNode("style:"+c[b])));b++;b>=c.length&&(b=0);setTimeout(e,1E3)}var a=document.getElementById("anime-css-container");if(a){a.removeAttribute("id");var c="border-style:solid;border-left-color:#ff0000;\r\nborder-style:solid;border-top-color:#ff0000;\r\nborder-style:solid;border-right-color:#ff0000;\r\nborder-style:solid;border-bottom-color:#ff0000;".split(/\r\n|\r|\n/g);if(!(0>=c.length)){var f=!0,d=null;f&&(d=document.createElement("div"),a.parentNode.insertBefore(d,a));var b=0;e()}}})();
//-->
</script></div>
<!-- anime css end -->


この貼り付けコードを、Webページやブログページに張り付けることで、文字へのスタイルシートの適用結果を、アニメーションで比較することができるようになります。