漸變虛框及邊框滾動的實現

時間 2019-12-05

標籤漸變虛框邊框滾動實現简体版

原文原文鏈接

幾行簡單的CSS代碼便可實現圖上的邊框效果：javascript

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    body {
        background: #ddd;
    }

    .box {
        width: 200px;
        height: 150px;
        border: 2px dashed #cd0000;
        box-sizing: border-box;
    }

    .box {
        border: none;
        background: linear-gradient(to bottom, #34538b, #cd0000) no-repeat;
        mask: linear-gradient(to right, #000 6px, transparent 6px) repeat-x,
        linear-gradient(to bottom, #000 6px, transparent 6px) repeat-y,
        linear-gradient(to right, #000 6px, transparent 6px) repeat-x 0 100%,
        linear-gradient(to bottom, #000 6px, transparent 6px) repeat-y 100% 0;
        mask-size: 8px 2px, 2px 8px, 8px 2px, 2px 8px;
        -webkit-mask: linear-gradient(to right, #000 6px, transparent 6px) repeat-x 100% 0,
        linear-gradient(to bottom, #000 6px, transparent 6px) repeat-y,
        linear-gradient(to right, #000 6px, transparent 6px) repeat-x 0% 100%,
        linear-gradient(to bottom, #000 6px, transparent 6px) repeat-y 100% 50%;

        -webkit-mask-size: 8px 2px, 2px 8px, 8px 2px, 2px 8px;
    }

    .box2 {
        width: 200px;
        background: repeating-linear-gradient(135deg, transparent, transparent 3px, #e81414 6px, #2a0ce0 10px);
        animation: shine 1s infinite linear;
        overflow: hidden;
    }

    .content {
        height: 128px;
        margin: 1px;
        padding: 10px;
        background-color: #fff;
    }

    @keyframes shine {
        0% {
            background-position: -1px -1px;
        }
        100% {
            background-position: -12px -12px;
        }
    }

    .box3 {
        display: inline-block;
        padding: 10px;
        position: relative;
    }

    .box3::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        border: 2px solid #cd0000;
        animation: borderAround 1.5s infinite linear;
    }

    @keyframes borderAround {
        0%,
        100% {
            clip: rect(0 148px 2px 0);
        }
        25% {
            clip: rect(0 148px 116px 146px);
        }
        50% {
            clip: rect(114px 148px 116px 0);
        }
        75% {
            clip: rect(0 2px 116px 0);
        }
    }

    .content2 {
        width: 128px;
        height: 96px;
        background: #ff0;
    }
    </style>
</head>

<body>
    <div class="box">
    </div>
    <br>
    <div class="box2">
        <div class="content">內容佔位</div>
    </div>
    <br>
    <div class="box3">
        <div class="content2"></div>
    </div>
    <script type="text/javascript">
    </script>
</body>

</html>

參考博客：妙法攻略：漸變虛框及邊框滾動動畫的純CSS實現css

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。