论坛 › 欢乐水吧 › 求助。。。

东篱闲人 发表于 2023-8-6 13:13

求助。。。

https://www.huachaowang.com/forum.php?mod=viewthread&tid=70408&extra=page%3D1

东篱闲人 发表于 2023-8-6 13:15

这个帖子，俺在另一个浏览器上看到是这个效果。

https://pic.imgdb.cn/item/64cf2c421ddac507ccc97847.jpg

东篱闲人 发表于 2023-8-6 13:16

就是小图片显示全部，俺感觉这个效果不错。代码能不能改成这样？{:5_115:}

东篱闲人 发表于 2023-8-6 13:17

@亚伦影音工作室
@马黑黑
@红影
@小辣椒
@醉美水芙蓉

东篱闲人 发表于 2023-8-6 13:18

{:4_180:}

亚伦影音工作室 发表于 2023-8-6 14:13

可以将图片切割代码去掉就是长方形效果。

醉美水芙蓉 发表于 2023-8-6 16:03

东篱闲人 发表于 2023-8-6 16:21

亚伦影音工作室 发表于 2023-8-6 14:13
可以将图片切割代码去掉就是长方形效果。

太专业了俺听着就迷糊了，你能不能给俺切一下，连带你说的那些没有的代码，都给俺切去。。。{:5_115:}

东篱闲人 发表于 2023-8-6 16:22

醉美水芙蓉 发表于 2023-8-6 16:03
亚伦老师已经告诉你了，将图片切割代码去掉就可以了！

问题是，俺都不知道哪个是切割代码。。。{:5_109:}

东篱闲人 发表于 2023-8-6 16:23

<div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tbody><tr><td class="t_f" id="postmessage_1940384"><br><br><style>
#papa { margin: 20px -300px; width: 1164px; height: 620px; background: gray url('https://pic.imgdb.cn/item/64cced6c1ddac507ccfdb0ec.jpg') center/cover no-repeat; box-shadow:0 0px 0px 3px #800000; position: relative; z-index: 1; --state: running; overflow:hidden;}
#lrc { --motion: cover2; --tt: 1s; position: absolute; left:85%;top:10%; transform: translate(-50%, 10px);font:normal 1.5em/ 40px 华文隶书; color:#0000;filter:hue-rotate(360deg)contrast(120%)brightness(200%)drop-shadow( 0px 2px 0px #ffffff); z-index: 2; writing-mode: vertical-rl;}
#lrc::before { position: absolute; content: attr(data-lrc); width: 100%; height: 100%; color: transparent; overflow: hidden; white-space: pre;background:#E00000 ; filter: drop-shadow( 0px 0px 1px #ffffff)drop-shadow( 0px 0px 1px #ffffff)drop-shadow( 0px 0px 1px #ffffff)drop-shadow( 0px 0px 1px #ffffff); -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state);writing-mode: vertical-rl; }
@keyframes cover1{0% { width: 100%;letter-spacing: 10px; height: 0; }100% { width: 100%; height: 300%;letter-spacing: 0px;color:#000080; } }
@keyframes cover2 {0% { width: 100%;letter-spacing: 10px; height: 0; }100% { width: 100%; height: 300%;letter-spacing: 0px;color:#000080; } }

#clock {z-index: 20;
        margin: 40% 5%;
        width: 280px;
        height: 150px;
          color: #eeeeee;
       border-radius: 0px 150px 0px 150px;
        display: grid;background: url('https://pic.imgdb.cn/item/64cce8621ddac507ccf1b726.jpg') center/cover no-repeat;
box-shadow:0 0px 0px 2px #ffffff;

        place-items: center;
        position: relative;
        cursor: pointer;
        opacity: 1;
        --state: paused;
}
#clock::before, #clock::after {
        position: absolute;
        content: '';
        width: 3px;
        height: 68px;
}
#clock::after {
        --deg: 360deg;
        bottom: 50%;
        background: #00ff00;
        opacity: 1;
        transform-origin: 50% 100%;
        animation: rot var(--time) infinite linear var(--state);
}
#clock::before {
        --deg: 25deg;
        top: 50%;
        background: #ff0000;
        transform: rotate(-45deg);
        transform-origin: 50% 0;
        animation: rot .3s infinite alternate linear var(--state);
}
#clock > span {
        position: absolute;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #eeeeee;
        z-index: 2;
}
#clock > span:nth-of-type(2) {
        top: 0px;
        width: 0px;
        height: 0px;
        background: #cccccc;
}
@keyframes rot {
        to {transform: rotate(var(--deg)); }}

