Share code : Slide show phong cách iphone X

Share code : Slide show phong cách iphone X

Iphone X đang là một từ khoá hot nhất trên các trang tìm kiếm hiện nay. Để đi kịp xu thế đó hôm nay mình xin chia sẻ với các bạn một slide show phong các iphone X cực độc đáo.

 

Mã HTML:

<div class = " 
    story_text 
    "> </ div> 
    <div class = ' 
        story_text' "gallery-content__img active" data-img = "http://doodling.surge.sh/assets/images/bg-1.jpg"> <img alt="Slider show Iphone X" src = "http://doodling.surge.sh/assets/images / div> 
        <div class = "gallery-content__img" data-img = "http://doodling.surge.sh/assets/images/bg-2.jpg"> <img alt="Slider show Iphone X" src = "http://doodling.surge.sh/assets/images/bg-2.jpg" /> </ div> 
        <div class = "gallery-content__img" data-img = "http: //doodling.surge .sh / assets / images / bg-3.jpg "> <img alt="Slider show Iphone X" src ="http://doodling.surge.sh/assets/images/bg-3.jpg "/> </ div>
        <div class = "gallery-content__img" data-img = "http://doodling.surge.sh/assets/images/bg-4.jpg"> <img alt="Slider show Iphone X" src = "http://doodling.surge.sh/ tài sản / hình ảnh / bg-4.jpg "/> </ div> 
        <div class =" gallery-content__img "data-img =" http://doodling.surge.sh/assets/images/bg-5.jpg " > <img alt="Slider show Iphone X" src = "http://doodling.surge.sh/assets/images/bg-5.jpg" /> </ div> 
        <div class = "gallery-content__img" data-img = "http: // doodling.surge.sh/assets/images/bg-6.jpg"><img alt="Slider show Iphone X" src = "http://doodling.surge.sh/assets/images/bg-6.jpg" /> </ div> 
        <div class = "gallery-content__img" data-img = "http://doodling.surge.sh/assets/images/bg-7.jpg"> <img alt="Slider show Iphone X" src = "http: //doodling.surge.sh / tài sản / hình ảnh / bg-7.jpg "/> </ div> 
    </ div> 
</ div>

Mã CSS:

html {
 kích cỡ phông chữ: 62,5%;
}

thân hình {
 nền: lightgray;
 kích cỡ phông chữ: 1.4rem;
}
cơ thể ul {
 danh sách-phong cách: không có;
}
body a {
 văn bản-trang trí: không có gì quan trọng;
 phác thảo: không quan trọng;
 màu sắc: kế thừa;
}

*, h1, h2, h3, h4, h5, h6, p {
 lề: 0;
 đệm: 0;
 font-weight: bình thường;
 hộp kích thước: hộp biên giới;
 phác thảo: không có;
}

.workspace {
 hiển thị: -webkit-box;
 hiển thị: -ms-flexbox;
 hiển thị: flex;
 chiều cao: 100vh;
 -bộ hộp-hộp-gói: trung tâm;
 -ms-flex-pack: trung tâm;
 biện minh-nội dung: trung tâm;
 -bộ cụm từ hộp-căn lề: trung tâm;
 -ms-flex-align: trung tâm;
 align-items: trung tâm;
 màu nền: màu trắng;
}
.workspace.active .gallery-content {
 -webkit-chuyển đổi: translateY (0);
 biến đổi: translateY (0);
}
.workspace.active .mobile-body {
 -webkit-chuyển đổi: quy mô (1);
 biến đổi: quy mô (1);
 độ mờ: 1;
 hộp bóng: 0 0 2rem 1rem rgba (0, 0, 0, 0.1);
}

.bg-content {
 vị trí: tuyệt đối;
 trái: 0;
 phải: 0;
 đầu: 0;
 đáy: 0;
 hình nền: url ("http://doodling.surge.sh/assets/images/bg-1.jpg");
 background-size: bao gồm;
 vị trí nền: trung tâm;
 lặp lại: không lặp lại;
 bộ lọc mạng: blur (1rem);
 lọc: blur (1rem);
 -chuyển đổi trang web: tất cả .5s;
 chuyển tiếp: tất cả .5s;
}

