加林森 发表于 2022-8-3 16:39

《云山夜雨》- 巫娜（学习老黑‘春城孤鹤 ’制作）

本帖最后由 加林森 于 2022-8-4 23:39 编辑 <br /><br /><style>
#papa { left: -214px; width: 1024px; height: 600px; display: grid; place-items: center; background: gray url('https://s1.ax1x.com/2022/08/03/vVL0O0.jpg') no-repeat center/cover; box-shadow: 3px 3px 26px #000; position: relative; }
#papa div, #papa img, #papa span { position: absolute; }
#mama { width: 400px; height: 400px; left: calc(50% - 200px); top: calc(50% - 200px); background: radial-gradient(at 40% 30%, snow, transparent); border-radius: 50%; display: grid; place-items: center; }
#disc { right: calc(50% - 30px); top: calc(50% - 30px); width: 60px; height: 60px; background: conic-gradient(red,orange,yellow,green,teal,blue,purple); mask: radial-gradient(transparent 4px,red 0); -webkit-mask: radial-gradient(transparent 4px,red 0); border-radius: 50%; opacity: 0; cursor: pointer; animation: rot 2s linear infinite; }
#mpic { width: 300px; height: 211px; right: calc(50% - 150px); bottom: calc(50% - 105px); opacity: 0; }
#tit { font: bold 2em/2.4em sans-serif; color: #6795ac; text-shadow: 1px 1px 2px rgba(0,0,0,.75); opacity: 0; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
        <div id="disc"></div>
        <img id="mpic" src="https://s1.ax1x.com/2022/08/03/vZnnhQ.png" alt="" />
        <div id="mama"><span id="tit">巫娜 : 云山夜雨</span></div>
</div>

<script>

let idx = 0, aud = new Audio();
aud.src = 'https://music.163.com/song/media/outer/url?id=38679067.mp3';
aud.loop = true;
aud.autoplay = true;

disc.style.animationPlayState = aud.paused ? 'paused' : 'running';
let TT = setTimeout(change,3000);

disc.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing',()=> disc.style.animationPlayState = 'running');
aud.addEventListener('pause',()=> disc.style.animationPlayState = 'paused');

function change() {
        let aniAr = [
                ,
                ,
                ,
                ,
                ,
                ,
                ,
                ,
                ,
                ,
                ,
                ,
        ];
        let ele = aniAr;
        ele.style.transition = 'all 3s';
        ele.style.cssText += aniAr;
        idx ++;
        idx <= aniAr.length - 1 ? TT = setTimeout(change, 3000) : clearTimeout(TT);
}
</script>

加林森 发表于 2022-8-3 16:40

@马黑黑   学习动画制作，谢谢老黑了！

小辣椒 发表于 2022-8-3 17:24

队长学习做了一个{:4_199:}

加林森 发表于 2022-8-3 17:36

小辣椒 发表于 2022-8-3 17:24
队长学习做了一个

谢谢小辣椒鼓励！{:4_190:}

小辣椒 发表于 2022-8-3 17:38

加林森 发表于 2022-8-3 17:36
谢谢小辣椒鼓励！

队长客气了{:4_187:}

加林森 发表于 2022-8-3 17:45

小辣椒 发表于 2022-8-3 17:38
队长客气了

我是先找音乐，然后再去找图片的。

马黑黑 发表于 2022-8-3 18:07

仙女下凡。队长好制作。赞！

加林森 发表于 2022-8-3 18:24

马黑黑 发表于 2022-8-3 18:07
仙女下凡。队长好制作。赞！

这个思路不错的吧。嫦娥下凡了。

上海朝阳 发表于 2022-8-3 19:12

这好看，小仙女突然飞出下凡。咦？那荷花图中没看到技巧点呀

红影 发表于 2022-8-3 19:44

这个仙女的透明图很漂亮{:4_187:}

马黑黑 发表于 2022-8-3 19:56

加林森 发表于 2022-8-3 18:24
这个思路不错的吧。嫦娥下凡了。

不错的

加林森 发表于 2022-8-3 20:12

上海朝阳 发表于 2022-8-3 19:12
这好看，小仙女突然飞出下凡。咦？那荷花图中没看到技巧点呀

没有的嘛！

加林森 发表于 2022-8-3 20:14

红影 发表于 2022-8-3 19:44
这个仙女的透明图很漂亮

嗯嗯。我到老黑给的地址去扣图的。

加林森 发表于 2022-8-3 20:14

马黑黑 发表于 2022-8-3 19:56
不错的

谢谢啦！

红影 发表于 2022-8-4 16:26

加林森 发表于 2022-8-3 20:14
嗯嗯。我到老黑给的地址去扣图的。

那个地址扣图还是挺方便的。

加林森 发表于 2022-8-4 17:32

红影 发表于 2022-8-4 16:26
那个地址扣图还是挺方便的。

就是。也免了麻烦。

红影 发表于 2022-8-4 20:14

加林森 发表于 2022-8-4 17:32
就是。也免了麻烦。

我也喜欢用那个扣图。

加林森 发表于 2022-8-4 20:19

红影 发表于 2022-8-4 20:14
我也喜欢用那个扣图。

以后就用它了。
页: [1]
查看完整版本: 《云山夜雨》- 巫娜（学习老黑‘春城孤鹤 ’制作）