起个网名好难 发表于 2024-8-20 10:59

金秋

<meta name="referrer" content="never" />
<style>
#oBlk        {
        --w:720px;--h:810px;
        width:var(--w);height:var(--h);
        position:relative;overflow:hidden;
        margin:auto;border-radius:32px;
        box-shadow:3px 3px 10px black;
        text-align:center;
}
.pic        {width:var(--w);height:var(--h);float:left;animation: inout 10s ease-in-out infinite;}
#picblk        {width:calc(9 * var(--w));height:var(--h);position:absolute;left:0px;top:0px;animation: mleft 90s steps(9) infinite;}

#vid {
        position: absolute;
        width: var(--w);
        height: var(--h);
        top:0px;left:0px;
        object-fit: cover;
        -webkit-mask: linear-gradient(180deg, transparent 67%, red);
}
@keyframes        mleft        {to {left:calc(-9 * var(--w));}}
@keyframes        inout        {
        0%                        {opacity: 0.4;}
        20%,85%                {opacity:1.0;}
        100%                {opacity:0.4;}
}
        #splay        {width:80px;height:80px;position:absolute; right:30px;bottom:20px;overflow:hidden;border-radius:50%;box-shadow: inset 0 0 30px gray;
                background:url(http://p1.music.126.net/4nYDyL2lFpgJHmPJKk23aQ==/109951169485176740.jpg) no-repeat center/cover;
                animation:rot 8s linear infinite ;}
        @keyframes        rot {to {transform:rotate(360deg);}}
#jqte        {font:bold 30px sans-serif; color:transparent;background-image: url(https://z4a.net/images/2024/01/14/auewj-fb7cv.jpg);background-clip: text;mix-blend-mode:lighten;;margin-top:32px;display:inline-block;}
</style>

<div id="oBlk">
        <div id="picblk">
                <img src="https://mmbiz.qpic.cn/mmbiz_jpg/ibibuLB7CkpwRZUhKw0V7vZuoZibaQ3jhQqHNubelv7WWr8CdRjkaA8SroAUuJWgqjj6bOhicIKg8InpjITE6VtjZA/640" class="pic" />
                <img src="https://mmbiz.qpic.cn/mmbiz_jpg/ibibuLB7CkpwRZUhKw0V7vZuoZibaQ3jhQqHYiaHt0Au4cqzK7svV3STh8riarqPYVAI5Jzqv1pQ1wYHc1qx2nfXJLg/640" class="pic" />
                <img src="https://mmbiz.qpic.cn/mmbiz_jpg/ibibuLB7CkpwRZUhKw0V7vZuoZibaQ3jhQq5CrIiaKDM5pVVs4a7VtbUibSjRgIcK8FMCg3DGXCufn7ialaMgcxCeEGQ/640" class="pic" />
                <img src="https://mmbiz.qpic.cn/mmbiz_jpg/ibibuLB7CkpwRZUhKw0V7vZuoZibaQ3jhQqhG9fDTdwz86qo4ncPPRHuX7NGW1XibTnuZeMmOThR7JO8ia5HmFuqcRw/640" class="pic" />
                <img src="https://mmbiz.qpic.cn/mmbiz_jpg/ibibuLB7CkpwRZUhKw0V7vZuoZibaQ3jhQqx0qgysuibqdxL9Ahaaff6IWTmYta61pI3JQJicibXu4lxzdM9qCL03Jdg/640" class="pic" />
                <img src="https://mmbiz.qpic.cn/mmbiz_jpg/ibibuLB7CkpwRZUhKw0V7vZuoZibaQ3jhQqH14x4BQOQPRibb2lzUeJUJGVE3xUFs9dMLexucticH2QM2W3NDibVDdLQ/640" class="pic" />
                <img src="https://mmbiz.qpic.cn/mmbiz_jpg/ibibuLB7CkpwRZUhKw0V7vZuoZibaQ3jhQqJt3XTjHSOcy9TnrYO7W5L4VOEl9eRMqx4na3HQibF8kr2yRqUrbVwkw/640" class="pic" />
                <img src="https://mmbiz.qpic.cn/mmbiz_jpg/ibibuLB7CkpwRZUhKw0V7vZuoZibaQ3jhQqeEP5lFOyl3xUf7eiaFGibS8lqF4SwJZeic706HLlPGDlo7NjBu0Yr7jBg/640" class="pic" />
                <img src="https://mmbiz.qpic.cn/mmbiz_jpg/ibibuLB7CkpwRZUhKw0V7vZuoZibaQ3jhQqR9puMfX9QrCWCXaVd5R0FC8rhFHoH4AaNwkJhx6PQEsutSaXB5ysJg/640" class="pic" />
        </div>
        <video id="vid" src="https://img.tukuppt.com/video_show/2432605/00/01/96/5b4f838b05080.mp4" autoplay loop muted></video>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2074517224" loop autoplay ></audio>
        <div id="splay"></div>
        <div id="jqte">金秋</div>