.gallery-content {
 vị trí: cố định;
 đáy: 0;
 biên giới-bên trái-bán kính: 4rem;
 border-top-right-bán kính: 4rem;
 hộp bóng: 0 0 2rem rgba (0, 0, 0, 0.2);
 z-index: 1;
 màu nền: đen;
 chiều cao: 7.5 dặm;
 hiển thị: -webkit-box;
 hiển thị: -ms-flexbox;
 hiển thị: flex;
 -bộ cụm từ hộp-căn lề: trung tâm;
 -ms-flex-align: trung tâm;
 align-items: trung tâm;
 đệm: 0 3rem;
 -webkit-hộp-gói: biện minh;
 -ms-flex-pack: biện minh;
 biện minh-nội dung: khoảng cách giữa;
 align-items: trung tâm;
 -webkit-chuyển đổi: translateY (7.5rem);
 biến đổi: translateY (7.5rem);
 -bộ dịch vụ chuyển đổi: tất cả 1s;
 chuyển tiếp: tất cả 1s;
 tràn: tự động;
}
.gallery-content__img {
 chiều rộng: 4.5 m.
 chiều cao: 4.5 m.
 -ms-flex-âm: 0;
 flex co nhỏ: 0;
 lề phải: 2rem;
 đường viền: .1rem rắn trắng;
 con trỏ: con trỏ;
 -chuyển đổi trang web: tất cả .5s;
 chuyển tiếp: tất cả .5s;
}
.gallery-content__img.active {
 chiều rộng đường biên: .2rem;
 màu đường viền: tím;
}
.gallery-content__img: last-child {
 lề-phải: 0;
}
.gallery-content__img img {
 Chiều rộng: 100%;
 chiều cao: 100%;
 -o-đối tượng-phù hợp: bao gồm;
 đối tượng phù hợp: bao gồm;
}

