使用before和after实现一些有意思的效果实例

「爱情、让人受尽委屈。」 2022-05-28 10:44 177阅读 0赞

主要就是运用before和after在元素前面和后面插入伪元素，实现一些有意思的小效果，嗯、直接上代码了（我展示的都是一些简单的效果，可以在此基础上让效果更炫酷，我觉得只要原理知道了，再去实现其他的效果，就特别简单了，所以此处就不再去修饰了，也方便不太清除原理的同行看代码的时候更简洁）

效果一、鼠标移上链接，出现方括号：

效果图如下：鼠标移入之前和移入之后的对比图

![20180404143431249][]        ![20180404143646173][]

效果二、出现折纸效果如图：

![20180404142557595][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Demo</title>
        <style>
           body{padding:80px; background:#ccc;}
            .box{position:relative;width:90%; height:auto; padding:20px; background:#fff;}
            p{width:80%; height:100px;}
            .box:before, .box:after{
                content:"";
                z-index:-1;
                display:block;
                position:absolute;
                width:50%;
                height:20%;
                box-shadow:2px 2px 2px #b7b7b7;
                background:#000;
                transform:rotate(-3deg);
                left:10px;
                bottom:15px;
                top:80%;
            }
            .box:after{
                transform:rotate(3deg);
                right:10px;
                left:auto;
            }
    
        </style>
    </head>
    <body>
    <div class="box">
       <p></p>
    </div>
    
    </body>
    </html>

效果三、相片叠加效果，如下图

![20180404145314969][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Demo</title>
        <style>
    
            .boimg{
                border: 6px solid #fff;
                width: 400px;
                height:225px;
                margin: 50px;
                position: relative;
                box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
            }
            .boimg img{width:100%;heigth:100%;}
            .boimg:before,.boimg:after {
                content: "";
                width: 400px;
                height:225px;
                background: #aaa;
                border: 6px solid #fff;
                position:absolute;
                z-index:-1;
                top:0;
                left:-10px;
                box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
                transform: rotate(-5deg);
            }
            .boimg:after {
                top:5px;
                left:0;
                transform: rotate(3deg);
            }
        </style>
    </head>
    <body>
    <div class="shbox" style="background:none;">
        <div class="boimg">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522834445084&di=376ed78bccfc705f2601b73956199600&imgtype=0&src=http%3A%2F%2Fimg2015.zdface.com%2F20170623%2F25985f40a751689774e53c2e16f266ee.jpg" />
            <div>
            </div>
        </div>
    </div>
    
    
    </body>
    </html>

效果四、生成小tip

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Demo</title>
        <style>
            .tip{padding:5px 10px; margin-left:15px; border:1px solid #F8D19F; border-radius:3px; background-color:#FDFBB8; color:#D07807; font-size:12px; position:absolute;}
            .tip:before, .tip:after{content:attr(data-content); font-family:"华文楷体"; position:absolute; top:6px;}
            .tip:before{color:#F8D19F; left:-10px;}
            .tip:after{color:#FDFBB8; left:-8px;}
    
        </style>
    </head>
    <body>
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522834445084&di=376ed78bccfc705f2601b73956199600&imgtype=0&src=http%3A%2F%2Fimg2015.zdface.com%2F20170623%2F25985f40a751689774e53c2e16f266ee.jpg" />
    <span id="tip" class="tip" data-content="◀">你好，啦啦啦啦啦啦啦啦</span>
    </body>
    </html>

注意：上面data-content="◀",其实就是一个Unicode字符图标，所以这句话也相当于data-content="&\#x25c0;"

对于UniCode字符图标，想要了解更多的请点击[https://blog.csdn.net/lhjuejiang/article/details/79818358][https_blog.csdn.net_lhjuejiang_article_details_79818358]

效果图如下：（看不清的可以自己复制一下代码在浏览器中查看一下）

![20180404160923991][]

[20180404143431249]: https://img-blog.csdn.net/20180404143431249
[20180404143646173]: /images/20220528/c665dc8f32e848a29b1b750d3a09de3c.png
[20180404142557595]: /images/20220528/15b14f80c2f94a7198fab755a6c02d3e.png
[20180404145314969]: /images/20220528/b0881e0a2b9f45099d548670a238c9c7.png
[https_blog.csdn.net_lhjuejiang_article_details_79818358]: https://blog.csdn.net/lhjuejiang/article/details/79818358
[20180404160923991]: /images/20220528/0c862548df2d413eab97d5538211dee5.png