雨中悄然 发表于 2023-3-31 18:23

森林精灵（学习黑师腰带扣小小播效果）

<style>#papa { --state: paused; --delay: 0s; margin: auto; width: 512px; height:896px; background: url('https://img.soogif.com/50f40cb1be4e4069a531d2ad3f8b5d1d.gif') center/cover no-repeat; box-shadow: 3px 3px 20px #000; position: relative; }
#papa::before, #papa::after { position: absolute; content: url('https://638183.freep.cn/638183/t22/btn/star.png'); animation: flash 1s var(--delay) infinite alternate var(--state); }
#papa::after { right: 0; --delay: .5s; }
#mplayer { --play: 1; --pause: 0; --bd: snow; position: absolute; top: 290px; left: 240px; width: 30px; height: 30px; border-radius: 50%; transition: .7s; cursor: pointer; display: grid; place-items: center; }
#mplayer::before, #mplayer::after {position: absolute;content: '';border-style: solid;border-color: var(--bd);transition: .4s;}
#mplayer::before { width: 0; height: 0; left: 10px; border-width: 8px 10px; border-color: transparent transparent transparent var(--bd); opacity: var(--play); }
#mplayer::after { width: 2px; height: 12px; border-width: 0 4px 0 4px; opacity: var(--pause); }
#mplayer:hover { --bd: gold; }
@keyframes flash { from { opacity: 1; transform: rotate(-5deg); } to { opacity: 0; transform: rotate(5deg); } }</style>
<div id="papa">
        <div id="mplayer">
        </div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=27571238" loop="" autoplay=""></audio>
<script>let mState = () => aud.paused ? (mplayer.style.setProperty('--play', '1'), mplayer.style.setProperty('--pause', '0'), papa.style.setProperty('--state','paused')) : (mplayer.style.setProperty('--play', '0'),mplayer.style.setProperty('--pause', '1'),papa.style.setProperty('--state','running'));
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('play', mState,false);
aud.addEventListener('pause', mState,false);
</script>

雨中悄然 发表于 2023-3-31 18:25

@马黑黑 看看行不。试图把两个闪光点放耳环上，没成功。来不及试了，先发{:4_170:}

雨中悄然 发表于 2023-3-31 18:25

音乐要听完，真的好听

马黑黑 发表于 2023-3-31 19:25

雨中悄然 发表于 2023-3-31 18:25
@马黑黑 看看行不。试图把两个闪光点放耳环上，没成功。来不及试了，先发

现在的位置也不错的。

要放在指定的位置，可以用像素尺量一下位置，很容易的。请用“像素尺”做关键词搜索一下坛子，我介绍过的

小辣椒 发表于 2023-3-31 21:44

悄然这个图图威武的，杀气腾腾，也是可以说，美丽杀手的，后背有老虎做靠山{:4_170:}

小辣椒 发表于 2023-3-31 21:47

效果非常棒，添加的效果也是美，小播周围加了闪光四射，视觉有冲击感{:4_178:}

小辣椒 发表于 2023-3-31 21:48

所以选图选素材很重要，这点悄然往往就是把握的很好{:4_199:}

雨中悄然 发表于 2023-3-31 23:01

马黑黑 发表于 2023-3-31 19:25
现在的位置也不错的。

要放在指定的位置，可以用像素尺量一下位置，很容易的。请用“像素尺”做关键词 ...

行的。一会去搜瞧瞧。应该不难吧

雨中悄然 发表于 2023-3-31 23:01

小辣椒 发表于 2023-3-31 21:44
悄然这个图图威武的，杀气腾腾，也是可以说，美丽杀手的，后背有老虎做靠山

{:4_170:}找图的时候真就是顺手的。你这么一解说，挺杀的

雨中悄然 发表于 2023-3-31 23:02

小辣椒 发表于 2023-3-31 21:44
悄然这个图图威武的，杀气腾腾，也是可以说，美丽杀手的，后背有老虎做靠山

老虎厉害{:4_170:}传说中的什么假什么威

雨中悄然 发表于 2023-3-31 23:03

小辣椒 发表于 2023-3-31 21:47
效果非常棒，添加的效果也是美，小播周围加了闪光四射，视觉有冲击感

我喜欢看着贴子里有动来动去的成份{:4_170:}

雨中悄然 发表于 2023-3-31 23:03

小辣椒 发表于 2023-3-31 21:48
所以选图选素材很重要，这点悄然往往就是把握的很好

这些AI图的确挺漂亮

马黑黑 发表于 2023-3-31 23:13

雨中悄然 发表于 2023-3-31 23:01
行的。一会去搜瞧瞧。应该不难吧

量尺有什么难

雨中悄然 发表于 2023-3-31 23:15

马黑黑 发表于 2023-3-31 23:13
量尺有什么难

搜出个大老虎

马黑黑 发表于 2023-3-31 23:31

雨中悄然 发表于 2023-3-31 23:15
搜出个大老虎

{:4_170:}

小辣椒 发表于 2023-4-1 13:00

雨中悄然 发表于 2023-3-31 23:02
老虎厉害传说中的什么假什么威

{:4_173:}女人像老虎

小辣椒 发表于 2023-4-1 13:01

雨中悄然 发表于 2023-3-31 23:03
我喜欢看着贴子里有动来动去的成份

增加画面的灵动感，效果好

小辣椒 发表于 2023-4-1 13:02

雨中悄然 发表于 2023-3-31 23:01
找图的时候真就是顺手的。你这么一解说，挺杀的

{:4_172:}

也是特别威风凛凛的，不错

雨中悄然 发表于 2023-4-1 17:41

小辣椒 发表于 2023-4-1 13:02
也是特别威风凛凛的，不错

{:4_199:}好哒，小辣椒

雨中悄然 发表于 2023-4-1 17:42

小辣椒 发表于 2023-4-1 13:00
女人像老虎

仔细瞧瞧，眼神都挺酷的{:4_170:}
页: [1] 2 3 4
查看完整版本: 森林精灵（学习黑师腰带扣小小播效果）