使用一个元素的 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);
}