Happy family (group A P’Thx) (Copy 2257)

✨ Pnd

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
        body{
    width:100%;
    height: 100%;
    overflow: hidden;
}
.bg{
    background-image: url("https://www.beartai.com/wp-content/uploads/2020/04/Wallpaper03.jpg");
    width: 66.5%;
    height: 95%;
    transform: translate(-50%, -50%);
    top: 50.75%;
    left: 50%;
    position:absolute;
    z-index: 0;
    border: 1px solid black;
}
.timehole{
    width: 120%;
    height: 150%;
    transform: translate(-50%, -50%);
    top: 50.75%;
    left: 50%;
    position:absolute;
    z-index: -1;
}

.nobita1{
  	 cursor: pointer;
    width:250px;
    height: 250px;
    margin: auto;
    transform: translate(-65%, 100%);
    top: 35%;
    left: 65%;
    position:absolute;
    visibility: visible;
    animation: auto 3s infinite;
}
.nobita2{
  	 cursor: pointer;
    width:250px;
    height: 250px;
    margin: auto;
    transform: translate(-65%, 100%);
    top: 35%;
    left: 65%;
    position:absolute;
    visibility: hidden;
    animation: autos 3s infinite;
}

.jaiko1{
  	 cursor:pointer;
    width:250px;
    height: 250px;
    margin: auto;
    transform: translate(-70%, 100%);
    top: 35%;
    left: 90%;
    position:absolute;
    visibility: visible;
    animation: auto 3s infinite;
}
.jaiko2{
  	 cursor:pointer;
    width:250px;
    height: 250px;
    margin: auto;
    transform: translate(-70%, 100%);
    top: 35%;
    left: 90%;
    position:absolute;
    visibility: hidden;
    animation: autos 3s infinite;
}

.suneo1{
  	 cursor: pointer;
    width:250px;
    height: 250px;
    margin: auto;
    transform: translate(-260%, 30%);
    top: 32%;
    left: 88%;
    position:absolute;
    visibility: visible;
    animation: auto 3s infinite;
}
.suneo2{
  	 cursor: pointer;
    width:250px;
    height: 250px;
    margin: auto;
    transform: translate(-260%, 30%);
    top: 32%;
    left: 88%;
    position:absolute;
    visibility: hidden;
    animation: autos 3s infinite;
}

.gian1{
  	 cursor: pointer;
    width:280px;
    height: 280px;
    margin: auto;
    transform: translate(-125%, 19%);
    top: 32%;
    left: 77%;
    position:absolute;
    visibility: visible;
    animation: auto 3s infinite;
}
.gian2{
  	 cursor: pointer;
    width:280px;
    height: 280px;
    margin: auto;
    transform: translate(-125%, 19%);
    top: 32%;
    left: 77%;
    position:absolute;
    visibility: hidden;
    animation: autos 3s infinite;
}

.teacher1{
  	 cursor: pointer;
    width:250px;
    height:300px;
    margin: auto;
    transform: translate(-340%, 68%);
    top: 35%;
    left: 90%;
    position:absolute;
    visibility: visible;
    animation: auto 3s infinite;
}
.teacher2{
  	 cursor: pointer;
    width:250px;
    height:300px;
    margin: auto;
    transform: translate(-340%, 68%);
    top: 35%;
    left: 90%;
    position:absolute;
    visibility: hidden;
    animation: autos 3s infinite;
}

.shizuka1{
  	 cursor: pointer;
    width:250px;
    height: 250px;
    margin: auto;
    transform: translate(-135%, 100%);
    top: 35%;
    left: 90%;
    position:absolute;
    visibility: visible;
    animation: auto 3s infinite;
}
.shizuka2{
  	 cursor: pointer;
    width:250px;
    height: 250px;
    margin: auto;
    transform: translate(-135%, 100%);
    top: 35%;
    left: 90%;
    position:absolute;
    visibility: hidden;
    animation: autos 3s infinite;
}

.deki1{
  	 cursor: pointer;
    width:250px;
    height: 250px;
    margin: auto;
    transform: translate(-260%, 100%);
    top: 35%;
    left: 90%;
    position:absolute;
    visibility: visible;
    animation: auto 1s infinite;
}
.deki2{
  	 cursor: pointer;
    width:250px;
    height: 250px;
    margin: auto;
    transform: translate(-260%, 100%);
    top: 35%;
    left: 90%;
    position:absolute;
    visibility: hidden;
    animation: auto 1s infinite;
}

.pthx1{
  	 cursor: pointer;
    width:250px;
    height: 250px;
    margin: auto;
    transform: translate(-200%, 30%);
    top: 32%;
    left: 65%;
    position:absolute;
    visibility: visible;
    animation: move2 3s infinite;
}

.pthx2{
  	 cursor: pointer;
    width:250px;
    height: 250px;
    margin: auto;
    transform: translate(-200%, 30%);
    top: 32%;
    left: 65%;
    position:absolute;
    visibility: hidden;
    animation: move2 3s infinite;
}

