求助。。。

东篱闲人

https://www.huachaowang.com/foru ... &extra=page%3D1

东篱闲人

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

                               
登录/注册后可看大图

东篱闲人

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

东篱闲人

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

东篱闲人

亚伦影音工作室

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

东篱闲人

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

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

东篱闲人

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

问题是，俺都不知道哪个是切割代码。。。

东篱闲人

<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[j] = parseFloat((ar[j+1][0] - ar[j][0]).toFixed(1));}let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;tmpAr.push(aver);tmpAr.forEach((item,key) => {ar[key][2] = item > aver ? aver : item;});return ar;};
        let averAdd = 0, offset = 0;
        let getLrcAr = (text) => {let lrcAr = [];let calcRule = [60,1,0.001];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[z] * calcRule[z];ar[0] = [parseFloat(sec.toFixed(2)) + offset, geci];lrcAr.push(ar[0]); }}}}lrcAr.sort((a,b)=> a[0] - b[0]);return(lrcTime(lrcAr));}
        let geci = `[00:00.00] 作词 : 徐杰 作曲 : 路勇
[00:01.00] 编辑、配图：东篱闲人
[00:28.88]月色入壶清凉如水
[00:34.36]焚香煮炉故友相对
[00:39.99]天地辽阔敞开心扉
[00:44.96]悟却禅机收获智慧
[00:51.24]茶香四溢自在入微
[00:57.02]莲花盛开菩提相随
[01:02.74]琴声悠悠举杯同醉
[01:07.58]广结善缘喫茶为媒
[01:16.95]岁月蹉跎融入茶禅一味
[01:22.20]浮浮沉沉阅尽千山万水
[01:28.50]苦涩甘甜都在清茶一杯
[01:33.53]荡涤红尘我们用心体会
[01:39.80]世事沧桑化作茶禅一味
[01:44.82]起起落落上演离合喜悲
[01:51.12]爱恨情仇不过淡茶一杯
[01:56.16]放下所有才懂此中真味
[02:04.41]
[02:17.32]茶香四溢自在入微
[02:22.90]莲花盛开菩提相随
[02:28.68]琴声悠悠举杯同醉
[02:33.51]广结善缘喫茶为媒
[02:42.82]岁月蹉跎融入茶禅一味
[02:47.85]浮浮沉沉阅尽千山万水
[02:54.27]苦涩甘甜都在清茶一杯
[02:59.36]荡涤红尘我们用心体会
[03:05.53]世事沧桑化作茶禅一味
[03:10.61]起起落落上演离合喜悲
[03:17.01]爱恨情仇不过淡茶一杯
[03:22.04]放下所有才懂此中真味
[03:29.64]
[03:31.63]岁月蹉跎融入茶禅一味
[03:36.66]浮浮沉沉阅尽千山万水
[03:43.09]苦涩甘甜都在清茶一杯
[03:48.31]荡涤红尘我们用心体会
[03:54.46]世事沧桑化作茶禅一味
[04:00.14]起起落落上演离合喜悲
[04:05.81]爱恨情仇不过淡茶一杯
[04:10.84]放下所有才懂此中真味
[04:17.68]放下所有才懂此中真味
[04:28.15]

`;
        let lrcAr = getLrcAr(geci);
        let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrcAr[mKey][1];lrc.dataset.lrc = lrcAr[mKey][1].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[j][0]) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr[mKey][2] - (aud.currentTime - lrcAr[mKey][0]);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[j][0]) {if (mKey === j) showLrc(lrcAr[j][2]);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>

亚伦影音工作室

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%);就是这些。

红影

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

起个网名好难

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

东篱闲人

亚伦影音工作室 发表于 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. ...

谢谢谢谢，辛苦了。。

东篱闲人

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

嗯嗯，俺试试。。。

东篱闲人

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

技术问题，一律整不明白。。。

东篱闲人

醉美水芙蓉 发表于 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 ...

辛苦芙蓉。。。

东篱闲人

亚伦影音工作室 发表于 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. ...

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