zoukankan      html  css  js  c++  java
  • css 实现的纸张卷曲效果

    html

       <div class="page-wrap">
            <div class="page-inner">
                <h1>标题标题</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio exercitationem odit aperiam totam alias, nemo veniam magni asperiores repudiandae commodi dignissimos incidunt est enim soluta reiciendis corporis aliquid quae sit.</p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim quidem perferendis nesciunt ea temporibus tempore molestias, sunt non recusandae maiores nostrum necessitatibus voluptas dignissimos earum quisquam blanditiis cum iusto asperiores!</p>
            </div>
        </div>
    
    

    css

     *{margin:0;box-sizing:border-box;}
            body{
                padding:50px 0;
                background: #eee;
                font-family: Arial, Helvetica, sans-serif;
                line-height: 20px;
            }
            .page-wrap,.page-inner{
                margin:0 auto;
                600px;
                padding:50px 0 0 60px;
                background:#fff;
                /* border-radius: 20px; */
                text-align: justify;
            }
            .page-inner{
                padding:0 60px 40px 0;
            }
            .page-wrap{
                position: relative;
                /* 高斯模糊,过滤器 */
                filter:drop-shadow(0px 0px 15px #bbb);
            }
            .page-wrap:before{
                content:'';
                display: block;
                position: absolute;
                right:-60px;
                top:0;
                60px;
                height:50px;
                background: linear-gradient(42deg,#ddd 30%,rgba(0,0,0,0) 40%)
            }
            h1{
                margin-bottom: 20px;text-align:center;
            }
            p{
                text-indent: 2em;margin-bottom: 5px;
            }
    
    

    效果图

  • 相关阅读:
    每月碎碎念 | 2019.7
    聊聊HTML5中的Web Notification桌面通知
    Python的海龟绘图法小知识
    面向对象是什么意思?通俗易懂
    HTML实体
    gcc错误[Error] ld returned 1 exit status
    Markdown怎么使用制表符TAB键?为什么TAB失灵了?
    力扣题解——2的幂
    Jquery中的Ajax
    7个你可能不认识的CSS单位
  • 原文地址:https://www.cnblogs.com/aryu/p/10482095.html
Copyright © 2011-2022 走看看