故梦 - 动画音画 - 花潮论坛 - Powered by Discuz! Archiver

马黑黑 发表于 2024-7-4 12:02

故梦

马黑黑 发表于 2024-7-4 12:02

帖子代码
<style>
#mydiv { --width: 1280px; margin: 30px 0 30px calc(50% - (var(--width) / 2 + 81px)); width: var(--width); height: 720px; background: radial-gradient(circle at 29% 55%, hsla(329,0%,99%,0.05) 0%, hsla(329,0%,99%,0.05) 4%,transparent 4%, transparent 44%,transparent 44%, transparent 100%),radial-gradient(circle at 85% 89%, hsla(329,0%,99%,0.05) 0%, hsla(329,0%,99%,0.05) 51%,transparent 51%, transparent 52%,transparent 52%, transparent 100%),radial-gradient(circle at 6% 90%, hsla(329,0%,99%,0.05) 0%, hsla(329,0%,99%,0.05) 53%,transparent 53%, transparent 64%,transparent 64%, transparent 100%),radial-gradient(circle at 35% 75%, hsla(329,0%,99%,0.05) 0%, hsla(329,0%,99%,0.05) 6%,transparent 6%, transparent 98%,transparent 98%, transparent 100%),radial-gradient(circle at 56% 75%, hsla(329,0%,99%,0.05) 0%, hsla(329,0%,99%,0.05) 16%,transparent 16%, transparent 23%,transparent 23%, transparent 100%),radial-gradient(circle at 42% 0%, hsla(329,0%,99%,0.05) 0%, hsla(329,0%,99%,0.05) 3%,transparent 3%, transparent 26%,transparent 26%, transparent 100%),radial-gradient(circle at 29% 28%, hsla(329,0%,99%,0.05) 0%, hsla(329,0%,99%,0.05) 51%,transparent 51%, transparent 75%,transparent 75%, transparent 100%),radial-gradient(circle at 77% 21%, hsla(329,0%,99%,0.05) 0%, hsla(329,0%,99%,0.05) 35%,transparent 35%, transparent 55%,transparent 55%, transparent 100%),radial-gradient(circle at 65% 91%, hsla(329,0%,99%,0.05) 0%, hsla(329,0%,99%,0.05) 46%,transparent 46%, transparent 76%,transparent 76%, transparent 100%),linear-gradient(45deg, rgb(83, 91, 235), rgb(76, 11, 174)); box-shadow: 2px 3px 6px #666; overflow: hidden; z-index: 1; position: relative; }
#player { position: absolute; left: calc(50% - 70px); top: 50px; width: 140px; filter: drop-shadow(0 0 20px white) hue-rotate(0deg); transition: width .75s; cursor: pointer; animation: rot 8s linear infinite var(--state), hue 30s linear infinite alternate var(--state); }
#player:hover { width: 150px; }
#vid { position: absolute; bottom: 0; width: 100%; height: calc(100% + 70px); object-fit: cover; mix-blend-mode: screen; pointer-events: none; }
#mydiv:fullscreen #vid { height: calc(100% + 100px); }
@keyframes rot { to { transform: rotate(360deg); } }
@keyframes hue { to { filter: drop-shadow(0 0 20px white) hue-rotate(360deg); } }
</style>

<div id="mydiv">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=29401808" autoplay loop></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/15653652/01/04/18/6141bee77d77a.mp4" muted autoplay loop></video>
<img id="player" alt="" src="https://638183.freep.cn/638183/t23/btn/snow.webp" titel="播放/暂停" />
</div>

