小白音画帖教程（完结） - 第26页 - 马黑黑教程专版 - 花潮论坛

马黑黑 发表于 2024-9-3 20:35

花飞飞发表于 2024-9-3 20:34
这个凭记忆整出来的，比一容易一丢丢

让这些小玩意成为自己的技能就是好事

马黑黑 发表于 2024-9-3 20:36

花飞飞发表于 2024-9-3 20:35
最大的感受就是两天不看就回生。。

那是一回生二回熟三回你是我我是你

花飞飞 发表于 2024-9-3 20:43

马黑黑发表于 2024-9-3 20:35
让这些小玩意成为自己的技能就是好事

关键它好用啊。。变个色，整个大小啥的。。好用的就受欢迎

花飞飞 发表于 2024-9-3 20:45

马黑黑发表于 2024-9-3 20:36
那是一回生二回熟三回你是我我是你

这得三步一回头的多瞧几眼{:4_170:}

马黑黑 发表于 2024-9-3 20:57

花飞飞发表于 2024-9-3 20:45
这得三步一回头的多瞧几眼

这个和敲三次黑板一样效果

马黑黑 发表于 2024-9-3 20:57

花飞飞发表于 2024-9-3 20:43
关键它好用啊。。变个色，整个大小啥的。。好用的就受欢迎

是的

花飞飞 发表于 2024-9-4 15:25

马黑黑发表于 2024-9-3 20:57
这个和敲三次黑板一样效果

敲黑板效果好，支持多敲敲。。{:4_173:}

花飞飞 发表于 2024-9-4 15:26

马黑黑发表于 2024-9-3 20:57
是的

{:4_181:}

马黑黑 发表于 2024-9-4 17:54

花飞飞发表于 2024-9-4 15:25
敲黑板效果好，支持多敲敲。。

三次合适了

花飞飞 发表于 2024-9-4 19:52

马黑黑发表于 2024-9-4 17:54
三次合适了

三次就三次，不多不少刚刚好。。我写个二十六讲的作业去。。

马黑黑 发表于 2024-9-4 20:39

花飞飞发表于 2024-9-4 19:52
三次就三次，不多不少刚刚好。。我写个二十六讲的作业去。。

{:4_190:}

花飞飞 发表于 2024-9-4 20:51

本帖最后由花飞飞于 2024-9-4 20:52 编辑 <style>
#mhh {
--state: running;
margin: 30px 0 30px calc(50% - 593px);
width: 1024px;
height: 640px;
background: url('https://642303.freep.cn/642303/tu/sadf.webp') no-repeat center/cover;
border: 1px solid gray;
pointer-events: none;
overflow: hidden;
position: relative;
}
#mhh::before {
content: '';
position: absolute;
right: 430px;
top: 190px;
width: 130px;
height: 130px;
border-radius: 50%;
background: url('https://pic.imgdb.cn/item/66d85314d9c307b7e93e339b.png') no-repeat center/cover;
cursor: pointer;
pointer-events: auto;
animation: rot 6s linear infinite var(--state);
}
#mhh::after {
content: '';
position: absolute;
left: 100px;
top: 130px;
width: 100px;
height: 100px;
border-radius: 50%;
background: url('https://pic.imgdb.cn/item/66d8530dd9c307b7e93e2d40.png') no-repeat center/cover;
cursor: pointer;
pointer-events: auto;
animation: rot 6s linear infinite var(--state);
}
#vid1 {
position: absolute;
width: 640px;
height:640px;
left:220px;
- top:-500px;
opacity: .99;
object-fit: cover;
border-radius: 50%;
mix-blend-mode: screen;
pointer-events: none;
}
#vid2 {
position: absolute;
width: 100%;
height:100%;
opacity: .59;
object-fit: cover;
mix-blend-mode:lighten;
pointer-events: none;
transform: rotateX(180deg);
-webkit-mask: linear-gradient(to top, red 58%, transparent 63.5%,transparent 0 );
}
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="mhh" title="播放/暂停">
<video id="vid1" src="https://bpic.588ku.com/video_listen/588ku_preview/23/02/08/12/12/14/video63e3211ee939e.mp4" autoplay loop muted></video>
<video id="vid2" src="https://bpic.588ku.com/video_listen/588ku_preview/24/07/01/11/35/57/video6682241d43f12.mp4" autoplay loop muted></video>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=304937" autoplay loop></audio>
</div>

<script>

mState = () => {
mhh.style.setProperty('--state', aud.paused ? 'paused' : 'running');
mhh.title = ['暂停','播放'][+aud.paused];
aud.paused ? vid1.pause() : vid1.play();
aud.paused ? vid2.pause() : vid2.play();
};

aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
mhh.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

花飞飞 发表于 2024-9-4 20:53

花飞飞 发表于 2024-9-4 20:58

《小白音画教程》第二十六讲作业：
参照本讲最后一个示例，制作一个简单的帖子。
要求：
① 帖子有背景图、有视频，其中视频设置为圆形、不覆盖整个帖子；
② 用伪元素 ::before 和 ::after 做两个音频播放控制器，各自有自己的背景图案，点击任意一个都可以联动控制音乐、CSS动画和视频。

完成情况：
① 第一个视频用了圆形。。没有覆盖整个贴子，第二个视频用了全屏，星空遮罩一部分只显示天空。
②伪元素音频控制器，一个用了星球，另一个用了水样的花朵。均可控制音频动画和视频。

花飞飞 发表于 2024-9-4 20:59

{:4_170:}纯粹是重新学了一遍又做的。。

马黑黑 发表于 2024-9-4 21:11

花飞飞发表于 2024-9-4 20:59
纯粹是重新学了一遍又做的。。

{:4_203:}

花飞飞 发表于 2024-9-4 21:24

马黑黑发表于 2024-9-4 21:11

这流程没问题吧，先看教程再写作业。{:4_170:}

马黑黑 发表于 2024-9-4 21:28

花飞飞发表于 2024-9-4 21:24
这流程没问题吧，先看教程再写作业。

{:4_190:}

花飞飞 发表于 2024-9-4 21:29

马黑黑发表于 2024-9-4 21:28

咖啡时间到了。。

花飞飞 发表于 2024-9-4 21:29

{:4_173:}再回一贴翻个页

页: 16 17 18 19 20 21 22 23 24 25 [26] 27 28 29 30 31 32 33

花潮论坛's Archiver