+- Forum Informatyczne WebElite.pl (https://www.webelite.pl)
+-- Dział: # Technika komputerowa (https://www.webelite.pl/forumdisplay.php?fid=10)
+--- Dział: Webmasterka (https://www.webelite.pl/forumdisplay.php?fid=34)
+--- Wątek: Animacje w CSS3 (/showthread.php?tid=5505)
Animacje w CSS3 - UltimateRekt - 17-12-2016
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:
.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>
<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>
}RE: Animacje w CSS3 - singit - 30-12-2016
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