背景がスクロール寒くなって来たら背景がスクロールクリスマスも近いですね ▼ 背景画像 : 幅 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>
|
|
【HTML / CSSの最新記事】
- A 要素と CSS だけでボタンを表現する 『BUTTONS』
- BUTTON 要素と CSS だけでアイコンボタンを表現する 『BUTTONS』
- CENTER 要素内での position:absolute で、位置指定されていない場合の振る舞い
- INPUT type="number" の振る舞いをブラウザ間で調整する
- META 要素の viewport で content 内の区切り文字に ;(セミコロン) を使うと Google Chrome で警告が出ました。
- CSS の display に 設定する inline-table と inline-block を交互に設定して効果を確認
- ブロックレベル要素内のブロックレベル要素を常に中央に表示する jQuery のデモ
- IE9 以降での完全な「データ URI」の利用 / WEBページにバイナリデータを埋め込む / data Protocol
- CSS で、white-space に pre-line を指定している PRE 要素内の ブラウザ毎の結果の違い
- TABLE要素を使わずに DIV 要素を使って横方向にエリアを配置する
- HTML : 画像を使ったボタンのバリエーション
- Picasa と list-style-image を使って、リストのマークをフォントサイズに合わせて拡大・縮小して利用する
- WEB フォントの記述方法の考察
- これがいい方法かどうかは解りませんが、直観的で解りやすい UL 要素内の LI 間の改行調整
- Google Chrome で IFRAME の frameborder="yes" が動作しないのですが(一般仕様はともかくとして)、よくよくブラウザ別に比べるとかなり違います。
- CSS3 の角丸を IE8以前でも使うには( ブログで使うには )
- CSS : display / vertical-align
