feat(lightbox): 接入全站图片预览
This commit is contained in:
kate522 committed
1 parent
0985d0cb0a
commit
ddf7c37556
29 files changed
+1212
-1805
No files matched your search
@@ -215,8 +215,6 @@
|
||||
--swiper-navigation-color: #000000;
|
||||
}
|
||||
|
||||
.swiper-thumbsbox .swiper-button-next,
|
||||
.swiper-thumbsbox .swiper-button-prev,
|
||||
.swiper-scroll .swiper-button-next,
|
||||
.swiper-scroll .swiper-button-prev {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
@@ -633,248 +631,6 @@ button.swiper-pagination-bullet {
|
||||
}
|
||||
|
||||
/****其它*****/
|
||||
.imgbox-show {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.imgbox-show * {
|
||||
-webkit-backdrop-filter: unset !important;
|
||||
backdrop-filter: unset !important;
|
||||
-webkit-filter: unset !important;
|
||||
filter: unset !important;
|
||||
}
|
||||
|
||||
.imgbox {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.imgbox {
|
||||
z-index: 100000;
|
||||
transition: 0.4s;
|
||||
--imgbox-origin-left: center;
|
||||
--imgbox-origin-top: center;
|
||||
}
|
||||
|
||||
.imgbox-bg {
|
||||
z-index: 1;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.full-screen .imgbox-bg {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.imgbox-an {
|
||||
position: fixed;
|
||||
z-index: 3;
|
||||
top: 13px;
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
.hide-but,
|
||||
.imgbox-an > a {
|
||||
color: #fff;
|
||||
background: rgba(41, 41, 41, 0.7);
|
||||
}
|
||||
|
||||
.imgbox-an > a {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
.hide-but {
|
||||
padding: 4px 20px;
|
||||
margin-right: 5px;
|
||||
border-radius: 0 0 4px 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.is-play .fa-play:before {
|
||||
content: '\f04c';
|
||||
}
|
||||
|
||||
.swiper-imgbox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: height 0.3s;
|
||||
z-index: 10001;
|
||||
}
|
||||
|
||||
.swiper-thumbsbox {
|
||||
background: rgba(41, 41, 41, 0.6);
|
||||
padding: 10px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.swiper-thumbsbox .swiper-slide {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 0 3px;
|
||||
opacity: 0.8;
|
||||
transition: border 0.3s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.show-thumb .swiper-imgbox {
|
||||
height: calc(100% - 120px);
|
||||
}
|
||||
|
||||
.swiper-thumbsbox .swiper-slide.swiper-slide-thumb-active {
|
||||
opacity: 1;
|
||||
border: 4px solid var(--focus-color);
|
||||
}
|
||||
|
||||
.imgbox.show {
|
||||
opacity: 1;
|
||||
-webkit-animation: fade 0.4s;
|
||||
animation: fade 0.4s;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.imgbox.hideing {
|
||||
opacity: 0;
|
||||
visibility: visible;
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.imgbox .swiper-slide {
|
||||
transform-origin: var(--imgbox-origin-left) var(--imgbox-origin-top);
|
||||
}
|
||||
|
||||
.imgbox.show .swiper-imgbox .swiper-slide {
|
||||
-webkit-animation: scale_in 0.6s;
|
||||
animation: scale_in 0.6s;
|
||||
-webkit-animation-timing-function: cubic-bezier(0.1, 0.73, 0.41, 1.1);
|
||||
animation-timing-function: cubic-bezier(0.1, 0.73, 0.41, 1.1);
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.imgbox.hideing .swiper-imgbox .swiper-slide {
|
||||
-webkit-animation: scale_out 0.4s;
|
||||
animation: scale_out 0.4s;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.swiper-imgbox .lazyloading,
|
||||
.swiper-imgbox .lazyload {
|
||||
transform: scale(0.7);
|
||||
}
|
||||
|
||||
.swiper-imgbox .lazyloaded:not(.lazyloadafter):not(.ls-is-cached) {
|
||||
-webkit-animation: imgbox_lazy_in 0.4s;
|
||||
animation: imgbox_lazy_in 0.4s;
|
||||
}
|
||||
|
||||
@-webkit-keyframes imgbox_lazy_in {
|
||||
0% {
|
||||
transform: scale(0.7);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes imgbox_lazy_in {
|
||||
0% {
|
||||
transform: scale(0.7);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes scale_in {
|
||||
0% {
|
||||
transform: scale(0.2);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scale_in {
|
||||
0% {
|
||||
transform: scale(0.2);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes scale_out {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(0.2);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scale_out {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.counter-con {
|
||||
transform: none;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
.counter {
|
||||
padding: 4px 12px;
|
||||
font-size: 16px;
|
||||
margin: 10px;
|
||||
background: rgba(41, 41, 41, 0.7);
|
||||
}
|
||||
|
||||
.swiper-imgbox .swiper-slide img {
|
||||
width: auto;
|
||||
height: auto;
|
||||
max-width: 90%;
|
||||
max-height: 90%;
|
||||
transition-duration: 0s;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.swiper-imgbox .counter-con {
|
||||
transform: none;
|
||||
top: 10px;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
width: auto;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.full-screen .swiper-slide img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.swiper-close {
|
||||
height: 100%;
|
||||
transition: 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
||||
}
|
||||
|
||||
.lazyloaded + .swiper-lazy-preloader {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.swiper-pagination-bullets > .swiper-pagination-bullet {
|
||||
width: 4px;
|
||||
@@ -905,16 +661,6 @@ button.swiper-pagination-bullet {
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.imgbox.show .swiper-imgbox .swiper-slide {
|
||||
-webkit-animation: scale_in 0.4s;
|
||||
animation: scale_in 0.4s;
|
||||
}
|
||||
|
||||
.swiper-imgbox .swiper-slide img {
|
||||
max-width: calc(100% - 10px);
|
||||
max-height: calc(100% - 10px);
|
||||
}
|
||||
|
||||
.swiper-container-horizontal > .swiper-pagination-bullets,
|
||||
.swiper-pagination-custom,
|
||||
.swiper-pagination-fraction {
|
||||
|
||||
Reference in new issue
Block a user