Learn a few CSS tricks from others

Jul 4, 2024227

AI Translation

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

AI-generated summary

The content discusses various CSS techniques for creating animations and effects. It explains how to trigger animations on one element when hovering over another, use `mask-image` for effects like a can design and gradual transparency, and create infinite scrolling animations with delays. Additionally, it covers how to implement hover effects on parent and child elements for selection effects, and emphasizes the flexibility of using CSS variables to simplify animation creation.

Using one element's hover to trigger another element's animation#

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

mask-image#

Image overlay mask-image can create a can effect

mask-image overlay gradient creates a gradually transparent effect on both sides#

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

Infinite looping 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;
}

By adding hover effects to both parent and child elements, create a selection effect

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

meanc