.photo {width: 50%; height: 50%;
clip-path: polygon(100.00% 50.00%, 98.18% 50.19%, 93.01% 51.48%, 85.37% 54.68%, 76.48% 60.15%, 67.68% 67.68%, 60.15% 76.48%, 54.68% 85.37%, 51.48% 93.01%, 50.19% 98.18%, 50.00% 100.00%, 49.81% 98.18%, 48.52% 93.01%, 45.32% 85.37%, 39.85% 76.48%, 32.32% 67.68%, 23.52% 60.15%, 14.63% 54.68%, 6.99% 51.48%, 1.82% 50.19%, 0.00% 50.00%, 1.82% 49.81%, 6.99% 48.52%, 14.63% 45.32%, 23.52% 39.85%, 32.32% 32.32%, 39.85% 23.52%, 45.32% 14.63%, 48.52% 6.99%, 49.81% 1.82%, 50.00% 0.00%, 50.19% 1.82%, 51.48% 6.99%, 54.68% 14.63%, 60.15% 23.52%, 67.68% 32.32%, 76.48% 39.85%, 85.37% 45.32%, 93.01% 48.52%, 98.18% 49.81%, 100.00% 50.00%);
position: absolute;z-index: 1;
top:25%; left:30%;filter:contrast(120%)brightness(100%);
opacity: 0;box-shadow:0 0px 0px 2px #ffffff;
animation-name: round ;animation-duration: 180s;
               animation-iteration-count: infinite;
                animation-timing-function: linear;
}

@keyframes round{0% {
-webkit-transform:rotate(0)scale(1)translate(-50%,-40%);
opacity:1}
5% {
-webkit-transform:rotate(20deg)scale(1)translate(50%,30%);
opacity:1}
8% {
-webkit-transform:rotate(-20deg)scale(1)translate(-50%,30%);
opacity:1}
11% {
-webkit-transform:rotate(20deg)scale(1)translate(50%,-50%);
opacity:1}

15% {
-webkit-transform:rotate(-20deg)scale(0.6)translate(100%,-60%);
opacity:1}
18% {
-webkit-transform:rotate(80deg)scale(0)translate(-600%,450%);
opacity:0}
}

img:nth-child(1) {animation-delay: 168s;}
img:nth-child(2) {animation-delay: 156s;}
img:nth-child(3) {animation-delay: 144s;}
img:nth-child(4) {animation-delay: 132s;}
img:nth-child(5) {animation-delay: 120s;}
img:nth-child(6) {animation-delay: 108s;}
img:nth-child(7) {animation-delay: 96s;}
img:nth-child(8) {animation-delay: 84s;}
img:nth-child(9) {animation-delay: 72s;}
img:nth-child(10){animation-delay: 60s;}
img:nth-child(11){animation-delay: 48s;}
img:nth-child(12){animation-delay: 36s;}
img:nth-child(13){animation-delay: 24s;}
img:nth-child(14) {animation-delay: 12s;}
img:nth-child(15) {animation-delay: 0s;}
.stop img:nth-child(1),
.stop img:nth-child(2),
.stop img:nth-child(3),
.stop img:nth-child(4),
.stop img:nth-child(5),
.stop img:nth-child(6),
.stop img:nth-child(7),
.stop img:nth-child(8),
.stop img:nth-child(9),
.stop img:nth-child(10),
.stop img:nth-child(11),
.stop img:nth-child(12),
.stop img:nth-child(13),
.stop img:nth-child(14),
.stop img:nth-child(15){animation-play-state: paused;}
#papa:hover #fullscreen { display:block ;}
#fullscreen { position: absolute; top:5%; left:3%;color:#ffffff; filter:drop-shadow( 1px 1px 1px #000000);font: normal 2.2em华文隶书; opacity: 1; cursor: pointer; z-index: 1111}
</style>
<div id="papa">
<span id="fullscreen">全屏观赏</span>
<div id="testImg"><img alt="" class="photo" src="https://pic.imgdb.cn/item/64ccd5ad1ddac507ccc9ad32.jpg">

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64ccd5ef1ddac507ccca2da5.jpg">

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64ccd61c1ddac507ccca969c.jpg">

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64ccd6551ddac507cccb111d.jpg">

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64ccd68d1ddac507cccb8071.jpg">

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64ccd6c01ddac507cccbe320.jpg">

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64ccd7031ddac507cccc5b2a.jpg">

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64ccd7311ddac507ccccb6fd.jpg">

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64ccd75f1ddac507cccd2107.jpg">

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64ccd7c41ddac507ccce05b9.jpg">

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64ccd7fc1ddac507ccce785c.jpg">

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64ccd83a1ddac507cccefe4e.jpg">

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64ccd8661ddac507cccf5c3a.jpg">

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64ccd8c41ddac507ccd0157a.jpg">

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64ccd9281ddac507ccd0d7d8.jpg">
</div>
<div id="clock" style="--time:NaNs;">00:00 &nbsp; &nbsp; 00:00<span></span><span></span></div>
<div id="lrc" data-lrc="代码：亚伦影音工作室">代码：亚伦影音工作室</div>
</div>

