PiyoさんのTOP画像を、風船と別々に動かすCSSの記述

2021-12-27

アピールエリア

メッセージ 部分に記入した内容

／＊別タブで開く＊／
<a href="リンク先URL" target="_blank">

<img  class="hiyokosan" 
src="画像のURL">
</a>
<img  class="fuusen" 
src="画像のURL">

追加CSSの記入

※この記述だとPCはいいけど、スマホで崩れるので後日修正する

img.hiyokosan{
	position:fixed;
	right:0;
	bottom:-100px;
	width:20%;
	animation: piyoLoop1 17s linear infinite;
	z-index:999;
}
#appeal{
	height:0px;
}
@keyframes piyoLoop1{
	0%{
		bottom:-10%;
	}
	50% {
		bottom:48%;
				}
	100% {
		bottom:-153%;
	}
}
img.fuusen{
	position:fixed;
	right:11%;
	bottom:300px;
	width:10%;
	animation: piyoLoop2 17s linear infinite;
	z-index:888;
}
#appeal{
	height:0px;
}
@keyframes piyoLoop2{
	0%{
		bottom:4%;
	}
	100% {
		bottom:120%;
	}
}