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;
            }
    
    

    效果图

  • 相关阅读:
    【leetcode】第一个只出现一次的字符
    【leetcode】0~n1中缺失的数字
    054696
    053695
    053694
    053693
    053692
    053691
    053690
    053689
  • 原文地址:https://www.cnblogs.com/aryu/p/10482095.html
Copyright © 2011-2022 走看看