阴影滑进立体效果

Original 2019-02-17 11:21:00 229
abstract:<html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content=&qu
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>阴影</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        position: relative;
        width: 100px;
        height: 300px;
        border: solid 1px blanchedalmond;
        margin: 0 auto;
        top: 0;
        transition: all 0.5s linear;
        cursor: pointer;
    }

    .box:hover {
        top: 6px;
        box-shadow: 0px 5px 10px darkgray;
        transition: all 0.5s linear;

    }
    p{
        width: 17px;
        margin: 0 auto;
        padding-top: 45px;
        font-size: 20px;
        color: burlywood;
    }
</style>

<body>
    <div class="box">
        <p>滑进阴影立体效果</p>
    </div>
</body>

</html>


Correcting teacher:西门大官人Correction time:2019-02-17 11:25:07
Teacher's summary:作业写的不错,最好加下关键的注释,如transition:all 0.5 linear的作用是什么等等

Release Notes

Popular Entries