欢迎来到好人卡资源网,专注网络技术资源收集,我们不仅是网络资源的搬运工,也生产原创资源。寻找资源请留言

在线欣赏美女图片地址附源代码

网站源码 sky995 8个月前 (01-20) 522次浏览 0个评论

接口用的我的美女图片接口如果你有好的美图接口可以修改一下代码,每5秒刷新一张图片,代码来自别人写的,手机消耗流量有点多,建议电脑打开按F11欣赏。

浏览图在线欣赏美女图片地址附源代码

网址:https://m.seovx.com/img/

源代码:

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>随机美女图片</title>
  6.         <style type="text/css">
  7.             .bg {
  8.                 width: 100%;
  9.                 height: 100%;
  10.                 position: fixed;
  11.                 z-index: -1;
  12.                 background-position: center;
  13.                 background-repeat: no-repeat;
  14.                 background-attachment: fixed;
  15.                 background-size: cover;
  16.                 animation: bg 10s infinite;
  17.             }
  18.             #bg1 {
  19.                 background-image: url('https://cdn.seovx.com/?mom=302&1');
  20.             }
  21.             #bg2 {
  22.                 animation-delay: 5s;            /* bg2延迟5秒开始。同时bg2一开始无图片,使bg1淡入时背景为白色而不是另一张图片 */
  23.             }
  24.             @keyframes bg{
  25.                 0%{transform: scale(1.5, 1.5);opacity: 0;}
  26.                 20%{opacity: 1;}                /* 0~2s 载入 */
  27.                 30%{transform: scale(1, 1);}            /* 0~3s图片缩放 */
  28.                 50%{opacity: 1;}                /* 5~7s 淡出 */
  29.                 70%{opacity: 0;}                /* 7~10s 图片隐藏。另一个背景在本背景淡出同时载入 */
  30.                 100%{opacity: 0;}
  31.             }
  32.         </style>
  33.     </head>
  34.     <body>
  35.         <div id="bg2" class="bg"></div>
  36.         <div id="bg1" class="bg"></div>
  37.     </body>
  38.     <script type="text/javascript">
  39.         countImg = 1;
  40.         countTime = 0;
  41.         bg1Container = document.getElementById("bg1");
  42.         bg2Container = document.getElementById("bg2");
  43.         setInterval(function(){
  44.             // 一个轮回为10秒(2个图片,第1张0-5s,第2张5-10s),每个背景在淡出后(第7秒)更新图片
  45.             countTime += 1;
  46.             if(countTime % 10 == 7){
  47.                 countImg += 1;
  48.                 bg1Container.style = `background-image: url(https://cdn.seovx.com/?mom=302&${countImg})`;
  49.             }else if((countTime + 5) % 10 == 7){    // 第2张图片默认无图片,比第一张延迟5s开始动画,+5保证了在第2秒开始加载图片
  50.                 countImg += 1;
  51.                 bg2Container.style = `background-image: url(https://cdn.seovx.com/?mom=302&${countImg})`;
  52.             }
  53.         }, 1000);
  54.     </script>
  55. </html>

好人卡资源网 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:在线欣赏美女图片地址附源代码
喜欢 (2)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址