Some small special effects encountered in ordinary work, record, when used directly copy and paste

Translucent border

Background information Background-clip

In CSS3, we can change the background’s default behavior by setting background-Clip: padding-box to the desired effect. In CSS3, we can set background-Clip: padding-box to the desired effect

<style> main { width: 100%; height: 100vh; background: #4b7b7c; padding-top: 100px; } div { padding: 12px; margin: 20px auto; width: 200px; background: #c7b723; border: 10px solid hsla(0, 0%, 100%, .5); } .default { margin-top: 20px; background-clip: padding-box; } < / style > < body > < main > < div > default background < / div > < div class = "default" > background transparent borders < / div > < / main > < / body >Copy the code

The effect is as follows:

Multiple frames

Box-shadow,outline,outline-offset

Box-shadow, on the other hand, only comes to mind when we need to implement the shadow. In fact, box-shadow also takes a fourth parameter as the shadow extension radius. When we just set the extension radius, zero offset, zero blur, The result is essentially a solid line “border”.

Box-shadow can only simulate a solid border effect. In some cases, we may need to generate a dashed border effect. We can do this by using outline like border and the corresponding outline offset.

<style>
    main {
        width: 100%;
        padding: 0 10vh;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }
    div:nth-of-type(1) {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: #c0faf5;
        margin: 105px 29px;
        box-shadow: 0 0 0 10px #ace0db, 0 0 0 20px #94c0bc,
            0 0 0 30px #83aaa7, 0 0 0 40px #6b928f,
            0 0 0 50px #598884, 0 0 0 60px #3b7973,
            0 0 0 70px #2b746d, 0 0 0 80px #1a5f59;
    }
    div:nth-of-type(2) {
        width: 200px;
        height: 120px;
        background: #a3d6d2;
        border: 5px solid #4b7b7c;
        margin-left: 200px;
        outline: #4b7b7c dashed 1px;
        outline-offset: -10px;
        margin-bottom: 20px;
    }
</style>
<body>
    <main>
        <div></div>
        <div></div>
    </main>
</body>
Copy the code

GIF stripe progress bar

Background knowledge repeating-Linear-gradient and Animation

<style> main { width: 800px; padding: 80px 0px; display: flex; flex-wrap: wrap; justify-content: space-around; } .progress-outer { width: 60%; height: 12px; border-radius: 8px; overflow: hidden; position: relative; } .progress-enter { height: inherit; background: #d6ecea; } .progress-bg { width: 60%; height: inherit; border-radius: 6px; background: repeating-linear-gradient(-45deg, #ace0db 25%, #1a5f59 0, #ace0db 50%, #1a5f59 0, #ace0db 75%, #1a5f59 0); background-size: 16px 16px; animation: progressAnimation 20s linear infinite; } @keyframes progressAnimation { to { background-position: 200% 0; } } </style> <body> <main> <div class="progress-outer"> <! - better extension -- > < div class = "progress - enter" > < div class = "progress - bg" > < / div > < / div > <! -- <span>60%</span> --> </div> </main> </body>Copy the code

It’s going to be dynamic, so I don’t want to take a screenshot here