Learn some CSS tricks from others

Jul 4, 2024160

AI Translation

This post is translated from Chinese into English through AI.View Original

AI-generated summary

Using hover on one element to trigger animation on another element. Overlaying images with mask-image can create a can effect. Using mask-image with gradients can create a gradually transparent effect. Creating infinite loop animations with delay can achieve infinite scrolling effect. Adding hover effects to parent and child elements simultaneously can create a selection effect. Utilizing CSS variables can make animations easier to create.

Trigger animation of one element with hover on another element#

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

mask-image#

Overlaying images with mask-image can create a soda can effect

Overlaying mask-image with gradient to create a gradually transparent effect on both sides#

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

Infinite loop animation, adding delay can create an infinite scrolling effect

.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;
}

Adding hover effect to parent and child elements simultaneously to create a selection effect

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

meanc