W celu zapewnienia prawidłowego funkcjonowania, forum WebElite.pl wykorzystuje pliki cookies. Zmiany ich ustawień możesz dokonać w opcjach konfiguracyjnych swojej przeglądarki.
  • Forum

  • Regulamin

  • Szukaj

  • Użytkownicy

  • Kalendarz

  • Pomoc

  • Kontakt

  •  
Aktualny czas: 27-05-2017, 12:57 Witaj! (LogowanieRejestracja)
Witamy na WebElite.pl - Forum Informatycznym!

Aktualnie przeglądasz forum jako Gość, przez co Twój dostęp jest w pewnym stopniu ograniczony. Zarejestruj się a uzyskasz dostęp do publikacji postów oraz wielu innych ciekawych funkcji niedostępnych dla niezarejestrowanych użytkowników. Nie zastanawiaj się dłużej i dołącz do naszej społeczności już dziś!

Pozdrawiamy i życzymy mile spędzonego czasu na forum.
facebooktwitteryoutube
Rozpocznij wątek  Odpowiedz 
 
Ocena wątku:
  • 0 Głosów - 0 Średnio
  • 1
  • 2
  • 3
  • 4
  • 5
Animacje w CSS3
Autor Wiadomość
UltimateRekt Offline
Newbie
*

Liczba postów: 1
Reputacja: - 0 +
Post: #1
Animacje w CSS3
Witam !
Mam problem z animacjami w CSS3 gdyż pobrałem sobie Szablon z przejściami zrobionymi w jquery, które działa na zasadzie ze pojawia sie jedno zdjecie ono się skaluje i po chwili zanika i pojawia sie drugie zdjecie które rowniez sie skanuje itd. Wszystko ładnie sobie wyedytowałem, zdjęcia, napisy itd. Lecz gdy chcę dodać logo w lewym górnym rogu to ono zanika wraz z obrazkami a chcę żeby było statyczne i widniało cały czas, lecz nie za bardzo wiem jak sie za to zabrać, gdy dodaje osobną klasę i daje jej atrybut opacity:1; to nie działa i dalej logo zanika wraz z tłem.
KOD CSS:
Kod:
@keyframes imageAnimation {
    0% {
        opacity: 0;
        animation-timing-function: ease-in;
    }
    8% {
        opacity: 1;
        transform: scale(1.05);
        animation-timing-function: ease-out;
    }
    17% {
        opacity: 1;
        transform: scale(1.1);
    }
    22% {
        opacity: 0;
        -webkit-transform: scale(1.1);
    }
    25% {
        opacity: 0;
        -transform: scale(1.1);
    }
    100% { opacity: 0 }
}
KOD CSS 2:
Kod:
.cb-slideshow li span {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
    animation: imageAnimation 36s linear infinite 0s;
}
.cb-slideshow li div {
    z-index: 1000;
    position: absolute;
    bottom: 30px;
    left: 0px;
    width: 100%;
    text-align: center;
    opacity: 0;
    animation: titleAnimation 36s linear infinite 0s;
}
.cb-slideshow li div h3 {
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    font-size: 100px;
    padding: 0 30px;
    line-height: 120px;
    color: #FF0066;
}
.cb-slideshow li:nth-child(1) span { background-image: url(../images/main.jpg) }
.cb-slideshow li:nth-child(2) span {
    background-image: url(../images/bg2.jpg);
    animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) span {
    background-image: url(../images/bg3.jpg);
    animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) span {
    background-image: url(../images/main.jpg);
    animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) span {
    background-image: url(../images/bg2.jpg);
    animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) span {
    background-image: url(../images/bg3.jpg);
    animation-delay: 30s;
}
Kod HTML:
Kod:
<html>
<head>
<script type="text/javascript" src="js/modernizr.custom.86080.js"></script>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" type="text/css" href="css/indexslide.css" />
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div id="main1">
    <div style="margin-left:10px; margin-top:10px; opacity:1; !important"><h1 style="opacity:1; !important"><a href="#"><img src="images/logo.png" width="50px" height="50px"></a></h1></div>
</div>
    <ul class="cb-slideshow">
     <li><span></span><div><h3 class="tekst1"></h3></div></li>
     <li><span></span><div><h3 class="tekst1">Witaj w swiecie RektZone.</h3></div></li>
     <li><span></span><div><h3 class="tekst1">W RektZone mozemy wiecej niz inni...</h3></div></li>
     <li><span></span><div><h3 class="tekst1"></h3></div></li>
     <li><span></span><div><h3 class="tekst1">Witaj w swiecie RektZone.</h3></div></li>
     <li><span></span><div><h3 class="tekst1">W RektZone mozemy wiecej niz inni...</h3></div></li>
    </ul>
</div>
</body>
</html>
}
17-12-2016 18:52
Znajdź wszystkie posty użytkownika Odpowiedz cytując ten post
Support
singit Offline
Newbie
*

Liczba postów: 4
Reputacja: - 0 +
Post: #2
RE: Animacje w CSS3
nie wiem czy dobrze widzę ale masz tam ustawiony obiekt na pozycje absolutna wysokość i szerokość 100% - może po prostu to przysłania Ci logo? spróbuj ustalić pozycje relatywną do kontenera w którym jest ten obiekt i nie będzie Ci zasłaniał


-
|| Link widoczny tylko dla zarejestrowanych. Zarejestruj się lub zaloguj. ||
(Ten post był ostatnio modyfikowany: 30-12-2016 13:11 przez singit.)
30-12-2016 13:11
Znajdź wszystkie posty użytkownika Odpowiedz cytując ten post
Rozpocznij wątek  Odpowiedz 


Skocz do: