こちらの記事は
- CSS
- svg
- html
の知識がある方向けの記事です。
SVG画像とCSSで雪を降せたい
まずは下記をご覧ください。
こちらの表示方法を解説します。
表示の流れ
SVGデータの縦に長いデータを用意
必要な情報を差し込む
SVGデータの線画のみのイラスト用意
こちらで用意した画像ダウンロードお願いします。
必要な情報を差し込む
HTMLとCSSを差し込みしたら完成です。
<div class="main_content_back night winter">
<div class="cloud"></div>
</div>
.night.winter {
background: #3c5164;
background: rgb(60,81,100); /* Old browsers */
background: -moz-linear-gradient(top, rgb(60,81,100) 0%, rgb(81,105,125) 99%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgb(60,81,100) 0%,rgb(81,105,125) 99%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgb(60,81,100) 0%,rgb(81,105,125) 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3c5164', endColorstr='#51697d',GradientType=0 ); /* IE6-9 */
}
.winter .cloud {
background: url(/wp-content/uploads/2022/12/back.svg) center top repeat-x;
background-size: cover;
animation: yuki 50s linear infinite;
-ms-animation: yuki 50s linear infinite;
-moz-animation: yuki 50s linear infinite;
-webkit-animation: yuki 50s linear infinite;
height: 10vw;
}
@keyframes yuki {
from {
background-position: 0 100%;
}
to {
background-position: 0 0;
}
;
}※画像のリンクは適宜変更お願いします。
コメントを残す