学一点别人的css技巧

使用一个元素的 hover 触发另一个元素的动画

Copy
.banner:has(.product:hover) .rock img:nth-child(3){
transform: translateX(100px) translateY(100px);
}

mask-image

图片叠加 mask-image 可以做出易拉罐的效果

mask-image 叠加渐变 做出两边逐渐透明的效果

Copy
mask-image: linear-gradient(
to right,
transparent,
#000 10% 90%,
transparent
);

无限循环的动画，加上 delay 可以做出无限滚动的效果

Copy
.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 效果，做出选中效果

Copy
.slider:hover .item{
animation-play-state: paused!important;
filter: grayscale(1);
}
.slider .item:hover{
filter: grayscale(0);
}

灵活使用 css 变量，可以让动画变得很好做