1 Star 3 Fork 0

小枫/js轻量级图片暗箱插件 - by:小枫

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
克隆/下载
xf-PictureBlackbox.min.css 3.40 KB
一键复制 编辑 原始数据 按行查看 历史
小枫 提交于 2023-07-15 03:00 . 添加图片宽高相等样式
.xf-mainBox{--xf-filter:blur(5px);--xf-color-0:rgba(0,0,0,.75);--xf-color-1:#fff;--xf-color-2:#eee;--xf-color-3:#afafaf;--xf-ani:ease-in-out both;--xf-FadeIn-Animation:fadeIn .35s var(--xf-ani);--xf-FadeOut-Animation:fadeOut .35s var(--xf-ani);--xf-divW-animation:divW .25s var(--xf-ani);--xf-divH-animation:divH .25s var(--xf-ani);--xf-divC-animation:divC .25s var(--xf-ani);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box;z-index:999;font-size:16px;-webkit-backdrop-filter:var(--xf-filter);backdrop-filter:var(--xf-filter)}.xf-mainBox,.xf-masking{position:fixed;left:0;top:0;width:100%;height:100vh}.xf-mainBox .xf-masking{background-color:var(--xf-color-0);z-index:998}.xf-fadeOutDiv{position:fixed;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);text-align:center;z-index:1000}.Div-w{-webkit-animation:var(--xf-divW-animation);animation:var(--xf-divW-animation);height:auto;width:55vw}.Div-h{-webkit-animation:var(--xf-divH-animation);animation:var(--xf-divH-animation);width:auto;height:75vh}.Div-center{-webkit-animation:var(--xf-divC-animation);animation:var(--xf-divC-animation);width:30em;height:30em}@-webkit-keyframes divW{from{width:0}to{width:55vw}}@keyframes divW{from{width:0}to{width:55vw}}@-webkit-keyframes divH{from{height:0}to{height:75vh}}@keyframes divH{from{height:0}to{height:75vh}}@-webkit-keyframes DivC{from{width:0;height:0}to{width:30em;height:30em}}@keyframes DivC{from{width:0;height:0}to{width:30em;height:30em}}.xf-delDom{cursor:pointer;font-style:normal;position:fixed;right:-1em;top:-1em;font-size:3.5em;-webkit-transition:all .35s;-o-transition:all .35s;transition:all .35s;color:var(--xf-color-3)}.xf-delDom:hover{color:var(--xf-color-2);-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.xf-fadeOutText{cursor:pointer;margin:.7em auto;font-size:1.2em;width:90%;color:var(--xf-color-1)}.xf-fadeIn,.xf-fadeOut{opacity:0}.xf-fadeIn{-webkit-animation:var(--xf-FadeIn-Animation);animation:var(--xf-FadeIn-Animation)}.xf-fadeOut{-webkit-animation:var(--xf-FadeOut-Animation);animation:var(--xf-FadeOut-Animation)}@-webkit-keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@-webkit-keyframes fadeOut{from{opacity:1}to{opacity:0}}@keyframes fadeOut{from{opacity:1}to{opacity:0}}img.xf-PicBlackbox,img#xf-PicBlackbox{-webkit-opacity:0;opacity:0;-webkit-transition:opacity .35s;-o-transition:opacity .35s;transition:opacity .35s}img.xf-showImg{-webkit-opacity:1;opacity:1}.xf-simpleAlert{--xf-color-0:rgba(255,192,203,.75);--xf-color-1:#fff;position:fixed;top:5%;left:-100%;padding:10px 20px;font-size:1em;background-color:var(--xf-color-0);color:var(--xf-color-1);z-index:1000;-webkit-transition:left .35s;-o-transition:left .35s;transition:left .35s}@media screen and (max-width:401px){.xf-delDom{right:-0.4em;top:-1.2em;font-size:2.5em}.Div-w{width:85vw}.Div-h{height:55vh}.Div-center{width:17.5em;height:17.5em}@-webkit-keyframes divW{from{width:0}to{width:85vw}}@keyframes divW{from{width:0}to{width:85vw}}@-webkit-keyframes divH{from{height:0}to{height:55vh}}@keyframes divH{from{height:0}to{height:55vh}}@-webkit-keyframes DivC{from{width:0;height:0}to{width:17.5em;height:17.5em}}@keyframes DivC{from{width:0;height:0}to{width:17.5em;height:17.5em}}}
Loading...
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
JavaScript
1
https://gitee.com/xfwlclub/lightweight-image-blackbox.git
[email protected]:xfwlclub/lightweight-image-blackbox.git
xfwlclub
lightweight-image-blackbox
js轻量级图片暗箱插件 - by:小枫
master

搜索帮助

0d507c66 1850385 C8b1a773 1850385