Home > Web Front-end > JS Tutorial > body text

Tom and Jerry Light code

王林
Release: 2024-09-10 11:00:16
Original
720 people have browsed it

Tom and Tom and Jerry Light code Light code




    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hut Light Effect</title>
    <style>
        /* Internal CSS */
        body {
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: #333;
        }

        .hut {
            position: relative;
            width: 300px;
            height: 200px;
            background: #7c4d3e; /* Hut exterior color */
            border-radius: 10px;
            box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
        }

        .hut::before {
            content: '';
            position: absolute;
            top: -100px; /* Position the triangle on top */
            left: 0;
            width: 0;
            height: 0;
            border-left: 150px solid transparent;
            border-right: 150px solid transparent;
            border-bottom: 100px solid #7c4d3e; /* Same color as the hut */
        }

        .door {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 100px;
            background: black;
            border-radius: 5px;
            transition: background 0.5s ease-in-out;
        }

        .hole {
            position: absolute;
            top: -80px;
            left: 50%;
            transform: translateX(-50%);
            width: 70px;
            height: 70px;
            background: black;
            border-radius: 80%;
            transition: background 0.5s ease-in-out;
            z-index: 10;
        }

        .button {
            position: absolute;
            bottom: 0%;
            transform: translateY(-50%);
            padding: 10px 20px;
            background: #555;
            color: #fff;
            border-radius: 5px;
            cursor: pointer;
            z-index: 20;
            transition: background 0.3s ease;
        }

        .button:hover {
            background: #777;
        }

        .button:hover ~ .hut .door,
        .button:hover ~ .hut .hole {
            background: rgb(234, 234, 13);
        }

        .jerry,
        .tom {
            display: none;
        }

        .button:hover ~ .hut .door .jerry,
        .button:hover ~ .hut .hole .tom {
            display: block;
        }

        .tom {
            margin-top: 0px;
            margin-left: 3px;
            height: 70px;
            width: 70px;
            border-radius: 80%;
        }

        .jerry {
            height: 80px;
            width: 80px;
        }
    </style>


    <div class="button">Turn On Light</div>
    <div class="hut">
        <div class="door">
            <img class="jerry" src="./jerry.png" alt="Tom and Jerry Light code">
        </div>
        <div class="hole">
            <img class="tom" src="./tom.png" alt="Tom">
        </div>
    </div>

`
Copy after login

The above is the detailed content of Tom and Jerry Light code. For more information, please follow other related articles on the PHP Chinese website!

source:dev.to
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!