CSS特效——蛇形边框

最新推荐文章于 2021-09-10 15:45:34 发布

原创

最新推荐文章于 2021-09-10 15:45:34 发布 · 795 阅读

1 ·

CC 4.0 BY-SA版权

CSS特效——蛇形边框

一、设计思路

先设置好基本的轮廓，之后通过背景图片设置成两半颜色，再设置，鼠标经过之后的变色，最后设置一下动画，注意时间的推迟。

二、详细步骤

初始化和基本框架

<div class="outbox">
        <div class="inbox">
            HANDSOME
            <span class="borders"></span>
            <span class="borders"></span>
            <span class="borders"></span>
            <span class="borders"></span>
        </div>

    </div>

*{
   
   
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
   
   
    display: flex;
    height: 100vh;
    align-items: center;
    justify-content: center;
    background-color: rgb(4, 4, 19);
}

定义一开始的样式

.outbox{
   
   
    height: 150px;
    width: 400px;
}
.outbox .inbox{
   
   
    position: relative;
    display: inline-block;
    height: 100%;
    width: 100%;
    letter-spacing: 10px;
    font-size: 55px;
    color: rgb(18, 190, 243);
    background-image: linear-gradient(90deg ,rgb(40, 62, 161) 50%,rgb(31, 49, 133) 50% );
    line-height: 150px;
    /* text-transform: uppercase;   字母转换成大写 */
    text-align: center;
    text-decoration: none;
    overflow: hidden;
    box-shadow: inset 0 0 10px rgb(14, 20, 105), 0 0 5px rgb(9, 208, 235);
    transition: all  0.5s;
}

定义鼠标经过之后的样式

.outbox .inbox:hover{
   
   
    text-shadow: 0 0 5px rgb(18, 190, 243

最低0.47元/天解锁文章