.none1{
  	 cursor: pointer;
    width:180px;
    height: 180px;
    margin: auto;
    transform: translate(-540%, 150%);
    top: 35%;
    left: 90%;
    position:absolute;
    visibility: visible;
    animation: movee 3s infinite;
}
.none2{
  	 cursor: pointer;
    width:180px;
    height: 180px;
    margin: auto;
    transform: translate(-540%, 150%);
    top: 35%;
    left: 90%;
    position:absolute;
    visibility: hidden;
    animation: movee 3s infinite;
}
@keyframes movee {
  from {top: 0px;}
  to {top: 250px;}
}
@keyframes move2 {
  from {left: 250px;}
  to {left: 1300px;}
}

</style>
    </head>
    <body>
        <img src="https://www.beartai.com/wp-content/uploads/2020/04/Wallpaper02.jpg" class="timehole" id="hole">
        <div class="bg">
        <img src="https://media.discordapp.net/attachments/801450532006133822/810071852084625418/26_20210213153630.PNG" id="act1" class="nobita1" onclick="clickact()">
        <img src="https://media.discordapp.net/attachments/801450532006133822/810071852147146772/26_20210213153626.PNG" id="act2" class="nobita2" onclick="clickact()">
        <img src="https://media.discordapp.net/attachments/801450532006133822/810071852495273984/26_20210213155406.PNG" id="act3" class="jaiko1" onclick="clickact2()">
        <img src="https://media.discordapp.net/attachments/801450532006133822/810071851941363742/26_20210213155410.PNG" id="act4" class="jaiko2" onclick="clickact2()">
        <img src="https://media.discordapp.net/attachments/801450532006133822/810085000137539604/26_20210213162003.PNG" id="act5" class="suneo1" onclick="clickact3()">
        <img src="https://media.discordapp.net/attachments/801450532006133822/810085000199405578/26_20210213162010.PNG" id="act6" class="suneo2" onclick="clickact3()">
        <img src="https://media.discordapp.net/attachments/801450532006133822/810113702618726430/26_20210213180210.PNG" id="act7" class="gian1" onclick="clickact4()">
        <img src="https://media.discordapp.net/attachments/801450532006133822/810113702501810196/26_20210213180235.PNG" id="act8" class="gian2" onclick="clickact4()">
        <img src="https://media.discordapp.net/attachments/801450532006133822/810085000288010251/26_20210213164700.PNG" id="act9" class="teacher1" onclick="clickact5()">
        <img src="https://media.discordapp.net/attachments/801450532006133822/810084999307067423/26_20210213164407.PNG" id="act10" class="teacher2" onclick="clickact5()">
        <img src="https://media.discordapp.net/attachments/801450532006133822/810118519848828988/26_20210213185849.PNG" id="act11" class="shizuka1" onclick="clickact6()">
        <img src="https://media.discordapp.net/attachments/801450532006133822/810118523677835264/26_20210213185925.PNG" id="act12" class="shizuka2" onclick="clickact6()">
        <img src="https://media.discordapp.net/attachments/801450532006133822/810113702404554752/26_20210213184123.PNG" id="act13" class="deki1" onclick="clickact7()">
        <img src="https://media.discordapp.net/attachments/801450532006133822/810113702690553866/26_20210213184146.PNG" id="act14" class="deki2" onclick="clickact7()">
        <img src="https://media.discordapp.net/attachments/798207130233864222/810121035788713984/26_20210213191116.PNG" id="act15" class="pthx1" onclick="clickact8()">
        <img src="https://media.discordapp.net/attachments/798207130233864222/810121036439093288/26_20210213191111.PNG" id="act16" class="pthx2" onclick="clickact8()">
        <img src="https://media.discordapp.net/attachments/798207130233864222/810128395261837352/26_20210213194040.PNG" id="act17" class="none1" onclick="clickact9()">
        <img src="https://media.discordapp.net/attachments/798207130233864222/810128395530797146/26_20210213194044.PNG" id="act18" class="none2" onclick="clickact9()">
        </div>
    <script>
  
    let stateact1 = 1, stateact2 = 0;
    function clickact(){
    if (stateact1 == 1 && stateact2 == 0){
        document.getElementById("act1").style.visibility = 'hidden';
        document.getElementById("act2").style.visibility = 'visible';
    stateact1 --, stateact2 ++;}
    else if (stateact1 == 0 && stateact2 == 1){
        document.getElementById("act1").style.visibility = 'visible';
        document.getElementById("act2").style.visibility = 'hidden';
        stateact1 ++, stateact2 --;
    }
    
}
    let stateact3 = 1, stateact4 = 0;
    function clickact2(){
    if (stateact3 == 1 && stateact4 == 0){
        document.getElementById("act3").style.visibility = 'hidden';
        document.getElementById("act4").style.visibility = 'visible';
    stateact3 --, stateact4 ++;}
    else if (stateact3 == 0 && stateact4 == 1){
        document.getElementById("act3").style.visibility = 'visible';
        document.getElementById("act4").style.visibility = 'hidden';
        stateact3 ++, stateact4 --;
    }
    
}