Scribd Logo
Upload

Welcome to Scribd!

  • Web Dasturlash Amaliy Ish-2

    Uploaded by

    fatullayevfarhod2001
    4 views3 pages

    Original Title

    Web Dasturlash Amaliy ish-2

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    4 views3 pages

    Web Dasturlash Amaliy Ish-2

    Uploaded by

    fatullayevfarhod2001

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 3

    O‘ZBEKISTON RESPUBLIKASI RAQAMLI

    TEXNOLOGIYALAR
    VAZIRLIGI
    MUHAMMAD AL-XORAZMIY NOMIDAGI
    TOSHKENT AXBOROT TEXNOLOGIYALARI UNIVERSITETI
    SAMARQAND FILIALI

    AMALIY ISH №2
    Fan: “Web dasturlashga kirish“

    Guruh: KIS 22-06


    Talaba: AMONOVA G.
    Rahbar: DJUMAYEV S.

    Samarqand-2024 y.
    1-mashg’ulot
    Dastur kodi:
    HTML
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Transition Xususiyatini Organish</title>
    <link rel="stylesheet" href="index.css">
    </head>
    <body>
    <div class="container">
    <div class="circle"></div>
    </div>
    <div class="container">
    <div class="square"></div>
    </div>
    </body>
    </html>

    CSS
    .container {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 50px auto;
    border: 1px solid #ccc;
    overflow: hidden;
    }

    .circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 50px;
    border-radius: 50%;
    background-color: blue;
    transition: all 1s;
    }

    .square {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background-color: red;
    transition: all 1s;
    }

    .container:hover .circle {
    transform: translate(-50%, -50%) rotate(360deg);
    }

    .container:hover .square {
    transform: translate(-50%, -50%) translateY(50%);
    }

    NATIJA

    You might also like