<audio id="aud" src="https://music.163.com/song/media/outer/url?id=465920323.mp3" loop="" autoplay=""></audio>

<script>
let toMin = (val) => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60),sec = parseFloat(val % 60);if (min < 10) min = '0' + min;if (sec < 10) sec = '0' + sec;return min + ':' + sec;};
clock.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
aud.addEventListener('play', () => clock.style.setProperty('--state','running'));
aud.addEventListener('pause', () => clock.style.setProperty('--state','paused'));
aud.addEventListener('canplay', () => clock.style.setProperty('--time',aud.duration + 's'));
aud.addEventListener('timeupdate', () => clock.innerHTML = toMin(aud.currentTime) + ' &nbsp; &nbsp; ' +toMin(aud.duration) + '<span></span><span></span>');
let fs = true;
        fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏观赏', document.exitFullscreen());
                fs = !fs;
        };
</script>

<script>
(function() {
        let mKey = 0, mFlag = true;
        let lrcTime = (ar) => {let tmpAr = [];for(j = 0; j <ar.length - 1; j ++) {if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));}let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;tmpAr.push(aver);tmpAr.forEach((item,key) => {ar = item > aver ? aver : item;});return ar;};
        let averAdd = 0, offset = 0;
        let getLrcAr = (text) => {let lrcAr = [];let calcRule = ;for(x of text.split('\n')) {let ar = [];let re = /\d+[\.:]\d+([\.:]\d+)?/g;let geci = x.replace(re,'');if(geci) {geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');let time = x.match(re);if(time != null) {for(y of time) {let tmp = y.match(/\d+/g);let sec = 0;for(z in tmp) sec += tmp * calcRule;ar = ;lrcAr.push(ar); }}}}lrcAr.sort((a,b)=> a - b);return(lrcTime(lrcAr));}
        let geci = ` 作词 : 徐杰 作曲 : 路勇
编辑、配图：东篱闲人
月色入壶清凉如水
焚香煮炉故友相对
天地辽阔敞开心扉
悟却禅机收获智慧
茶香四溢自在入微
莲花盛开菩提相随
琴声悠悠举杯同醉
广结善缘喫茶为媒
岁月蹉跎融入茶禅一味
浮浮沉沉阅尽千山万水
苦涩甘甜都在清茶一杯
荡涤红尘我们用心体会
世事沧桑化作茶禅一味
起起落落上演离合喜悲
爱恨情仇不过淡茶一杯
放下所有才懂此中真味

茶香四溢自在入微
莲花盛开菩提相随
琴声悠悠举杯同醉
广结善缘喫茶为媒
岁月蹉跎融入茶禅一味
浮浮沉沉阅尽千山万水
苦涩甘甜都在清茶一杯
荡涤红尘我们用心体会
世事沧桑化作茶禅一味
起起落落上演离合喜悲
爱恨情仇不过淡茶一杯
放下所有才懂此中真味

岁月蹉跎融入茶禅一味
浮浮沉沉阅尽千山万水
苦涩甘甜都在清茶一杯
荡涤红尘我们用心体会
世事沧桑化作茶禅一味
起起落落上演离合喜悲
爱恨情仇不过淡茶一杯
放下所有才懂此中真味
放下所有才懂此中真味


`;
        let lrcAr = getLrcAr(geci);
        let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrcAr;lrc.dataset.lrc = lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');papa.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};
        let calcKey = () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime <= lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr - (aud.currentTime - lrcAr);showLrc(time);};
        let toMin = (val) => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60),sec = parseFloat(val % 60);if (min < 10) min = '0' + min;if (sec < 10) sec = '0' + sec;return min + ':' + sec;}
        let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        aud.addEventListener('pause', () => mState());
        aud.addEventListener('play', () => mState());
        aud.addEventListener('seeked', () => calcKey());
        aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime >= lrcAr) {if (mKey === j) showLrc(lrcAr);else continue;}}});
        mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
})();
</script>
<script>
var image = document.getElementById("testImg"),
    button = document.getElementById("clock");

