在反應 mui 組件上使用 css codepen

Question

我正在嘗試使用 react 和 makeStyles 使這種影響在我的材料 ui 卡組件上工作，我真的不知道如何將這種影響轉換為卡，有人可以幫我將其翻譯成簡單的 css 代碼，以便我可以使用它在 MakeStyles 中？ 我認為我的問題是我不理解 codepen 上的代碼，如果你們中的一些人有類似的 codepen 並且可以分享它，我將不勝感激，謝謝。

https://codepen.io/chrisdothtml/pen/OVmgwK

/* Reset */
@import url(//codepen.io/chrisdothtml/pen/ojLzJK.css);

// variables
$anim-speed: 0.3s;

// main styles
.tiles {
    width: 1040px;
    font-size: 0;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    
    .tile {
        display: inline-block;
        margin: 10px;
        text-align: left;
        opacity: .99;
        overflow: hidden;
        position: relative;
        border-radius: 3px;
        box-shadow: 0 0 20px 0 rgba(0,0,0,.05);
        
        &:before {
            content: '';
            background: linear-gradient(
                to bottom,
                rgba(0,0,0,0) 0%,
                rgba(0,0,0,0.7) 100%
            );
            width: 100%;
            height: 50%;
            opacity: 0;
            position: absolute;
            top: 100%;
            left: 0;
            z-index: 2;
            transition-property: top, opacity;
            transition-duration: $anim-speed;
        }
        
        img {
            display: block;
            max-width: 100%;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
        }
        
        .details {
            font-size: 16px;
            padding: 20px;
            color: #fff;
            position: absolute;
            bottom: 0;
            left: 0;
            z-index: 3;
            
            span {
                display: block;
                opacity: 0;
                position: relative;
                top: 100px;
                transition-property: top, opacity;
                transition-duration: $anim-speed;
                transition-delay: 0s;
            }
            
            .title {
                line-height: 1;
                font-weight: 600;
                font-size: 18px;
            }
            
            .info {
                line-height: 1.2;
                margin-top: 5px;
                font-size: 12px;
            }
        }
        
        &:focus,
        &:hover {
            
            &:before,
            span {
                opacity: 1;
            }
            
            &:before {
                top: 50%;
            }
            
            span {
                top: 0;
            }
            
            .title {
                transition-delay: 0.15s;
            }
            
            .info {
                transition-delay: 0.25s;
            }
        }
    }
}

Answer 1

您在 CodePen 上看到的 CSS 代碼使用SCSS 。 單擊 CSS 編輯器下拉圖標 -> 查看已編譯的 CSS。

顯然，顧名思義，這將顯示已編譯的 CSS。 :)