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

夏沫
夏沫
夏沫
116
文章
3
评论
2021年11月21日21:06:23
评论
1.1K 2107字阅读7分1秒

心灵毒鸡汤:

接口用的我的美女图片接口如果你有好的美图接口可以修改一下代码,每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>
  • 我的微信
  • 微信扫一扫
  • weinxin
  • 我的微信公众号
  • 微信扫一扫
  • weinxin
夏沫
  • 本文由 发表于 2021年11月21日21:06:23
  • 除非特殊声明,本站文章均为原创,转载请务必保留本文链接
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: