临江仙

东篱闲人 发表于 2023-7-18 09:45

本帖最后由东篱闲人于 2023-7-18 15:18 编辑 <br /><br /><style>
#mydiv {
   width: 1400px;
   height: 800px;
   LEFT: -400px;
   background: #EEC591 url('https://pic.imgdb.cn/item/64b5ecb71ddac507cc267476.jpg') no-repeat center / cover;
   box-shadow: 0 0 6px #000;
   pointer-events: none;
   z-index: 1;
   position: relative;
   margin: 30px auto;
   --clip: ''; --state: paused;
}
#mydiv::before, #mydiv::after {
   position: absolute;
   content: '';
   width: 200px;
   height: 200px;
   left: 170px;
   bottom: 50px;
   border-radius: 50%;
   pointer-events: auto;
   cursor: pointer;
   opacity: .75;
}
#mydiv::after {
   background: #EED5B7;
   clip-path: var(--clip);
   animation: scale 6s infinite alternate linear var(--state);
}
#mydiv::before {
   background: url('https://pic.imgdb.cn/item/64b5e7411ddac507cc154024.jpg') no-repeat center /cover;
   filter: hue-rotate(178deg);
}
@keyframes scale {
   0% { transform: rotate(0deg) scale(1); }
   50% { transform: rotate(360deg) scale(.8); }
   100% { transform: rotate(-360deg) scale(1); }
}

</style>

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

<script>
(function() {
   let clipBox = (xx,points,thick) => {
            let a = xx / 2, pointsAr = [`${xx}px 0, 0 0, 0 ${xx}px, ${xx}px ${xx}px, ${xx}px ${xx/2}px`];
            for(let i = 0; i <= points; i ++) {
                     let hudu = Math.PI / 180 * 360 / points * i;
                     let x1 = a + Math.cos(hudu) * (a - thick), y1 = a + Math.sin(hudu) * (a - thick);
                     pointsAr.push(x1 + 'px ' + y1 + 'px');
            }
            pointsAr.push(`${xx}px ${xx/2}px`, `${xx}px 0px`);
            return `polygon(${pointsAr.join(',')})`;
   };

   mydiv.style.setProperty('--clip',clipBox(200,6,2));

   let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
   aud.addEventListener('play', mState, false);
   aud.addEventListener('pause', mState, false);

   mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>

红影发表于 2023-7-18 10:20

哈哈，把黑黑圈起来了{:4_173:}

红影发表于 2023-7-18 10:22

这个画面大气，那个旋转效果颜色貌似可以调一下呢，用深褐色会不会更好{:4_203:}

红影发表于 2023-7-18 10:24

这个圆圈效果和背景中暗藏的圆圈很相配，漂亮{:4_199:}

东篱闲人 发表于 2023-7-18 10:31

红影发表于 2023-7-18 10:20
哈哈，把黑黑圈起来了

著名商标，盗版必究。。。。{:5_117:}

东篱闲人 发表于 2023-7-18 10:31

红影发表于 2023-7-18 10:22
这个画面大气，那个旋转效果颜色貌似可以调一下呢，用深褐色会不会更好

和俺想的一样。没找到调的地方。。。{:5_103:}

红影发表于 2023-7-18 14:22

东篱闲人发表于 2023-7-18 10:31
和俺想的一样。没找到调的地方。。。

应该是在这个两个地方调吧，我也不太懂，第一个是底色吧，第二个是色相旋转
#mydiv::after {
   background: #EEE8CD;
   clip-path: var(--clip);
   animation: scale 6s infinite alternate linear var(--state);
}
#mydiv::before {
   background: url('https://pic.imgdb.cn/item/64b5e7411ddac507cc154024.jpg') no-repeat center /cover;
   filter: hue-rotate(172deg);
}

东篱大哥看看，我换了这两个，去试了一下，感觉还行，当然东篱大哥可以自己再试，找到喜欢的颜色

东篱闲人 发表于 2023-7-18 15:11

红影发表于 2023-7-18 14:22
应该是在这个两个地方调吧，我也不太懂，第一个是底色吧，第二个是色相旋转
#mydiv::after {
b ...

嗯嗯嗯，好的。。。

红影发表于 2023-7-18 15:53

东篱闲人发表于 2023-7-18 15:11
嗯嗯嗯，好的。。。

嗯嗯，现在比原来的颜色要顺眼多了{:4_173:}

东篱闲人 发表于 2023-7-18 16:06

红影发表于 2023-7-18 15:53
嗯嗯，现在比原来的颜色要顺眼多了

{:4_174:}

樵歌发表于 2023-7-18 17:00

哈哈，这套行头不错！只可惜科学家不会用急得转圈圈{:4_170:}

东篱闲人 发表于 2023-7-18 17:16

樵歌发表于 2023-7-18 17:00
哈哈，这套行头不错！只可惜科学家不会用急得转圈圈

让科学家去打鱼。。。{:4_189:}

红影发表于 2023-7-18 19:36

东篱闲人发表于 2023-7-18 16:06

{:4_187:}

樵歌发表于 2023-7-19 15:18

东篱闲人发表于 2023-7-18 17:16
让科学家去打鱼。。。

锻炼锻炼嘛，除保安全还保长寿{:4_189:}

东篱闲人 发表于 2023-7-19 16:00

樵歌发表于 2023-7-19 15:18
锻炼锻炼嘛，除保安全还保长寿

{:5_116:}

页: [1]

花潮论坛's Archiver

临江仙