SQLの窓

2018年11月23日


タイトルの背景画像を CSS でスクロールさせて雪を降らせ、after を使って画像で装飾する

背景がスクロール
寒くなって来たら
背景がスクロール
クリスマスも近いですね ▼ 背景画像 : 幅 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の最新記事】
posted by lightbox at 2018-11-23 12:47 | HTML / CSS | このブログの読者になる | 更新情報をチェックする
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり