小辣椒 发表于 2022-2-6 16:13

你的泪会说谎--- 交作业

<style type="text/css">
.paBox { /* 父框 */
      margin: 10px auto;
      width: 1388px;
      height: 700px;
      position: relative;
      background: #000 url('https://wj.zp68.com/lxx/tup/01296IF.gif') no-repeat;
      left: -390px;
      top: 150px
}
/* 父框和 .soBox 的伪元素共同样式 */
.paBox::before, .paBox::after, .soBox::before, .soBox::after {
      content: "";
      position: absolute;
      width: 600px; height: 2px;
      background: silver;
      left: 170px; top: 120px;
      opacity: 0.1;
      transform-origin: center center;
}
/* 父框和 .soBox 的伪元素各自的动画样式 */
.paBox::before { animation: fly 2s linear infinite alternate;}
.paBox::after { height: 4px; animation: fly 5s linear infinite;}
.soBox::before { animation: fly 3s linear infinite;}
.soBox::after { height: 5px; animation: fly 1s linear infinite alternate;}

@keyframes fly { 100% { transform: rotate(360deg); } }
/*旋转按钮*/
.roBox40 {
      margin: 10px;
      position: relative;
      width: 40px; height: 40px;
      line-height: 40px; font-size: 14px;
      background: linear-gradient(Teal,gray,red);
      outline:none;
      color: white;
      border-radius: 50%;
      text-align: center;
      box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.25);
      cursor: pointer;
      animation: rol linear 2s infinite;
}
.roBox40:hover { opacity: 0.8; }
.roBox40:active { opacity: 1; }
@keyframes rol { to { transform:rotate(360deg); } }
</style>

<div class="paBox">
      <div class="soBox"></div>
      <p style="position: absolute; left:650px; top:600px; color: #CCC;"><marqueescrollamount="2" direction="left" ><font face="微软雅黑"><font size="3">一首稍带小悲伤的歌曲向岁月学习也是煽情一下</font></marquee></p>
      <!-- 按钮 -->
      <div id="roBox" class="roBox40" style="left:80%;top:82%;">●</div>
</div>

<audio id="ymusic" src="https://wj.zp68.com/lxx//yy/ndylhsh.mp3" autoplay="autoplay" loop="loop"></audio>

<script language="javascript">
var mu = document.getElementById('ymusic');      
var roBtn = document.getElementById('roBox');
mu.autoplay ? roBtn.style.animationPlayState="running" : roBtn.style.animationPlayState="paused";
mu.addEventListener("ended", function(){ roBtn.style.animationPlayState="paused"; })
roBtn.onclick = function(){ mu.paused ? (mu.play(), roBtn.style.animationPlayState="running") : (mu.pause(), roBtn.style.animationPlayState="paused"); }
</script>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>

小辣椒 发表于 2022-2-6 16:14

黑黑 看看我有没有混其他代码进去@马黑黑

小辣椒 发表于 2022-2-6 16:16

谢谢岁月的粒子效果，我这次用在我的作业里面了@走过岁月


岁月的烙印 TO：小辣椒
https://www.huachaowang.com/foru ... =56511&fromuid=4275
(出处: 花潮论坛)

小辣椒 发表于 2022-2-6 16:17

岁月的艾特怎么没有出来@走过岁月

小辣椒 发表于 2022-2-6 16:32

因为我的图片大我加大了播放器转盘的尺寸

四海八荒 发表于 2022-2-6 16:39

如梦如幻

加林森 发表于 2022-2-6 16:47

制作得真漂亮，所有的东西都用上了，真好。{:4_187:}

四海八荒 发表于 2022-2-6 18:23

乍一听音乐前奏以为是胡广生

红影 发表于 2022-2-6 19:33

好漂亮的制作，亲爱的厉害，把那么多元素都用上了{:4_187:}

马黑黑 发表于 2022-2-6 20:30

我流的是假泪吗{:5_117:}

马黑黑 发表于 2022-2-6 20:35

小辣椒 发表于 2022-2-6 16:14
黑黑 看看我有没有混其他代码进去@马黑黑

效果好就行{:5_106:}

马黑黑 发表于 2022-2-6 20:35

小辣椒 发表于 2022-2-6 16:32
因为我的图片大我加大了播放器转盘的尺寸

这个是再创作

樵歌 发表于 2022-2-7 20:10

哇，小辣椒太厉害了，整个图图上的元素都动起来了，那月亮还有光晕。

小辣椒 发表于 2022-2-8 20:44

四海八荒 发表于 2022-2-6 16:39
如梦如幻

八荒晚上好{:4_187:}

小辣椒 发表于 2022-2-8 20:45

加林森 发表于 2022-2-6 16:47
制作得真漂亮，所有的东西都用上了，真好。

谢谢队长欣赏，小辣椒也是在学习中{:4_187:}

小辣椒 发表于 2022-2-8 20:46

四海八荒 发表于 2022-2-6 18:23
乍一听音乐前奏以为是胡广生

八荒这首歌熟？

小辣椒 发表于 2022-2-8 20:46

红影 发表于 2022-2-6 19:33
好漂亮的制作，亲爱的厉害，把那么多元素都用上了

亲爱的，我也是瞎捣鼓的{:4_171:}

小辣椒 发表于 2022-2-8 20:47

马黑黑 发表于 2022-2-6 20:30
我流的是假泪吗

希望不要流泪{:4_189:}

小辣椒 发表于 2022-2-8 20:48

马黑黑 发表于 2022-2-6 20:35
效果好就行

就是想效果出来漂亮，但越想越做不好{:4_170:}

小辣椒 发表于 2022-2-8 20:50

马黑黑 发表于 2022-2-6 20:35
这个是再创作

黑黑，手机几次想问你，打字嫌累，我这个转盘改大了后换了颜色，但发现色码字符长的效果不出来，这个是为什么呢？
页: [1] 2 3
查看完整版本: 你的泪会说谎--- 交作业