红影 发表于 2022-3-23 23:04

加林森 发表于 2022-3-23 20:12
我修改的效果

冲出天际的感觉{:4_173:}

加林森 发表于 2022-3-23 23:21

本帖最后由 加林森 于 2022-5-22 13:49 编辑 <br /><br />红影 发表于 2022-3-23 23:04
冲出天际的感觉
哈哈，感觉 就这样了！

<style>
.bgbox {
        left: -302px;
        width: 1200px;
        height: 799px;
        background-color: tan;
        background-image: url('https://pic.imgdb.cn/item/6289cb4c0947543129df6ba3.jpg'),
                url('https://pic.imgdb.cn/item/6289cc6b0947543129e03a38.png');
        background-repeat: no-repeat;
        background-position: center, right bottom;
        background-blend-mode: soft-light, screen;
        box-shadow: 2px 2px 6px gray;
        position: relative;
}
.tube {
        display: flex;
        justify-content: center;
        width: 10px;
        height: 100px;
        background-color: #eee;
        background: linear-gradient(#aaa 1px, #eee 1px);
        background-size: 8px 10px;
        box-shadow: 0 -8px 0 0 red, 0 18px 0 0 red;
        border-radius: 4px;
        overflow: hidden;
        cursor: pointer;
        transform: translate(10px, 669px);
        position: relative;
}
.ball {
        position: absolute;
        width: 4px;
        height: 100px;
        background: rgba(255,0,0,.45);
        top: 100px;
}
</style>

<div class="bgbox">
        <div class="tube">
                <div class="ball"></div>
        </div>
        <audio id="aud" src="https://www.joy127.com/url/18831.mp3" loop="loop" autoplay="autoplay"></audio>
</div>

<script>
let aud = document.querySelector('#aud');
let tube = document.querySelector('.tube');
let ball = document.querySelector('.ball');
let task, current;

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

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

function setProgress(tt,cc) {
        if(tt <= 0 || cc <= 0) return false;
        let prog = 100 * cc / tt;
        ball.style.transform ='translateY(-' + prog + 'px)';
}
</script>

大猫咪 发表于 2022-3-23 23:24

这歌真好听制作真漂亮{:4_187:}队长好分享 ，收藏   {:4_204:}

加林森 发表于 2022-3-23 23:25

大猫咪 发表于 2022-3-23 23:24
这歌真好听制作真漂亮队长好分享 ，收藏

谢谢猫猫支持！谢谢！

大猫咪 发表于 2022-3-23 23:26

加林森 发表于 2022-3-23 23:25
谢谢猫猫支持！谢谢！

{:4_179:} 不客气队长

加林森 发表于 2022-3-23 23:30

大猫咪 发表于 2022-3-23 23:26
不客气队长

好的好的

红影 发表于 2022-3-24 09:50

加林森 发表于 2022-3-23 20:12
我修改的效果

这把火烧得厉害{:4_173:}

加林森 发表于 2022-3-24 11:40

红影 发表于 2022-3-24 09:50
这把火烧得厉害

就是，好像还在冒浓烟呢。{:4_189:}

红影 发表于 2022-3-24 20:31

加林森 发表于 2022-3-24 11:40
就是，好像还在冒浓烟呢。

队长真会玩{:4_173:}

加林森 发表于 2022-3-24 20:38

红影 发表于 2022-3-24 20:31
队长真会玩

我就添加了一个代码，现在就这么厉害了。{:5_117:}

红影 发表于 2022-3-24 21:27

加林森 发表于 2022-3-24 20:38
我就添加了一个代码，现在就这么厉害了。

自己修改一下也是挺好玩的呢{:4_173:}

加林森 发表于 2022-3-24 21:30

红影 发表于 2022-3-24 21:27
自己修改一下也是挺好玩的呢

老黑提示我的，现在感觉到要完全融合进去不容易了，背景底色深，我就让它融合到一块去。

绿叶清舟 发表于 2022-3-24 21:32

这火烧得真旺啊{:4_199:}

加林森 发表于 2022-3-24 21:37

绿叶清舟 发表于 2022-3-24 21:32
这火烧得真旺啊

就是就是，这个是老黑的功劳，我只是制作出来看效果的。谢谢清舟！{:4_190:}

绿叶清舟 发表于 2022-3-24 21:39

加林森 发表于 2022-3-24 21:37
就是就是，这个是老黑的功劳，我只是制作出来看效果的。谢谢清舟！

效果很好了，队长不客气

加林森 发表于 2022-3-24 21:47

绿叶清舟 发表于 2022-3-24 21:39
效果很好了，队长不客气

嗯嗯。喝茶：{:4_190:}

红影 发表于 2022-3-24 22:09

加林森 发表于 2022-3-24 21:30
老黑提示我的，现在感觉到要完全融合进去不容易了，背景底色深，我就让它融合到一块去。

是啊，融合之后有意想不到的效果呢。

加林森 发表于 2022-3-24 22:19

红影 发表于 2022-3-24 22:09
是啊，融合之后有意想不到的效果呢。

就是，每天都有惊喜的。{:4_189:}

红影 发表于 2022-3-24 23:03

加林森 发表于 2022-3-24 22:19
就是，每天都有惊喜的。

惊喜不断{:4_173:}

加林森 发表于 2022-3-24 23:19

红影 发表于 2022-3-24 23:03
惊喜不断

嗯嗯，就是的。
页: 1 [2]
查看完整版本: 《焚情》 - 黄凯芹 （学习黑黑的文字效果）