使用一個元素的 hover 觸發另一個元素的動畫#
.banner:has(.product:hover) .rock img:nth-child(3){
transform: translateX(100px) translateY(100px);
}
mask-image#
圖片疊加 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;
}
通過父子元素同時添加 hover 效果，做出選中效果
.slider:hover .item{
animation-play-state: paused!important;
filter: grayscale(1);
}
.slider .item:hover{
filter: grayscale(0);
}