前端

CSS3特效边框

首先来看效果图:
演示.gif

说实话我第一眼看到的时候,觉得这用CSS3实现太难了,但仔细分析一下,不就是渐变+倾斜吗?

看代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    body {
        background: black;
    }

    .color {
        width: 200px;
        height: 300px;
        position: absolute;
        top: 99px;
        left: 500px;
        transform: skew(2deg, 3deg);
        transition: transform .5s;
        -webkit-transition: transform .5s;
        z-index: 1;
        background: #FEAC5E;
        background: -webkit-linear-gradient(to right, #4BC0C8, #C779D0, #FEAC5E);
        background: linear-gradient(to right, #4BC0C8, #C779D0, #FEAC5E);

    }

    .content {
        width: 200px;
        height: 300px;
        color: white;
        background: black;
        text-align: center;
        position: absolute;
        top: 100px;
        left: 500px;
        z-index: 999;
    }


    .app:hover .color {
        transform: skew(-2deg, -3deg);
    }
</style>

<body>
    <div class="app">
        <div class="color">

        </div>
        <div class="content">
            <span style="display: block; margin-top:80px;"> 把鼠标移到这里 </span>
        </div>
    </div>

</body>

</html>

这里我用的方法比较繁琐,两个div重叠,下层的div渐变+skew倾斜,hover时改变角度。

大家可以试着用别的方法做一下。

代码奉上,掰掰。

附件:特效边框.zip

微信扫一扫,向我赞赏

微信扫一扫,向我赞赏

微信扫一扫,向我赞赏

支付宝扫一扫,向我赞赏

回复

This is just a placeholder img.