zoukankan      html  css  js  c++  java
  • 如何用纯 CSS 创作一根闪电连接线

    效果预览

    在线演示

    按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。

    https://codepen.io/comehope/pen/RBjdzZ

    可交互视频

    此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。

    请用 chrome, safari, edge 打开观看。

    https://scrimba.com/p/pEgDAM/cgkE6C6

    源代码下载

    本地下载

    每日前端实战系列的全部源代码请从 github 下载:

    https://github.com/comehope/front-end-daily-challenges

    代码解读

    定义 dom,容器中包含 2 个元素,分别代表插头和线缆:

    <div class="cable">
        <span class="head"></span>
        <span class="body"></span>
    </div>
    

    居中显示:

    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
    }
    

    定义容器尺寸:

    .cable {
        display: flex;
        align-items: center;
        font-size: 10px;
        margin-left: 5em;
    }
    

    画出插头的轮廓:

    .head {
         8.5em;
        height: 8.5em;
        border-radius: 2em 0 0 2em;
    }
    

    画出插头上针脚的轮廓:

    .head {
        position: relative;
    }
    
    .head::before {
        content: '';
        position: absolute;
         3em;
        height: 7.3em;
        top: calc((8.5em - 7.3em) / 2);
        left: 0.7em;
        border-radius: 1em;
        box-sizing: border-box;
    }
    

    画出线缆中手持部位的轮廓:

    .body {
         15.5em;
        height: 11em;
        border-radius: 0.5em;
    }
    

    画出线缆中稍粗部位的轮廓:

    .body {
        position: relative;
        display: flex;
        align-items: center;
    }
    
    .body::before {
        content: '';
        position: absolute;
         13.5em;
        height: 6em;
        left: 15.5em;
    }
    

    画出线缆的延长线部分:

    .body::after {
        content: '';
        position: absolute;
         100vh;
        height: 3.9em;
        left: calc(15.5em + 13.5em);
    }
    

    隐藏画面外的部分:

    body {
        overflow: hidden;
    }
    

    接下来绘制细节。
    为延长线涂上渐变色:

    .body::after {
        background:
            linear-gradient(
                white,
                hsl(0, 0%, 96%) 5%,  
                hsl(0, 0%, 97%) 25%, 
                hsl(0, 0%, 95%) 40%, 
                hsl(0, 0%, 81%) 95%,
                white
            );
    }
    

    为线缆中稍粗部位涂上渐变色:

    .body::before {
        background:
            linear-gradient(
                white,
                hsl(0, 0%, 96%) 5%,  
                hsl(0, 0%, 98%) 20%, 
                hsl(0, 0%, 95%) 50%, 
                hsl(0, 0%, 81%) 95%,
                white
            );
    }
    

    为线缆中手持部位涂上渐变色:

    .body {
        background:linear-gradient(
            hsl(0, 0%, 91%),
            white 15%, 
            hsl(0, 0%, 93%) 50%, 
            hsl(0, 0%, 87%) 70%,
            hsl(0, 0%, 79%) 90%,
            hsl(0, 0%, 84%), 
            hsl(0, 0%, 86%)
        );
    }
    

    为插头涂上渐变色:

    .head {
        background:
            linear-gradient(
                -45deg, 
                hsl(0, 0%, 75%),
                hsl(0, 0%, 79%),
                hsl(0, 0%, 78%),
                hsl(0, 0%, 87%) 80%
            );
    }
    

    在插头上画出针脚:

    .head::before {
        background-color: white;
    }
    
    .head::after {
        content: '';
        position: absolute;
        box-sizing: border-box;
         2.2em;
        height: 0.4em;
        color: goldenrod;
        background-color: currentColor;
        border-radius: 0.5em;
        left: 1.1em;
        top: 1.2em;
        box-shadow: 
            0 0.8em 0,
            0 1.6em 0,
            0 2.4em 0,
            0 3.2em 0,
            0 4em 0,
            0 4.8em 0,
            0 5.6em 0;
    }
    

    接下来添加阴影,使线缆更立体。
    绘制插头上的阴影:

    .head {
        background:
            linear-gradient(
                90deg, 
                transparent 80%,
                rgba(0,0,0,12%)
            ),
            linear-gradient(
                -45deg, 
                hsl(0, 0%, 75%),
                hsl(0, 0%, 79%),
                hsl(0, 0%, 78%),
                hsl(0, 0%, 87%) 80%
            );
    }
    

    绘制线缆手持部分的阴影:

    .body::before {
        background:
            linear-gradient(
                45deg, 
                rgba(0,0,0,4%) 10%,
                transparent 20%
            ),    
            linear-gradient(
                90deg, 
                rgba(0,0,0,4%), 
                transparent 10%
            ),
            linear-gradient(
                white,
                hsl(0, 0%, 96%) 5%,  
                hsl(0, 0%, 98%) 20%, 
                hsl(0, 0%, 95%) 50%, 
                hsl(0, 0%, 81%) 95%,
                white
            );
    }
    

    绘制线缆中稍粗部位的阴影:

    .body::after {
        background:
            linear-gradient(
                45deg, 
                rgba(0,0,0,4%),
                transparent 4%
            ),
            linear-gradient(
                90deg, 
                rgba(0,0,0,4%),
                transparent 2%
            ),
            linear-gradient(
                white,
                hsl(0, 0%, 96%) 5%,  
                hsl(0, 0%, 97%) 25%, 
                hsl(0, 0%, 95%) 40%, 
                hsl(0, 0%, 81%) 95%,
                white
            );
    }
    

    最后,为画面增加入场动画

    .cable {
        animation: show 5s linear infinite;
    }
    
    @keyframes show {
        0% {
            transform: translateX(100vw);
        }
    
        20%, 100% {
            transform: translateX(0);
        }
    }
    

    大功告成!

    原文地址:https://segmentfault.com/a/1190000015809333
  • 相关阅读:
    mongodb
    python中读取文件的read、readline、readlines方法区别
    uva 129 Krypton Factor
    hdu 4734
    hdu 5182 PM2.5
    hdu 5179 beautiful number
    hdu 5178 pairs
    hdu 5176 The Experience of Love
    hdu 5175 Misaki's Kiss again
    hdu 5174 Ferries Wheel
  • 原文地址:https://www.cnblogs.com/lalalagq/p/10078085.html
Copyright © 2011-2022 走看看