- PP: <!DOCTYPE html> <html> <head> <meta charset="utf8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>LikePP</title> <style> h2#h2_a{ font-size:2em; font-weight:500; text-shadow:3px 3px 3px rgba(0,0,0,0.4); color:#008080; /* Animation By Chrome */ -webkit-animation-name:anm_a; -webkit-animation-duration:5s; -webkit-animation-timing-function:ease; -webkit-animation-iteration-count:infinite; /* Animation By IE10*/ animation-name:anm_a; animation-duration:5s; animation-timing-function:ease; animation-iteration-count:infinite; /* Animation By FireFox*/ -moz-animation-name:anm_a; -moz-animation-duration:5s; -moz-animation-timing-function:ease; -moz-animation-iteration-count:infinite; } div#div_a{ font-size:2em; font-weight:400; background-color:#8080ff; color:#ffffff; padding:0em; border-radius:2px; width:80%; box-shadow:2px 2px 2px rgba(0,0,0,0.4); /* Animation */ -webkit-animation-name:anm_b; -webkit-animation-duration:5s; -webkit-animation-timing-function:ease; -webkit-animation-iteration-count:infinite; /* Animation By IE10*/ animation-name:anm_b; animation-duration:5s; animation-timing-function:ease; animation-iteration-count:infinite; /* Animation By FireFox*/ -moz-animation-name:anm_b; -moz-animation-duration:5s; -moz-animation-timing-function:ease; -moz-animation-iteration-count:infinite; } div#div_b{ text-align:center; font-size:1em; font-weight:200; /* Animation By Chrome */ -webkit-animation-name:anm_c; -webkit-animation-duration:0.2s; -webkit-animation-timing-function:ease; -webkit-animation-iteration-count:infinite; -webkit-animation-direction:alternate; /* Animation By IE10*/ animation-name:anm_c; animation-duration:0.2s; animation-timing-function:ease; animation-iteration-count:infinite; animation-direction:alternate; /* Animation By FireFox*/ -moz-animation-name:anm_c; -moz-animation-duration:0.2s; -moz-animation-timing-function:ease; -moz-animation-iteration-count:infinite; -moz-animation-direction:alternate; } /* Keyframes For Chrome*/ @-webkit-keyframes anm_a{ 0%{ color:#008080; -webkit-transform:ratateY(0deg); text-shadow:0px 0px 0px rgba(0,0,0,0.4); } 100%{ color:#ffffff; -webkit-transform:ratateY(180deg); text-shadow:5px 5px 5px rgba(0,0,0,0.4); } } @-webkit-keyframes anm_b{ 0%{ color:#000000; padding:1em; background-color:#ffffff; -webkit-transform:rotateX(270deg); box-shadow:0px 0px 0px 0px rgba(0,0,0,0.4); } 50%{ box-shadow:0px 0px 0px 0px rgba(0,0,0,0.4); } 100%{ color:#ffffff; background-color:#8080ff; -webkit-transform:rotateX(0deg); box-shadow:5px 5px 5px 5px rgba(0,0,0,0.4); } } @-webkit-keyframes anm_c{ 0%{ -webkit-transform:rotateZ(-3deg); } 100%{ -webkit-transform:rotateZ(3deg); } } /* Keyframes For IE10*/ @keyframes anm_a{ 0%{ color:#008080; transform:ratateY(0deg); text-shadow:0px 0px 0px rgba(0,0,0,0.4); } 100%{ color:#ffffff; transform:ratateY(180deg); text-shadow:3px 3px 3px rgba(0,0,0,0.4); } } @keyframes anm_b{ 0%{ color:#000000; padding:1em; background-color:#ffffff; transform:rotateX(270deg); box-shadow:0px 0px 0px 0px rgba(0,0,0,0.4); } 50%{ box-shadow:0px 0px 0px 0px rgba(0,0,0,0.4); } 100%{ color:#ffffff; background-color:#8080ff; transform:rotateX(0deg); box-shadow:5px 5px 5px 5px rgba(0,0,0,0.4); } } @keyframes anm_c{ 0%{ transform:rotateZ(-3deg); } 100%{ transform:rotateZ(3deg); } } /* Keyframes For FireFox*/ @-moz-keyframes anm_a{ 0%{ color:#008080; -moz-transform:ratateY(0deg); text-shadow:0px 0px 0px rgba(0,0,0,0.4); } 100%{ color:#ffffff; -moz-transform:ratateY(180deg); text-shadow:5px 5px 5px rgba(0,0,0,0.4); } } @-moz-keyframes anm_b{ 0%{ color:#000000; padding:1em; background-color:#ffffff; -moz-transform:rotateX(270deg); box-shadow:0px 0px 0px 0px rgba(0,0,0,0.4); } 50%{ box-shadow:0px 0px 0px 0px rgba(0,0,0,0.4); } 100%{ color:#ffffff; background-color:#8080ff; -moz-transform:rotateX(0deg); box-shadow:5px 5px 5px 5px rgba(0,0,0,0.4); } } @-moz-keyframes anm_c{ 0%{ -moz-transform:rotateZ(-3deg); } 100%{ -moz-transform:rotateZ(3deg); } } </style> </head> <body> <h1>ワードプレス実験室にようこそ！</h1> <h1>わたし、初音ミクが歓迎します！</h1> <h2 id="h2_a">皆さんも一緒に踊りましょうよ！</h2> <div id="div_a"> <p>私はバーチャルアイドルです。年齢は16歳、身長は158cm、体重は42kgです。</p></div> <br> <div id="div_b"> <img src="http://oursatra.sakura.ne.jp/nakamura/wp-content/uploads/2013/07/test10.jpg" width="100" id="img_a"><br> ご一緒に、どうぞ！</div> <div> <audio src="http://oursatra.sakura.ne.jp/nakamura/wp-content/uploads/2013/07/Deep_Air.mp3" controls> </audio> </div> <svg id="sir" height="116" width="106" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g transform="scale(0.1)"> <image x="0" y="0" height="1140" width="1040" xlink:href="http://oursatra.sakura.ne.jp/nakamura/wp-content/uploads/2013/07/HTML5_sticker.svg"/> </g> </svg> <h4>（動作確認ブラウザは IE10、 Chrome、FireFox）</h4> </body> </html>