前端 CSS3 实现折页效果

网站前端开发三要素 网站前端开发书 网站前端开发

无意间看到这样的效果,感觉挺好看的,但是本人又不是太擅长css3,就简单模仿了一下,希望对大家有帮助
废话不多说,直接说思路,主要是三角效果用什么实现,刚开始我想到的是用两个div,但是又一想,不是不让用多余的代码dom节点吗?好吧,那就用伪类呗,一共两个三角(左上角一个黑色同底色的,右下角一个白色带阴影的),一个:before,一个:after,刚刚好嘿嘿
html代码实现如下:
html 代码

<div class=”bg_black”>
    <div class=”bg_white”>
        <h2>It is my whole world !</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid architecto cum cumque dolorum, ea exercitationem expedita
            incidunt ipsa, labore laboriosam libero nam quasi reiciendis rem tempora tempore temporibus totam ullam. Lorem ipsum dolor
            sit amet, consectetur adipisicing elit. A blanditiis consequuntur corporis, ea esse eveniet exercitationem ipsa ipsam
            libero neque, nihil odio odit placeat porro quasi quod similique, tempora ut!</p>
    </div>
</div>

css代码实现如下:

css 代码

* {
    padding: 0;
    margin: 0;
}
*,
:before,
:after {
    box-sizing: border-box;
    content: ‘ ‘;
}
body {
    font-size: 16px;
    line-height: 1.5;
}
h2 {
    font-style: normal;
    text-align: center;
}
.bg_black {
    background-color: #000;
    width: 100%;
    height: 900px;
    position: absolute;
    top: 0;
}
.bg_white {
    background-color: #fff;
    width: 500px;
    height: 800px;
    padding: 200px 30px 30px;
    margin: 50px auto;
    position: relative;
    text-align: justify;
}
.bg_white h2 {
    font-size: 32px;
}
.bg_white p {
    font-size: 18px;
}
.bg_white:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-left: 170px solid #000;
    border-bottom: 170px solid transparent;
}
.bg_white:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-bottom: 170px solid #fff;
    border-left: 170px solid transparent;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

网站前端开发多久能学会 前端开发制作网站注意事项 网站开发前端与后端区别

» 本文来自:前端开发者 » 《前端 CSS3 实现折页效果》
» 本文链接地址:https://www.rokub.com/5452.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!