master

分支 (1)

管理

管理

master

js--jquery-special-effects
/
JS_DOM练习.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js_DOM练习</title>
</head>
<style>
    .left {
        width: 100px;
        height: 100px;
        border: 1px solid black;
        display: flex;
        justify-content: center;
        align-items: center;
        align-content: center;
        position: relative;
        margin: 10px;
    }

    span {
        width: 50px;
        height: 5px;
        border-radius: 2px;
        background-color: black;
        display: block;
        position: absolute;
    }

    .left span:nth-child(1) {
        transform: rotate(45deg);
    }

    .left span:nth-child(2) {
        transform: rotate(-45deg);
    }
</style>

<body>
    <div class="bigbox">
        <div class="left" onclick="closePhoto()">
            <span></span>
            <span></span>
        </div>
        <div id="photo">
            <img src="./images/work-img.png" alt="">
        </div>
    </div>
</body>
<script type="text/javascript">
    function closePhoto() {
        var photoShow = document.getElementById("photo");
        photoShow.style["display"] = 'none';
    }
</script>
</html>