Jak manipulować tą figurą za pomocą animacji ?

pytanie zadane 2 kwietnia 2018 w HTML i CSS przez DariuszH Gaduła (3,100 p.)

<!DOCTYPE html>
<html>

<head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
<link rel="stylesheet" href="index.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
    
    
<link href="https://fonts.googleapis.com/css?family=Archivo+Black" rel="stylesheet">
    
 <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    
    <link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet">
    
    
    </head>
    

<body>
        
            <div class="header">

                <div class="name">DARIUSZ HOZER</div>

            </div>   
        
        
        
    <div class="main" >
             
            <video  autoplay>
                    <source src="" type="video/mp4">
                 
           
                  </video>

                  
<div class="triangle">
                  <div class="prosta_1"></div>
                  
                  <div class="prosta_2"></div>
                  <div class="prosta_3"></div>
</div>










    </div>  
        
        
    <div class="footer"></div>
		

</body>
</html>

body{
	width:100%;
    height: auto;
	margin:0;
	
}


.header{
    
    width: 100%;
    height:5vh;
    position: fixed;
    background-color: black;
     background-size: 100% 100%;
    z-index: 100;
}

.name{
 display:inline;
    color:aliceblue;
  font-size: 2.3vh;
    font-family: 'Montserrat', sans-serif;
position: absolute;
top:1.4vh;
right:1vh;
    
 
}


.main{
   
     width: 100%;
     height:400vh;
     background-size: 100% 100%;

}

video{
 width: 100%;
 height:auto;
background: cover;
background-size:100% 100%;
}

 

.prosta_1{
position:absolute;
top:70vh;

width: 30%;
height: 0.5vh;
background-color: black;

}


.prosta_2{
    position:absolute;
    top:42vh;
    left:16vh;
    width: 30%;
    height: 0.5vh;
    background-color: black;
    transform:rotate(60.1deg);
    }


    .prosta_3{
        position:absolute;
        top:42vh;
        left:-16vh;
        width: 30%;
        height: 0.5vh;
        background-color: black;
        transform:rotate(-60deg);
        }



.triangle{

position: absolute;
width: 100%;
height: auto;
top:10vh;
left:34%;
animation-name:triangle;
animation: 4s infinite;
transform:rotate(360deg);
}

@keyframes triangle{

from{transform:rotate(0deg) }
    to{transform:rotate(360deg)}


}



























.footer{
    
     width: 100%;
    height:4vh;
    background-color:black;
     background-size: 100% 100%;

}

komentarz 2 kwietnia 2018 przez Mariusz08 Maniak (62,300 p.)

I powiedz mi jaki masz problem z tym kodem?

komentarz 2 kwietnia 2018 przez DariuszH Gaduła (3,100 p.)

Spróbuj zrobić animację obrotu 360 bez przerwy chociażby...... :)

komentarz 2 kwietnia 2018 przez Mariusz08 Maniak (62,300 p.)

Ale obrót czego?
Poza tym złe formatowanie, i ten kawałek kodu raczej nie będzie działał:

<video  autoplay>

komentarz 2 kwietnia 2018 przez DariuszH Gaduła (3,100 p.)

To wpisz klasy w divach a video usuń i tak nie zadziała :)

komentarz 2 kwietnia 2018 przez DariuszH Gaduła (3,100 p.)

https://www.youtube.com/watch?v=UIVOJai44JY Chciałbym zrobić taką animację trójkąta :)

2	komentarz 2 kwietnia 2018 przez Patrycjerz Mędrzec (192,320 p.) Na przyszłość nie twórz pytań bez treści. Sam widzisz, że ludzie muszą się ciebie dopytywać, o co ci konkretnie chodzi, a to nie powinno mieć miejsca.

komentarz 2 kwietnia 2018 przez DariuszH Gaduła (3,100 p.)

<!DOCTYPE html>
<html>

<head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
<link rel="stylesheet" href="index.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
    
    
<link href="https://fonts.googleapis.com/css?family=Archivo+Black" rel="stylesheet">
    
 <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    
    <link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet">
    
    
    </head>
    

<body>
        
            <div class="header">

                <div class="name">DARIUSZ HOZER</div>

            </div>   
        
        
        
    <div class="main" >
             
            <video  autoplay>
                    <source src="" type="video/mp4">
                 
           
                  </video>


                  <div class="prosta_1"></div>
                  
                  <div class="prosta_2"></div>
                  <div class="prosta_3"></div>











    </div>  
        
        
    <div class="footer"></div>
		

</body>
</html>

body{
	width:100%;
    height: auto;
	margin:0;
	
}


.header{
    
    width: 100%;
    height:5vh;
    position: fixed;
    background-color: black;
     background-size: 100% 100%;
    z-index: 100;
}

.name{
 display:inline;
    color:aliceblue;
  font-size: 2.3vh;
    font-family: 'Montserrat', sans-serif;
position: absolute;
top:1.4vh;
right:1vh;
    
 
}


.main{
   
     width: 100%;
     height:400vh;
     background-size: 100% 100%;

}

video{
 width: 100%;
 height:auto;
background: cover;
background-size:100% 100%;
}

 

.prosta_1{
position:absolute;
top:70vh;

width: 30%;
height: 0.6vh;
background-color: black;
animation:dupa 3s infinite;
transform: rotate(360deg);

}

@keyframes dupa{

    from{transform: rotate(0deg);}
    to{transform: rotate(360vh);}
    
    
    
    
    }
    

.prosta_2{
    position:absolute;
    top:42vh;
    left:16vh;
    width: 30%;
    height: 0.5vh;
    background-color: black;
    transform:rotate(60.1deg);
    animation:dupa 3s infinite;
  
        

    }

    @keyframes dupa{

        from{transform: rotate(0deg);}
        to{transform: rotate(-360vh);}
        
        
        
        
        }
        

    .prosta_3{
        position:absolute;
        top:42vh;
        left:-16vh;
        width: 30%;
        height: 0.5vh;
        background-color: black;
        transform:rotate(-60.4deg);
        animation:dupa 3s infinite;

        }


        @keyframes dupa{

            from{transform: rotate(0deg);}
            to{transform: rotate(360vh);}
            
            
            
            
            }
            





























.footer{
    
     width: 100%;
    height:4vh;
    background-color:black;
     background-size: 100% 100%;

}

Proszę. Tu udało mi się w połowie. Chciałbym, aby te proste z różnych stron się schodziły. Kombinuję jak mogę i nic :) Zarówno zmieniam parametry pod 0% i 100% w keyframes. https://www.youtube.com/watch?v=UIVOJai44JY tu przykładzik :)

komentarz 3 kwietnia 2018 przez Mariusz08 Maniak (62,300 p.)

No i proste się schodzą.

1 odpowiedź

odpowiedź 2 kwietnia 2018 przez Mariusz08 Maniak (62,300 p.)

https://codepen.io/anon/pen/pvGNvO - przykład animacji w css

komentarz 2 kwietnia 2018 przez DariuszH Gaduła (3,100 p.)

Fajne to to, ale czy jest możliwe animowanie trójkątem, który stworzyłem poprzez połączenie pod kątem wewnętrznym 60 stopni każdej względem siebie prostej, która to każda jest divem. stworzyłem rodzica, w którym stworzony trójkąt jest dzieckiem.....Gdzie wpisać animację i jak ?