ＣＳＳ：連続写真を重ねてX'masイルミネーションやスライドショーをブログで表示したい。 [パソコン]
ブログでクリスマス・ツリーが点滅している様子を再現したくてテストしています
タイトルをクリックするとＣＳＳアニメーションのページにリンクします。
タイトルをクリックするとＣＳＳアニメーションのページにリンクします。
①（５枚の連続写真） お台場・X'masツリーとレインボーブリッジ
②（２枚の画像でスライドショー）イルミネーション・ツリー
③（５枚の画像でスライドショー）お台場・イルミネーション
④（５枚の連続写真）イタリア・青の洞窟の入口
②（２枚の画像でスライドショー）イルミネーション・ツリー
③（５枚の画像でスライドショー）お台場・イルミネーション
④（５枚の連続写真）イタリア・青の洞窟の入口
使いまわしがしたいので①から④まで同じＣＳＳで行っています。
htmlは５枚の連続写真を<DIV class="photo-illumination5">で囲みます。
htmlは５枚の連続写真を<DIV class="photo-illumination5">で囲みます。
<body>
<br> <br> ＣＳＳ スライドショーのテスト<br> <br>
①（５枚の連続写真） お台場・X'masツリーとレインボーブリッジ
<DIV class="photo-illumination5">
<IMG src="./IMG_8333.JPG">
<IMG src="./IMG_8334.JPG">
<IMG src="./IMG_8335.JPG">
<IMG src="./IMG_8336.JPG">
<IMG src="./IMG_8337.JPG">
</DIV>
</body></html>
<br> <br> ＣＳＳ スライドショーのテスト<br> <br>
①（５枚の連続写真） お台場・X'masツリーとレインボーブリッジ
<DIV class="photo-illumination5">
<IMG src="./IMG_8333.JPG">
<IMG src="./IMG_8334.JPG">
<IMG src="./IMG_8335.JPG">
<IMG src="./IMG_8336.JPG">
<IMG src="./IMG_8337.JPG">
</DIV>
</body></html>
今のところ、（U-Page+）にcss、html、画像ファイルを置いた場合はＯＫ。
後はブログのcss編集での確認になります。
cssアニメーションはかなりCPUを食いそう。
①から④を一気に表示させたらスマホではカクカクした表示でした。
なので今回のテストのようにU-Page+にリンクした方が良さそうです。
その場合はU-Page+は10mByteしかないので写真はブログに登録してU-Page+のhtmlから画像をリンクできるか？
作成したＣＳＳは IE、Chrome、Safari だけ対応しています。
今回はここまでにします。
コメント 0