小辣椒 发表于 2022-7-18 19:35

微风 （同做岁月）

<style>
.wrap {
      left: -340px;top:150px;
        width: 1276px;
        height: 650px;
        background: teal url('https://wx.ttt.dj/updir/62d4283186dd7.gif') no-repeat

center/cover;
        position: relative;
      box-shadow:4px 4px 5px #333;
      border-radius:8px;
}
.wrap::before {
      content: '';
      position: absolute;
      width: 60%;
      height: 60%;
      background: url(' ') no-repeat

center/cover;
      opacity: .55;
      left:60px; top: 20px;
}
.progress {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 155px;
        height: 155px;
        left: 540px;
        top: 140px;
        border-radius: 50%;
        background: conic-gradient(from 180deg,#29ab7c0%,#e4f6f9 0%);
        cursor: pointer;
}

.progress::before {
        position: absolute;
        content: attr(data-per);
        width: 135px;
        height: 135px;
        border-radius: 50%;
        background: #F0FFFF url('https://wx.ttt.dj/updir/62d427cecf1c0.gif');
        text-align: center;
        font: normal 26px / 135px sans-serif;
}

</style>

<div class="wrap">
        <div class="progress" data-per="0%"></div>
        <audio id="aud" src="https://wx.ttt.dj/updir/62d428bb180b0.mp3" loop="loop"
autoplay="autoplay"></audio>
</div><br><br><br><br><br><br>

<script>

let progress = document.querySelector('.progress');
let aud = document.querySelector('#aud');
let current, task;

aud.addEventListener('timeupdate', function(){
        task = aud.duration;
        current = aud.currentTime;
        setProgress(task,current);
});

progress.onclick = () =>{
        aud.paused ? aud.play() : aud.pause();
};

function setProgress(tt,cc) {
        if(tt <= 0 || cc <= 0) return false;
        let prog = 100 * cc / tt;
        progress.style.background = `conic-gradient(from 180deg,#29ab7c ${prog}%,#e4f6f9 ${prog}%)`;
        progress.setAttribute('data-per', prog.toFixed() + '%');
}

</script>
<br><br><br><br><br><br>

小辣椒 发表于 2022-7-18 19:36

冬雨没有上来，小辣椒把岁月的美臀美女去了{:4_170:}

微风
https://www.huachaowang.com/forum.php?mod=viewthread&tid=61118&fromuid=4275
(出处: 花潮论坛)

小辣椒 发表于 2022-7-18 19:36

@走过岁月

岁月我先去做黑黑今天的作业了。。。。

上海朝阳 发表于 2022-7-18 19:39

很美，歌也是小辣椒唱的呀，好听。

红影 发表于 2022-7-18 19:57

亲爱的这个又加了树吧，和岁月粒子里背景的树颜色一样的，还另外加了很多动图元素，做得真美啊{:4_187:}

樵歌 发表于 2022-7-18 19:59

樵哥哥坚决支持把小辣椒音乐做成名牌！{:4_205:}

樵歌 发表于 2022-7-18 20:00

特别喜欢这样的抒情歌曲，唱得荡气回肠的，，，，，

醉美水芙蓉 发表于 2022-7-18 21:24

马黑黑 发表于 2022-7-18 21:53

这个特效有真实感

走过岁月 发表于 2022-7-18 22:34

小辣椒 发表于 2022-7-18 19:36
@走过岁月

岁月我先去做黑黑今天的作业了。。。。

来了

走过岁月 发表于 2022-7-18 22:34

小辣椒精彩连连

走过岁月 发表于 2022-7-18 22:35

这美女做的动感，头发飘逸

走过岁月 发表于 2022-7-18 22:36

还有个小鸟在吱吱喳喳

走过岁月 发表于 2022-7-18 22:37

总之就是非常棒

青青子衿 发表于 2022-7-18 23:38

小辣椒友友的帖子，另一种风格。。。漂亮，支持~！

千羽 发表于 2022-7-19 20:16

小辣椒真是多才多艺，这张图上看点多多{:4_187:}

小辣椒 发表于 2022-7-19 20:18

上海朝阳 发表于 2022-7-18 19:39
很美，歌也是小辣椒唱的呀，好听。

朝阳大哥，你怎么听得出是小辣椒在唱啊，神耳朵的{:4_170:}

小辣椒 发表于 2022-7-19 20:18

红影 发表于 2022-7-18 19:57
亲爱的这个又加了树吧，和岁月粒子里背景的树颜色一样的，还另外加了很多动图元素，做得真美啊

这个是自己PS过了

小辣椒 发表于 2022-7-19 20:19

樵歌 发表于 2022-7-18 19:59
樵哥哥坚决支持把小辣椒音乐做成名牌！

樵哥哥你太看得起小辣椒了{:4_172:}

千羽 发表于 2022-7-19 20:19

歌儿也好听{:4_208:}
页: [1] 2 3
查看完整版本: 微风 （同做岁月）