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

教程1 35,8223字数 2105阅读7分1秒阅读模式

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

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

网址：https://cdn.seovx.com/

源代码：

  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.             }
  19.             #bg1 {
  20.                 background-image: url('https://cdn.seovx.com/?mom=302&1');
  21.             }
  23.             #bg2 {
  24.                 animation-delay: 5s;            /* bg2延迟5秒开始。同时bg2一开始无图片，使bg1淡入时背景为白色而不是另一张图片 */
  25.             }
  27.             @keyframes bg{
  28.                 0%{transform: scale(1.5, 1.5);opacity: 0;}
  29.                 20%{opacity: 1;}                /* 0~2s 载入 */
  30.                 30%{transform: scale(1, 1);}            /* 0~3s图片缩放 */
  31.                 50%{opacity: 1;}                /* 5~7s 淡出 */
  32.                 70%{opacity: 0;}                /* 7~10s 图片隐藏。另一个背景在本背景淡出同时载入 */
  33.                 100%{opacity: 0;}
  34.             }
  36.         </style>
  37.     </head>
  38.     <body>
  39.         <div id="bg2" class="bg"></div>
  40.         <div id="bg1" class="bg"></div>
  41.     </body>
  42.     <script type="text/javascript">
  43.         countImg = 1;
  44.         countTime = 0;
  45.         bg1Container = document.getElementById("bg1");
  46.         bg2Container = document.getElementById("bg2");
  48.         setInterval(function(){
  49.             // 一个轮回为10秒（2个图片，第1张0-5s，第2张5-10s），每个背景在淡出后（第7秒）更新图片
  50.             countTime += 1;
  51.             if(countTime % 10 == 7){
  52.                 countImg += 1;
  53.                 bg1Container.style = `background-image: url(https://cdn.seovx.com/?mom=302&${countImg})`;
  54.             }else if((countTime + 5) % 10 == 7){    // 第2张图片默认无图片，比第一张延迟5s开始动画，+5保证了在第2秒开始加载图片
  55.                 countImg += 1;
  56.                 bg2Container.style = `background-image: url(https://cdn.seovx.com/?mom=302&${countImg})`;
  57.             }
  58.         }, 1000);
  59.     </script>
  60. </html>

我的微信
微信扫一扫
weinxin
我的微信
我的微信公众号
微信扫一扫
weinxin
我的公众号
 最后更新：2023-10-25
  • 本文由 夏沫 发表于 2021年11月21日21:06:23
  • 除非特殊声明，本站文章均为原创，转载请务必保留本文链接
  • 代码
  • 图片接口
安装Windows 11 跳过联网

加载中...

    • Poto 0
      1F
      回复

      您好，非常感谢您的这个网页效果，太酷了。

    发表评论

    匿名网友
    :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:
    确定

    拖动滑块以完成验证