<script>
var sF = document.createElement('script');
sF.src = 'https://638183.freep.cn/638183/web/api/fullscreen.js';
sF.charset = 'utf-8';
document.querySelector('body').appendChild(sF);
sF.onload = () => FS({
papa: '#mydiv',
css: 'bottom: 20px; left: 50%; transform: translate(-50%); --color: lightblue; --fsBg: transparent;',
});
var mState = () => {
player.style.setProperty('--state',['running','paused'][+aud.paused]);
player.title = ['暂停','播放'][+aud.paused];
aud.paused ? vid.pause() : vid.play();
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

马黑黑 发表于 2024-7-4 12:04

本帖新意主要是帖子背景的制作。这类背景，自己制作难度很大，不过网上会有很多免费的分享，可以找找。

南无月 发表于 2024-7-4 12:20

马黑黑发表于 2024-7-4 12:04
本帖新意主要是帖子背景的制作。这类背景，自己制作难度很大，不过网上会有很多免费的分享，可以找找。

我看不到背景怎么整。。
看代码量应该是画出来的。。复杂的线条绘制
{:4_170:}

马黑黑 发表于 2024-7-4 12:21

南无月发表于 2024-7-4 12:20
我看不到背景怎么整。。
看代码量应该是画出来的。。复杂的线条绘制

没有背景吗

南无月 发表于 2024-7-4 12:22

换了两三个浏览器都看不到，百分也没看到。。我哭{:4_198:}。。

南无月 发表于 2024-7-4 12:23

马黑黑发表于 2024-7-4 12:21
没有背景吗

对，只看到视频。。换了好几个浏览器。你截个图给我瞧瞧呗{:4_173:}

马黑黑 发表于 2024-7-4 12:25

南无月发表于 2024-7-4 12:23
对，只看到视频。。换了好几个浏览器。你截个图给我瞧瞧呗

你把视频拿掉看看能不能看到背景

南无月 发表于 2024-7-4 12:30

马黑黑发表于 2024-7-4 12:25
你把视频拿掉看看能不能看到背景

好的

南无月 发表于 2024-7-4 12:31

马黑黑发表于 2024-7-4 12:25
你把视频拿掉看看能不能看到背景

背景是一个动的线条图？由圆和椭圆组成的。

南无月 发表于 2024-7-4 12:32

马黑黑发表于 2024-7-4 12:25
你把视频拿掉看看能不能看到背景https://pic.imgdb.cn/item/66867ef9d9c307b7e9d05348.png
那进来就能看到呀。。{:4_170:}我的天诶。。。。

南无月 发表于 2024-7-4 12:46

我的错，
第一次见到这种代码写成的梦幻背景，浑然天成，高贵大气。。
太以假乱真了。。
真以为背景没出来。。
{:4_199:}{:4_173:}

南无月 发表于 2024-7-4 12:46

现在我想到电视剧里画画逼真到的连真人都当是真的是真的了。。{:4_170:}

马黑黑 发表于 2024-7-4 12:50

南无月发表于 2024-7-4 12:46
现在我想到电视剧里画画逼真到的连真人都当是真的是真的了。。

那么夸张

马黑黑 发表于 2024-7-4 12:50

南无月发表于 2024-7-4 12:46
我的错，
第一次见到这种代码写成的梦幻背景，浑然天成，高贵大气。。
太以假乱真了。。

{:4_196:}

马黑黑 发表于 2024-7-4 12:50

南无月发表于 2024-7-4 12:32
那进来就能看到呀。。我的天诶。。。。

{:4_172:}

南无月 发表于 2024-7-4 12:51

马黑黑发表于 2024-7-4 12:50
那么夸张

实例就在眼前，完全没有夸张
这种漂亮梦幻的背景图我在网上看到也是要存起来的。。
现在居然有代码写成。。
心里的震撼无法形容的。{:4_173:}

马黑黑 发表于 2024-7-4 12:52

南无月发表于 2024-7-4 12:51
实例就在眼前，完全没有夸张
这种漂亮梦幻的背景图我在网上看到也是要存起来的。。
现在居然有代码写成 ...

渐变背景组合有无限可能。此外，background-blend-mode若加持，梦幻效果更强大。

梦江南 发表于 2024-7-4 15:47

青紫色的上下线条向两边扩展，梦幻般的效果，震撼！{:4_199:}

南无月 发表于 2024-7-4 16:05

马黑黑发表于 2024-7-4 12:50

粉色小猪笑出一串粉红色的泡泡{:4_170:}

页: [1] 2 3 4 5

花潮论坛's Archiver

故梦