.mobile-body {
 vị trí: tương đối;
 -ms-flex-âm: 0;
 flex co nhỏ: 0;
 chiều rộng: 35.6rem;
 chiều cao: 72.2rem;
 bán kính biên giới: 6rem;
 hiển thị: -webkit-box;
 hiển thị: -ms-flexbox;
 hiển thị: flex;
 -bộ hộp-hộp-gói: trung tâm;
 -ms-flex-pack: trung tâm;
 biện minh-nội dung: trung tâm;
 hình nền: url ("http://doodling.surge.sh/assets/images/bg-1.jpg");
 vị trí nền: trung tâm;
 background-size: bao gồm;
 lặp lại: không lặp lại;
 -webkit-user-select: không có;
 -moz-user-select: không có;
 -ms-user-select: none;
 user-select: không có;
 -webkit-chuyển đổi: quy mô (0,9);
 chuyển đổi: quy mô (0,9);
 độ mờ: 0;
 hộp bóng tối: không có;
 -bộ dịch vụ chuyển đổi: tất cả 1s;
 chuyển tiếp: tất cả 1s;
 margin-bottom: 7.5rem;
}
.mobile-body: hover {
 hộp bóng tối: không quan trọng;
 -webkit-chuyển đổi: quy mô (0,95) quan trọng;
 biến đổi: quy mô (0,95) quan trọng;
}
.mobile-body .layer-1 {
 vị trí: tuyệt đối;
 trái: 0;
 phải: 0;
 đầu: 0;
 đáy: 0;
 biên giới: .4rem rắn #dcdcdc;
 bán kính biên giới: 6rem;
}
.mobile-body .layer-2 {
 vị trí: tuyệt đối;
 trái: 0.3độ;
 phải: 0.3độ;
 đầu: 0.3độ;
 đáy: 0.3độ;
 biên giới: 1.6độ rắn # 000000;
 bán kính biên giới: 5.6rem;
}
.mobile-body .layer-gradient-1 {
 vị trí: tuyệt đối;
 trái: 1.1rem;
 phải: 1.1rem;
 đỉnh: 1.1độ;
 đáy: 1.1độ;
 biên giới: .3rem rắn # 484848;
 bán kính biên giới: 5rem;
 bộ lọc mạng: blur (1px);
 bộ lọc: blur (1px);
 độ mờ: .5;
}
.mobile-body .layer-gradient-2 {
 vị trí: tuyệt đối;
 trái: 0.7rem;
 phải: 0.7rem;
 trên cùng: 0.7rem;
 đáy: 0.7 độ;
 biên giới: .4rem rắn #bcbcbc;
 bán kính biên giới: 5.6rem;
 độ mờ: .5;
 bộ lọc mạng: blur (1px);
 bộ lọc: blur (1px);
}
.mobile-body .top-bar {
 chiều rộng: 17.3rem;
 chiều cao: 2,8 độ;
 màu nền: # 000000;
 vị trí: tuyệt đối;
 đỉnh: 1.7m;
 trái: 9.1rem;
 đường viền-trái-bán kính: 1.5rem;
 đường viền-phải-bán kính: 1.5rem;
}
.mobile-body .top-bar: trước {
 Nội dung: "";
 vị trí: tuyệt đối;
 đáy: 1,25độ;
 trái: -0.9rem;
 chiều rộng: .8rem;
 chiều cao: .8rem;
 biên giới: .4rem rắn trong suốt;
 border-top: .4rem rắn đen;
 border-right: .4rem rắn đen;
 border-top-right-bán kính: .6rem;
 -webkit-chuyển đổi: luân phiên (28deg);
 biến đổi: xoay (28deg);
}
.mobile-body .top-bar: sau {
 Nội dung: "";
 vị trí: tuyệt đối;
 đáy: 1,25độ;
 phải: -0.9rem;
 chiều rộng: .8rem;
 chiều cao: .8rem;
 biên giới: .4rem rắn trong suốt;
 border-top: .4rem rắn đen;
 border-left: .4rem đen đậm;
 border-top-right-bán kính: .6rem;
 -webkit-chuyển đổi: xoay (-28deg);
 biến đổi: xoay (-28deg);
}
.mobile-body .camera {
 vị trí: tuyệt đối;
 đáy: 1.1độ;
 phải: 4.5rem;
 phải: 4.5rem;
 chiều rộng: 1rem;
 chiều cao: 1 độ;
 màu nền: màu đỏ;
 bán kính biên giới: 50%;
 biên giới: .2rem rắn # 1e1f22;
 nền-image: -webkit-tuyến-gradient (bên phải, # 091528, # 2363a6);
 background-image: linear-gradient (bên phải, # 091528, # 2363a6);
}
.mobile-body .speaker {
 vị trí: tuyệt đối;
 dưới cùng: 1.3rem;
 phải: 6.5 độ;
 chiều rộng: 4rem;
 chiều cao: .6rem;
 màu nền: # 161616;
 bán kính biên giới: .2rem;
}
.mobile-body .button {
 chiều rộng: .3rem;
 chiều cao: 2,5 độ;
 màu nền: #dcdcdc;
 vị trí: tuyệt đối;
 trái: -.2rem;
 border-top-left-bán kính: .3rem;
 đường viền-trái-bán kính: .3rem;
 biên giới: 0.1g rgba rắn (0, 0, 0, 0.1);
 border-right: không có;
}
.mobile-body .button.silent {
 đầu: 9.8rem;
}
.mobile-body .button.volume-up {
 đầu: 15 độ;
 chiều cao: 5 độ;
}
.mobile-body .button.volume-down {
 đầu: 21.6rem;
 chiều cao: 5 độ;
}
.mobile-body .button.power {
 đầu: 16.9rem;
 chiều cao: 5 độ;
 phải: -.3rem;
 trái: tự động;
 -webkit-chuyển đổi: xoay (180deg);
 biến đổi: xoay (180deg);
}

@media (chiều rộng tối đa: 600px) {
 .gallery-content {
 Chiều rộng: 100%;
 bán kính biên giới: 0;
 }

.mobile-body {
 -webkit-chuyển đổi: quy mô (0,65) quan trọng;
 biến đổi: quy mô (0,65) quan trọng;
 }
 .mobile-body: hover {
 -webkit-biến đổi: quy mô (0,6)! quan trọng;
 biến đổi: quy mô (0,6)! quan trọng;
 }

.gallery-content__img: last-child {
 margin-right: 2rem quan trọng;
 }
}
@media (chiều cao tối đa: 800px) {
 .mobile-body {
 -webkit-chuyển đổi: quy mô (0,77) quan trọng;
 biến đổi: quy mô (0,77) quan trọng;
 }
 .mobile-body: hover {
 -webkit-chuyển đổi: quy mô (0,68) quan trọng;
 biến đổi: quy mô (0,68) quan trọng;
 }
}
@media (chiều cao tối đa: 630px) {
 .mobile-body {
 -webkit-chuyển đổi: quy mô (0.53)! quan trọng;
 biến đổi: quy mô (0.53) quan trọng;
 }
 .mobile-body: hover {
 -webkit-chuyển đổi: quy mô (0,48) quan trọng;
 biến đổi: quy mô (0,48) quan trọng;
 }
}

Mã Javascript:

<script> 
 window.onload = function () { 
 document.querySelector ('. workspace'). classList.add ('active'); 
 };

var gallery = document.querySelectorAll ('gallery-content__img'), 
 mobileBody = document.querySelector ('mobile cơ thể'), 
 bg = document.querySelector ('.bg-content');

gallery.forEach (function (g) { 
 g.addEventListener ('bấm', function () { 
 var imgSrc = this.dataset.img, 
 activeGallery = document.querySelector ('gallery-content__img.active');

activeGallery.classList.remove ('active'); 
 this.classList.add ('active'); 
 bg.style.backgroundImage = 'url (\' '+ imgSrc +' \ ')'; 
 mobileBody.style.backgroundImage = 'url (\' '+ imgSrc +' \ ')'; 
 }); 
 });

</ script>

Bản giới thiệu

Chúc các bạn thành công. Đừng quên share cho bạn bè nếu thấy hay nha.