• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Jak przesunąć prostą stanowiącą podstawę trójkąta równobocznego z innego położenia tak by ten trójkąt stworzyć ?

VPS Starter Arubacloud
0 głosów
174 wizyt
pytanie zadane 3 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" >
             
          


                  <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 ;
transform:rotate(180deg);

}

@keyframes dupa{

0%{top:100vh;}
25%{top:90vh;}
50%{top:80vh;}
100%{top:70vh;}
  
    
    
    }
    

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

    }

    @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 ;

        }


        @keyframes dupa{

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

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

}

Czy ktoś z Was wie jak zrobić, tak by prosta z danej pozycji ( z rozproszenia) formuje się  w trójkąt. Chcę zrobić trójkąt taki jak ten słynny celownik laserowy predatora ( https://www.youtube.com/watch?v=UIVOJai44JY ) i np. w @ keyframes wpisuję top wyjściowy np 100vh a ma dojść do 70vh czyli do prostej stanowiącej podstawę  i za cholerę nie chce działać. ( Te proste to divy, tylko wysokość bardzo mała) :)  Próbowałem z transition też i nic.....

komentarz 4 kwietnia 2018 przez Patrycjerz Mędrzec (192,340 p.)
Jest to niedozwolone, ale zostawię koledze, bo widzę, że desperacko potrzebuje pomocy, a są już odpowiedzi pod spodem.

2 odpowiedzi

0 głosów
odpowiedź 4 kwietnia 2018 przez Wujek Greg Dyskutant (9,410 p.)
Po co ten obrót na starcie? Moim zdaniem jednośtka vh nie jest najlepsza do pozycjonowania, a jeżeli chodzi o to jak ja bym ro zrobił to wyśrodkowałbym wszystko względem okna przeglądarki, poziomo i pionowo. A nastepnie za pomocą transform:scale powiększyłbym cały celownik tak żeby jego środkowa przestrzeń nie mieściła się w oknie, i za pomocą animacji powrócił do stanu początkowego, w międzyczasie pobawiłbym się trochę wysokością belek tak żeby animacja była jak najbardziej zbliżona do celownika predatora.
0 głosów
odpowiedź 4 kwietnia 2018 przez PolYGlok Pasjonat (19,450 p.)

Kto nazywa plik css index?

Nie bądź d*pa ponumeruj dupy:)


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 ;
transform:rotate(180deg);
 
}
 
@keyframes dupa{
 
0%{top:100vh;}
25%{top:90vh;}
50%{top:80vh;}
100%{top:70vh;}
   
     
     
    }
     
 
.prosta_2{
    position:absolute;
    top:42vh;
    left:16vh;
    width: 30%;
    height: 0.5vh;
    background-color: black;
    transform:rotate(60.1deg);
    animation:dupa1 1s ;
   
         
 
    }
 
    @keyframes dupa1{
 
        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:dupa2 3s ;
 
        }
 
 
        @keyframes dupa2{
 
            from{transform: rotate(0deg);}
            to{transform: rotate(360vh);}
             
             
             
             
            }
             
 
.footer{
     
     width: 100%;
    height:4vh;
    background-color:black;
     background-size: 100% 100%;
 
}

ale i tak jest u mnie troche na lewo a nie centralnie ale to sobie już sam wycentrujesz.

komentarz 7 kwietnia 2018 przez DariuszH Gaduła (3,100 p.)
Do tych dup doszedłem juz  :D że trzeba ponumerować :D

Podobne pytania

0 głosów
2 odpowiedzi 7,635 wizyt
0 głosów
2 odpowiedzi 327 wizyt
0 głosów
2 odpowiedzi 1,116 wizyt
pytanie zadane 30 maja 2018 w HTML i CSS przez BlvckFox Gaduła (4,240 p.)

92,454 zapytań

141,263 odpowiedzi

319,099 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...