可爱老人网

 找回密码
 注册会员
搜索
楼主: 静悟

梦蝶--臧天朔

[复制链接]
发表于 2025-7-6 12:31 | 显示全部楼层
静悟 发表于 2025-7-6 10:30
问老师,用纯代码发,怎么去调整它的居中距离代码?

    margin: 80px auto 80px calc(50% - clamp(300px, 45vw, 700px) - 81px);
发表于 2025-7-6 12:42 | 显示全部楼层

margin: 80px auto 80px calc(50% - clamp(600px, 90vw, 1400px) / 2 - 81px);
 楼主| 发表于 2025-7-6 14:25 | 显示全部楼层
夕阳黄昏 发表于 2025-7-6 12:30
.mama {
    position: relative;
    margin: 80px auto 80px calc(50% - clamp(300px, 45vw, 700p ...

谢谢辛苦。祝夏安!
 楼主| 发表于 2025-7-6 14:33 | 显示全部楼层
夕阳黄昏 发表于 2025-7-6 12:31
margin: 80px auto 80px calc(50% - clamp(300px, 45vw, 700px) - 81px);

这是用尺寸的一半数是吗?知道了。
 楼主| 发表于 2025-7-6 14:34 | 显示全部楼层
夕阳黄昏 发表于 2025-7-6 12:42

margin: 80px auto 80px calc(50% - clamp(600px, 90vw, 1400px) / 2 - 81px);

这是用尺寸的全数。收藏了。
 楼主| 发表于 2025-7-6 14:44 | 显示全部楼层
本帖最后由 静悟 于 2025-7-6 14:45 编辑
夕阳黄昏 发表于 2025-7-6 12:42

margin: 80px auto 80px calc(50% - clamp(600px, 90vw, 1400px) / 2 - 81px);

这帖长城长的代码里,歌词怎么不会唱了呢?其余都好,换了歌词、音乐都 不显示。

  1. <style type="text/css">
  2. .cb-slideshow        {overflow:hidden;width:100%;height:100%;}
  3. .cb-slideshow img {
  4.         width:100%;
  5.         height:100%;
  6.         position: absolute;
  7.         top:0px; left:0px;
  8.         opacity: 0;display: block;
  9.         z-index: 100;filter:contrast(130%)brightness(100%);
  10.         animation: imageAnimation 60s linear infinite 0s
  11. }

  12. .cb-slideshow img:nth-child(2)        {animation-delay:  6s;}
  13. .cb-slideshow img:nth-child(3)        {animation-delay: 12s;}
  14. .cb-slideshow img:nth-child(4)  {animation-delay: 18s;}
  15. .cb-slideshow img:nth-child(5)  {animation-delay: 24s;}
  16. .cb-slideshow img:nth-child(6)         {animation-delay: 30s;}
  17. .cb-slideshow img:nth-child(7)  {animation-delay: 36s;}
  18. .cb-slideshow img:nth-child(8)  {animation-delay: 42s;}
  19. .cb-slideshow img:nth-child(9)  {animation-delay: 48s;}
  20. .cb-slideshow img:nth-child(10)        {animation-delay: 54s;}

  21. @keyframes imageAnimation
  22. {1% {opacity: 1;clip-path:polygon(20% 0%, 20% 0, 50% 50%, 0% 80%, 0 80%, 50% 50%, 80% 100%, 80% 100%, 50% 50%, 100% 20%, 100% 20%, 50% 50%);transform:scale(1)}
  23. 2%{
  24. opacity: 1;clip-path:polygon(20% 0%, 0% 20%, 50% 50%, 0% 80%, 20% 100%, 50% 50%, 80% 100%, 100% 80%, 50% 50%, 100% 20%, 80% 0%, 50% 50%);transform:scale(1)}
  25. 4% {
  26. opacity: 1;clip-path:polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);transform:scale(1)}
  27. 8% {
  28. opacity: 0.8;clip-path:polygon(20% 0%, 0 0, 0 50%, 0 100%, 20% 100%, 50% 100%, 80% 100%, 100% 100%, 100% 50%, 100% 0, 80% 0%, 50% 0);transform:scale(1)}
  29. 15% {
  30. opacity: 0;clip-path:polygon(20% 0%, 0 0, 0 50%, 0 100%, 20% 100%, 50% 100%, 80% 100%, 100% 100%, 100% 50%, 100% 0, 80% 0%, 50% 0);transform:scale(3);}
  31. }
  32. #outblk        {
  33. width: 1000px; height: 600px;overflow:hidden;border-radius:24px;
  34. box-shadow: 0px 0px 0px 2px #00ffff, 0px 0px 0px 20px #0000FF;
  35. margin:120px 0 32px -160px; position:relative;
  36. background:url(http://chuangshicdn.data.mvbox.cn/album/22/03/14/22031417263445440463.gif)0 0/30%  30%,linear-gradient(50deg, #00BFFF, #E6E6FA, #FFE4C4, #00fF00);
  37. }
  38. .mCtrl        {
  39.         width:120px;height:120px;
  40.         background:url(http://pan.yinhuabbs.cn/view.php/a93202bcdcd7cc95412d1595f9ec0dba.png) 0 0/100% 100%,
  41.         url(https://s1.ax1x.com/2022/04/21/L6G6mT.jpg) 0px 0px/150% 100%;
  42. }

  43. </style>
  44. <div id="outblk">
  45. <div class="cb-slideshow">
  46.         <img src="https://s1.ax1x.com/2022/04/21/L6GLAe.jpg" />
  47.         <img src="https://s1.ax1x.com/2022/04/21/L6GI6x.jpg" />
  48.         <img src="https://s1.ax1x.com/2022/04/21/L6Gr60.jpg" />
  49.         <img src="https://s1.ax1x.com/2022/04/21/L6GWtJ.jpg" />
  50.         <img src="https://s1.ax1x.com/2022/04/21/L6GRk4.jpg" />
  51.     <img src="https://s1.ax1x.com/2022/04/21/L6Gg7F.jpg" />
  52.     <img src="https://s1.ax1x.com/2022/04/21/L6G4pR.jpg" />
  53.         <img src="https://s1.ax1x.com/2022/04/21/L6Gfh9.jpg" />
  54.     <img src="https://s1.ax1x.com/2022/04/21/L6G511.jpg" />
  55.         <img src="https://s1.ax1x.com/2022/04/21/L6GoX6.jpg" />
  56. </div>
  57.         <div  class="lrcShow" id='sLRC' style="z-index:999;bottom:10px;" ></div>
  58.         <div  id="mDisk" class='mCtrl' style="z-index:998;"></div>
  59. </div>
  60. <script type="text/javascript">
  61. document.write('<script src="http://cesholl.cn3v.work/scripts/lrcPlayerX.min.js" type="text/javascript" charset="utf-8"><\/script>');
  62. </script>
  63. <script type="text/javascript">
  64. var lrc = `
  65. [00:00.10]长城 《谭晶为祖国祝福》- 谭晶
  66. [00:35.07]摘上一朵花
  67. [00:37.82]插在我的发
  68. [00:40.68]孟姜哽咽望呀望
  69. [00:45.62]城墙边泪雨下
  70. [00:49.17]一心想着他
  71. [00:51.95]一去水流
  72. [00:53.35]影都没有啊
  73. [00:57.59]送昭君千里
  74. [01:00.38]随风出塞去
  75. [01:03.25]明月照亮了山脊
  76. [01:08.23]远方吹来的风
  77. [01:11.72]竟然愁更愁
  78. [01:14.52]鸿雁寒蝉故事中
  79. [01:20.24]越过狼烟战火
  80. [01:22.96]留名万世千秋
  81. [01:25.77]边关城楼如巨龙
  82. [01:31.54]为国为家不休
  83. [01:34.21]一身正气雄纠
  84. [01:37.08]不是好汉不上坡
  85. [01:42.07]长城万里长
  86. [01:46.27]我那朝思暮想的故乡
  87. [01:51.89]就像妈妈一样的臂弯
  88. [01:57.55]紧紧抱着儿女手不放
  89. [02:04.62]长城万里长
  90. [02:08.89]我很骄傲站在这地方
  91. [02:14.49]处处幸福花开牧牛羊
  92. [02:20.17]这里是我的故乡
  93. [02:47.80]摘上一朵花
  94. [02:50.44]插在我的发
  95. [02:53.30]孟姜哽咽望呀望
  96. [02:58.35]远方吹来的风
  97. [03:01.82]竟然愁更愁
  98. [03:04.67]鸿雁寒蝉故事中
  99. [03:10.34]越过狼烟战火
  100. [03:13.10]留名万世千秋
  101. [03:15.87]边关城楼如巨龙
  102. [03:21.57]为国为家不休
  103. [03:24.34]一身正气雄纠
  104. [03:27.15]不是好汉不上坡
  105. [03:32.23]长城万里长
  106. [03:36.39]我那朝思暮想的故乡
  107. [03:42.40]就像妈妈一样的臂弯
  108. [03:47.64]紧紧抱着儿女手不放
  109. [03:54.71]长城万里长
  110. [03:59.05]我很骄傲站在这地方
  111. [04:04.58]处处幸福花开牧牛羊
  112. [04:10.33]这里是我的故乡
  113. [04:30.00]`;
  114.         var opts = {
  115.                 //        下面4个参数是必须的!
  116.                 lrcTxt:lrc,
  117.                 lrcShowID:'sLRC',
  118.                 audioCtrl:'mDisk',
  119.                 //        歌曲MP3链接放这里
  120.                 audioURL:'http://link.hhtjim.com/kw/23600971.mp3'
  121.         };
  122.         new lrcPlayerX(opts);
  123. </script>
复制代码

发表于 2025-7-6 16:48 | 显示全部楼层
静悟 发表于 2025-7-6 14:44
这帖长城长的代码里,歌词怎么不会唱了呢?其余都好,换了歌词、音乐都 不显示。

http://cesholl.cn3v.work/scripts/lrcPlayerX.min.js

坏掉了
 楼主| 发表于 2025-7-6 17:21 | 显示全部楼层
夕阳黄昏 发表于 2025-7-6 16:48
http://cesholl.cn3v.work/scripts/lrcPlayerX.min.js

坏掉了

能换个别的吗?
发表于 2025-7-6 17:51 | 显示全部楼层
静悟 发表于 2025-7-6 17:21
能换个别的吗?

一定要这个帖子吗? 现在就没兴趣做帖子了。
发表于 2025-7-6 19:40 | 显示全部楼层
静悟 发表于 2025-7-6 07:37
早上问好!祝夏安!

日久天长。
        
下一页 发布主题 快速回复

手机版|公众号|小黑屋|可爱老人网

GMT+8, 2025-10-17 11:40

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表