</div>

<script>
{
        let pics = picblk.querySelectorAll('.pic');
        splay.onclick = () => {
                aud.paused ? (aud.play(), vid.play(), picblk.style.animationPlayState='running', splay.style.animationPlayState = 'running',pics.forEach(ele => ele.style.animationPlayState = 'running')) :
                                       (aud.pause(), vid.pause(), picblk.style.animationPlayState='paused', splay.style.animationPlayState = 'paused', pics.forEach(ele => ele.style.animationPlayState = 'paused'));
        }
}
</script>

彩云归 发表于 2024-8-20 11:25

谢谢分享！

醉美水芙蓉 发表于 2024-8-20 11:34

梦江南 发表于 2024-8-20 11:37

老师的金秋音画真漂亮！这帖也看到了。{:4_187:}

梦江南 发表于 2024-8-20 11:40

这么多图片做起来很麻烦的。老师耐心。{:4_204:}

起个网名好难 发表于 2024-8-20 11:41

彩云归 发表于 2024-8-20 11:25
谢谢分享！

https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif

起个网名好难 发表于 2024-8-20 11:42

醉美水芙蓉 发表于 2024-8-20 11:34
老师这个景色真漂亮！

https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif

起个网名好难 发表于 2024-8-20 11:42

梦江南 发表于 2024-8-20 11:37
老师的金秋音画真漂亮！这帖也看到了。

https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif

起个网名好难 发表于 2024-8-20 11:44

梦江南 发表于 2024-8-20 11:40
这么多图片做起来很麻烦的。老师耐心。

一类的东西统一处理并不麻烦。

梦江南 发表于 2024-8-20 11:51

这动态水很赞。

起个网名好难 发表于 2024-8-20 12:12

梦江南 发表于 2024-8-20 11:51
这动态水很赞。

就是您用在“海边的女孩”里的视频。

四海八荒 发表于 2024-8-20 12:41

很美的秋水

起个网名好难 发表于 2024-8-20 12:49

四海八荒 发表于 2024-8-20 12:41
很美的秋水

https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif

梦江南 发表于 2024-8-20 13:41

起个网名好难 发表于 2024-8-20 12:12
就是您用在“海边的女孩”里的视频。

用在这里下正合适。增加了灵动感。

起个网名好难 发表于 2024-8-20 14:42

梦江南 发表于 2024-8-20 13:41
用在这里下正合适。增加了灵动感。

是的， 光是几张图片切换没多大意思。

老谟深虑 发表于 2024-8-20 19:07

            金色的秋天，很美。欣赏点赞！

起个网名好难 发表于 2024-8-20 19:31

老谟深虑 发表于 2024-8-20 19:07
金色的秋天，很美。欣赏点赞！

https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif

红影 发表于 2024-8-20 22:31

令人赏心悦目的美丽秋景，每一片都有天鹅呢，还有水波视频。真美啊{:4_187:}

红影 发表于 2024-8-20 22:31

欣赏难难好帖{:4_199:}

小辣椒 发表于 2024-8-20 23:13

难难不得不说你的视觉欣赏水平杠杠的，这些图配上那个水动视频，效果绝了{:4_178:}
页: [1] 2
查看完整版本: 金秋