使用する要素のホバーで別の要素のアニメーションをトリガーする#
.banner:has(.product:hover) .rock img:nth-child(3){
transform: translateX(100px) translateY(100px);
}
mask-image#
画像の重ね合わせによって、マスクイメージを使用して缶の効果を作成できます
mask-image を使用したグラデーションの重ね合わせによって、両側が徐々に透明になる効果を作成できます#
mask-image: linear-gradient(
to right,
transparent,
#000 10% 90%,
transparent
);
無限ループのアニメーションで、delay を追加すると無限スクロールの効果を作成できます
.slider .list .item{
width: var(--width);
height: var(--height);
position: absolute;
left: 100%;
animation: autoRun 10s linear infinite;
transition: filter 0.5s;
animation-delay: calc( (10s / var(--quantity)) * (var(--position) - 1) )!important;
}
親子要素に同時にホバー効果を追加することで、選択効果を作成できます
.slider:hover .item{
animation-play-state: paused!important;
filter: grayscale(1);
}
.slider .item:hover{
filter: grayscale(0);
}