首页 > web前端 > css教程 > 实例讲解如何用CSS语言创作一根闪电连接线

实例讲解如何用CSS语言创作一根闪电连接线

php是最好的语言
发布: 2018-07-30 14:37:07
原创
2325 人浏览过

1.png

效果预览

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

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

可交互视频

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

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

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

代码解读

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

<p class="cable">
    <span class="head"></span>
    <span class="body"></span>
</p>
登录后复制

居中显示:

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
}
登录后复制

定义容器尺寸:

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

画出插头的轮廓:

.head {
    width: 8.5em;
    height: 8.5em;
    border-radius: 2em 0 0 2em;
}
登录后复制

画出插头上针脚的轮廓:

.head {
    position: relative;
}

.head::before {
    content: &#39;&#39;;
    position: absolute;
    width: 3em;
    height: 7.3em;
    top: calc((8.5em - 7.3em) / 2);
    left: 0.7em;
    border-radius: 1em;
    box-sizing: border-box;
}
登录后复制

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

.body {
    width: 15.5em;
    height: 11em;
    border-radius: 0.5em;
}
登录后复制

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

.body {
    position: relative;
    display: flex;
    align-items: center;
}

.body::before {
    content: &#39;&#39;;
    position: absolute;
    width: 13.5em;
    height: 6em;
    left: 15.5em;
}
登录后复制

画出线缆的延长线部分:

.body::after {
    content: &#39;&#39;;
    position: absolute;
    width: 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: &#39;&#39;;
    position: absolute;
    box-sizing: border-box;
    width: 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);
    }
}
登录后复制

大功告成!

相关文章:

使用纯CSS3创建一个纺锤形分隔线

如何使用纯CSS3创建一个简单的五角星图形

相关视频:

CSS动画实用技巧视频教程

以上是实例讲解如何用CSS语言创作一根闪电连接线的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板