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