マルチプルバックグラウンド
マルチプルバックグラウンドを使った hover エフェクト
Memo:AMP validationは、一応 OK 別サイトのAMPページのテストでは、正常に表示できました。
Example OK: a:hover, div:last-of-type
Example not OK: amp-img:hover, amp-img:last-of-type
背景ならOKなのかなー
HTML
<div class="bg-image"></div>
CSS
.bg-image{
width:290px;
height:290px;
background-image: url(https://tenman.info/labo/css/files/raspberries.jpg), url(https://tenman.info/labo/css/files/tanpopo.jpg);
background-size:contain;
}
マルチプルバックグラウンド
マルチプルバックグラウンドを使った スライドショー
firefox , safari 難あり
HTML
<div class="bg-image-slide"></div>
CSS
.bg-image-slide{
width:290px;
height:290px;
background-image: url(https://tenman.info/labo/css/files/raspberries.jpg), url(https://tenman.info/labo/css/files/tanpopo.jpg),url(https://tenman.info/labo/css/files/face1.jpg);
background-position: 0 0,0 0,0 0;
background-repeat:no-repeat;
background-size:contain;
animation: my_slide 10s infinite;
}
@keyframes my_slide {
0% {
background-position:0 0, 0 0,0 0,;
}
30%{
background-position:299px 299px, -299px -299px,0 0;
}
60%{
background-position:299px 299px, 0 0,0 0;
}
100% {
background-position:0 0, 0 0,0 0;
}
}
.bg-image-slide:hover {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}