css3-3D文字效果制作

css3-3D文字效果制作

html:

    <div class="con">
        <h1>你若盛开,蝴蝶自来。</h1>
    </div>

css:

    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        body{
            background-color: #90a7ff;
        }
        .con{
            width: 80%;
            margin: 100px auto 0;
        }
        .con h1{
            font-size: 6em;
            color: #fff;
            font-family:Arial, Helvetica, sans-serif;
            font-weight: bold;
            text-transform: uppercase;
            transition: 0.1s;
        }
        .con h1:hover{
            text-shadow: 
                0 1px #ccc,
                0 2px 15px rgba(0,0,0,0.2),
                0 2px 0 #ccc,
                0 3px 0 #ccc,
                0 4px 0 #ccc,
                0 5px 0 #ccc,
                0 6px 0 #ccc,
                0 7px 0 #ccc,
                0 8px 0 #ccc,
                0 9px 0 #ccc,
                0 10px 0 #ccc,
                0 11px 0 #ccc,
                0 12px 0 #ccc,
                0 13px 30px rgba(0, 0, 0, 0.5);
        }
    </style>