LSSさんのコードの波紋を自分の画像に載せるには・・・LSSさんのコメントから ・background-colorの指定を削除 ・radial-gradientがカンマ区切りで並んでいるところの最後に「url(画像ファイルURL)」を追加 ・keyframesの0%時・100%時、それぞれの内容の最後…

LSSさんのカードをめくるその２は、画像を入れるためのコードではありませんでしたが、そこに無理やり画像を入れると・・・ ←これは画像です ↑下の余白が他の３つよりやや広くなります。このままでも楽しめますが・・・ちょっと気になります。 LSSさんにお聞…

画像を最初の場面に入れるのは「omote」がひっくり返した文章になるので、「ura」に画像のURLを入れます。 <div class="card csize"><input id="tg01" style="display: none;" type="checkbox" /><label id="omote" class="fuda csize" for="tg01">めくると出てくる文章</label><label id="ura" class="fuda csize" for="tg01"></label></div> ↑ この><の間です。 入れた後、「hatena-fotolife」は…

ワクワクするコードを披露して下さるLSSさんへのお礼に作ってみました。 @keyframes bgca{ 0%,20%,100%{background:pink;} 25%,45%{background:lightblue;} 50%,70%{background:lightgreen;} 75%,95%{background:yellow;} } .bgc{ width: 300px; height: 300…

.rpcnc{ height:400px; background: conic-gradient(at 150px 10px,#dde2f7 89.9deg,#f8f8f800 90deg) 25px 0/160px 80px, conic-gradient(at 150px 10px,#dde2f7 89.9deg,#f8f8f800 90deg) 25px 30px/160px 80px, conic-gradient(at 150px 10px,#fce1d8 89.…

.rpcnc{ height:391px; background-color:#cce8f1; } @keyframes radialsx{ 0%,100%{background-position-x:0%;} 50%{background-position-x:100%;} } @keyframes radialsy{ 0%,100%{background-position-y:0%;} 50%{background-position-y:100%;} } @keyfra…

@keyframes curtaina{ 0%,20%,80%,100%{background-size:100% 11000%,100% 11000%;} 40%,60%{background-size:100% 2000%,100% 2000%;} 0%,30%{background-position:0% 51%,0% 51%;} 70%,100%{background-position:0% 0%,0% 0%;} } .curtain{ position:relat…