投稿 评论 顶部
 手机版 | QQ登录 | 登陆 | 注册 | 留言 | 设首页 | 加收藏

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

佚名 网站网络

  接口用的我的美女图片接口如果你有好的美图接口可以修改一下代码,每5秒刷新一张图片,建议电脑打开按F11欣赏。



源代码:

  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('http://www.scfzw.cn/api/mn/?fzw=520&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(http://www.scfzw.cn/api/mn/?fzw=520&${countImg})`;
  49.             }else if((countTime + 5) % 10 == 7){    // 第2张图片默认无图片,比第一张延迟5s开始动画,+5保证了在第2秒开始加载图片
  50.                 countImg += 1;
  51.                 bg2Container.style = `background-image: url(http://www.scfzw.cn/api/mn/?fzw=520&${countImg})`;
  52.             }
  53.         }, 1000);
  54.     </script>
  55. </html>

  示例网址:http://www.fzwqq.com/img/