if (image.classList && button) {
    button.onclick = function() {
      if (this.value == '.') {
            image.classList.remove('stop');
          this.value = '*';
      } else {
            image.classList.add('stop');
            this.value = '.';
      }
    };
}
</script>

</td></tr></tbody></table>


</div>
<div id="comment_1940384" class="cm">
</div>

<h3 class="psth xs1"><span class="icon_ring vm"></span><br></h3>
<dl id="ratelog_1940384" class="rate">
<br></dl>

亚伦影音工作室 发表于 2023-8-6 17:22

clip-path: polygon(100.00% 50.00%, 98.18% 50.19%, 93.01% 51.48%, 85.37% 54.68%, 76.48% 60.15%, 67.68% 67.68%, 60.15% 76.48%, 54.68% 85.37%, 51.48% 93.01%, 50.19% 98.18%, 50.00% 100.00%, 49.81% 98.18%, 48.52% 93.01%, 45.32% 85.37%, 39.85% 76.48%, 32.32% 67.68%, 23.52% 60.15%, 14.63% 54.68%, 6.99% 51.48%, 1.82% 50.19%, 0.00% 50.00%, 1.82% 49.81%, 6.99% 48.52%, 14.63% 45.32%, 23.52% 39.85%, 32.32% 32.32%, 39.85% 23.52%, 45.32% 14.63%, 48.52% 6.99%, 49.81% 1.82%, 50.00% 0.00%, 50.19% 1.82%, 51.48% 6.99%, 54.68% 14.63%, 60.15% 23.52%, 67.68% 32.32%, 76.48% 39.85%, 85.37% 45.32%, 93.01% 48.52%, 98.18% 49.81%, 100.00% 50.00%);就是这些。

红影 发表于 2023-8-6 17:34

嗯，亚伦老师已经说了，不切割了就是方的。

起个网名好难 发表于 2023-8-6 17:49

我猜是你的另一个浏览器不支持 clip-path: polygon

醉美水芙蓉 发表于 2023-8-6 17:56

东篱闲人 发表于 2023-8-6 18:04

亚伦影音工作室 发表于 2023-8-6 17:22
clip-path: polygon(100.00% 50.00%, 98.18% 50.19%, 93.01% 51.48%, 85.37% 54.68%, 76.48% 60.15%, 67. ...

谢谢谢谢，辛苦了。。{:4_180:}

东篱闲人 发表于 2023-8-6 18:04

红影 发表于 2023-8-6 17:34
嗯，亚伦老师已经说了，不切割了就是方的。

嗯嗯，俺试试。。。{:5_112:}

东篱闲人 发表于 2023-8-6 18:05

起个网名好难 发表于 2023-8-6 17:49
我猜是你的另一个浏览器不支持 clip-path: polygon

技术问题，一律整不明白。。。{:5_117:}

东篱闲人 发表于 2023-8-6 18:05

醉美水芙蓉 发表于 2023-8-6 17:56
clip-path: polygon(100.00% 50.00%, 98.18% 50.19%, 93.01% 51.48%, 85.37% 54.68%, 76.48% 60.15%, 67.68 ...

辛苦芙蓉。。。{:4_190:}

东篱闲人 发表于 2023-8-6 18:09

亚伦影音工作室 发表于 2023-8-6 17:22
clip-path: polygon(100.00% 50.00%, 98.18% 50.19%, 93.01% 51.48%, 85.37% 54.68%, 76.48% 60.15%, 67. ...

还有那个表针是怎么回事，就是来回晃吗？俺总感觉它是坏了。。。{:5_117:}

醉美水芙蓉 发表于 2023-8-6 18:16

查看完整版本: 求助。。。