Aktualny czas: 01-06-2025, 15:48
Witaj! (Logowanie — Rejestracja)
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.
|
![UltimateRekt]()
Ocena wątku:
- 0 głosów - średnia: 0
- 1
- 2
- 3
- 4
- 5
|
Animacje w CSS3
|
| Autor |
Wiadomość |
UltimateRekt
Newbie
![]()
Liczba postów: 1
Reputacja:
0
|
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 |
|
singit
Newbie
![]()
Liczba postów: 4
Reputacja:
0
|
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ł
-
grafika komputerowa warszawa
(Ten post był ostatnio modyfikowany: 30-12-2016, 13:11 przez singit.)
|
|
| 30-12-2016, 13:11 |
|
