Merhaba Arkadaslar assağıdaki sitedeki ortadaki resimlerin geçişine benzer html css kodlarıyla aynısını yapabilirmiyiz
şimdiden herkese teşekkürler
https://demo.themeftc.com/karo/home9/
Resim değiştirme buton yardım |
5 Mesajlar | 3.910 Okunma | ||
- Üyelik 29.12.2017
- Yaş/Cinsiyet 34 / E
- Meslek serbest
- Konum İstanbul Avrupa
- Ad Soyad Ö** Ö**
- Mesajlar 89
- Beğeniler 13 / 12
- Ticaret 2, (%50)
- Üyelik 29.10.2016
- Yaş/Cinsiyet 33 / E
- Meslek Öğretmen
- Konum Konya
- Ad Soyad O** K**
- Mesajlar 1116
- Beğeniler 499 / 498
- Ticaret 16, (%100)
- Üyelik 29.12.2017
- Yaş/Cinsiyet 34 / E
- Meslek serbest
- Konum İstanbul Avrupa
- Ad Soyad Ö** Ö**
- Mesajlar 89
- Beğeniler 13 / 12
- Ticaret 2, (%50)
hocam ilgilendiğin için teşekkür ederim Allah razı olsun ama ortada resimvar mesela resmin üstünde 3 tane buton var butonlara basınca resim değişsin öle bişe istiyorum yinede çok teşekkürler
- Üyelik 29.10.2016
- Yaş/Cinsiyet 33 / E
- Meslek Öğretmen
- Konum Konya
- Ad Soyad O** K**
- Mesajlar 1116
- Beğeniler 499 / 498
- Ticaret 16, (%100)
ozgun hocam kusura bakma. Ben aşağıdaki resimlerdeki animasyonu istediniz sandım. Slideri istemişsiniz.
Şu size örnek olabilir.
HTML
CSS
Daha farklı isterseniz jquery slider diye aratın bir çok örnek bulabilirsiniz.
Şu size örnek olabilir.
HTML
Resim 1
Resim 2
Resim 3
Resim 4
CSS
.slider {
height: 100%;
position: relative;
overflow: hidden;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: row nowrap;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-webkit-box-align: end;
-webkit-align-items: flex-end;
-ms-flex-align: end;
align-items: flex-end;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.slider__nav {
width: 12px;
height: 12px;
margin: 2rem 12px;
border-radius: 50%;
z-index: 10;
outline: 6px solid #ccc;
outline-offset: -6px;
box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.slider__nav:checked {
-webkit-animation: check 0.4s linear forwards;
animation: check 0.4s linear forwards;
}
.slider__nav:checked:nth-of-type(1) ~ .slider__inner {
left: 0%;
}
.slider__nav:checked:nth-of-type(2) ~ .slider__inner {
left: -100%;
}
.slider__nav:checked:nth-of-type(3) ~ .slider__inner {
left: -200%;
}
.slider__nav:checked:nth-of-type(4) ~ .slider__inner {
left: -300%;
}
.slider__inner {
position: absolute;
top: 0;
left: 0;
width: 400%;
height: 100%;
-webkit-transition: left 0.4s;
transition: left 0.4s;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: row nowrap;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
}
.slider__contents {
height: 100%;
padding: 2rem;
text-align: center;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-flex-flow: column nowrap;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.slider__image {
font-size: 2.7rem;
color: #2196F3;
}
.slider__caption {
font-weight: 500;
margin: 2rem 0 1rem;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
text-transform: uppercase;
}
.slider__txt {
color: #999;
margin-bottom: 3rem;
max-width: 300px;
}
@-webkit-keyframes check {
50% {
outline-color: #333;
box-shadow: 0 0 0 12px #333, 0 0 0 36px rgba(51, 51, 51, 0.2);
}
100% {
outline-color: #333;
box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);
}
}
@keyframes check {
50% {
outline-color: #333;
box-shadow: 0 0 0 12px #333, 0 0 0 36px rgba(51, 51, 51, 0.2);
}
100% {
outline-color: #333;
box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);
}
}
Daha farklı isterseniz jquery slider diye aratın bir çok örnek bulabilirsiniz.
- Üyelik 29.12.2017
- Yaş/Cinsiyet 34 / E
- Meslek serbest
- Konum İstanbul Avrupa
- Ad Soyad Ö** Ö**
- Mesajlar 89
- Beğeniler 13 / 12
- Ticaret 2, (%50)
Hocam Gösterdiğin İlgi alakadan ötürü sana teşekkür ediyorum güzel insan Allah yolunu acık etsin güzel günler gör çok yardımcı oldun yeniden çok teşekkürler