背景がスクロール寒くなって来たら背景がスクロールクリスマスも近いですね ▼ 背景画像 : 幅 378, 高さ 223概要 ⭐ 画像はシームレスです。斜めの角度は画像サイズに依存します。 ⭐ 100% の値をマイナスにすれば舞い上がります。 ⭐ 本体の position: relative; は、after で postion:absolute を設定するのに必要です。 ( div を一つ外側に追加してそこに設定してもいいとは思います ) ⭐ keyframes の終了(100%) は、画像のサイズである必要があります。 ⭐ 速さは、8s の 8 を変更します。 ⭐ after の横の位置合わせは、本体基準で right です。
<style>
.scroll_background {
margin-top: 50px;
padding: 10px;
width:400px;
background: url("https://lh3.googleusercontent.com/-GU0B2rJdhwU/W_dvZv5LSgI/AAAAAAAAtgM/7n7s1T6JVPkX-BaEKhui0ORu49bLivmxQCHMYBhgL/s378/pat2.jpg");
animation: scroll_snow 8s linear infinite;
position: relative; /* after 用 */
}
@keyframes scroll_snow {
0% { background-position: 0px 0px; }
100% { background-position: 378px 223px; }
}
.scroll_background::after {
background: url(https://pro-300.sakura.ne.jp/white/wp-content/themes/pro-1/cr2.png) left center no-repeat;
background-size: 150px auto;
content: '';
position: absolute;
right:0px;
top: -40px;
width: 150px;
height: 70px;
}
</style>
<pre>
<div class="scroll_background">背景がスクロール</div>
寒くなって来たら
<div class="scroll_background">背景がスクロール</div>
クリスマスも近いですね
</pre>
IE11
▼ デモページの表示イメージ
単純にコピーペーストで使っており、実際動作していたので気が付きませんでした。ちょっと調べてみると、世の中では実際混在しているようでしたが、基本的にはカンマを使うべきなのでしょう。
※ エキスパートモードで表示しています
アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります
