三月的阳光 发表于 2022-2-8 14:24

没有你的城市在哪里都一样

本帖最后由 三月的阳光 于 2022-2-8 14:27 编辑 <br /><br />
<style type="text/css">
.paBox { /* 父框 */
      margin: 10px auto;
      width: 1024px;
      height: 640px;
      position: relative;
                background: #000 url('http://image.hnol.net/c/2022-02/08/14/202202081419394441-2813635.gif') no-repeat;
      left: -200px;
      top: 100px
}
/* 父框和 .soBox 的伪元素共同样式 */
.paBox::before, .paBox::after, .soBox::before, .soBox::after {
      content: "";
      position: absolute;
      width: 500px; height: 2px;
      background: silver;
      left: 300px; top: 150px;
      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:580px; top:520px; color: #e12325;"><marquee scrollamount="2" direction="left"><font face="微软雅黑"><font size="4">没有你的城市在哪里都一样编辑/三月的阳光</font></font></marquee></p>
      <!-- 按钮 -->
<div id="roBox" class="roBox40" style="left:55%;top:80%;">●</div>
</div>

<audio id="ymusic" src="http://image.hnol.net/c/swf/2022-02/08/13/202202081319248851-2813635.swf" 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-8 14:44

作词 : 小闯作曲 : 小闯没有你的城市在哪里都一样睁开眼看日出转过身看日落没有你的日子谁在身边有什么不同再也找不到一首歌可以单曲重复没有你的城市在哪里都一样走在没有表情的陌生的大街小巷没有你的日子我只是一副行走的皮囊再没人对我说晚安没人催我吃饭游走在空旷的房间找不到休息的终点醒不来的魂绕梦牵只能和孤单说声晚安没有你的城市在哪里都一样坐在戒掉的咖啡馆嘴角微微上扬去台湾慢慢的感受流失的时间骑着单车你坐在后边没有你的城市去哪里有什么意义如果不能在一起我去哪里我并不关心在成都的机场还是宽窄巷一个人这场戏该怎么收场没有你的城市在哪里都一样

红影 发表于 2022-2-8 16:04

这个还有花潮的图标呢，阳光哥哥真棒的制作，滚动字正好走到了按钮后面，调得真好{:4_187:}

红影 发表于 2022-2-8 16:05

那些闪光棒仿佛大楼的灯光，漂亮的制作{:4_199:}

加林森 发表于 2022-2-8 16:19

兄弟制作得太漂亮了。赞！{:4_199:}

三月的阳光 发表于 2022-2-8 16:33

红影 发表于 2022-2-8 16:04
这个还有花潮的图标呢，阳光哥哥真棒的制作，滚动字正好走到了按钮后面，调得真好

还是影子妹妹厉害，一点一线之间看得清清楚楚，逃不过妹妹慧眼~~{:5_116:}{:4_204:}

三月的阳光 发表于 2022-2-8 16:34

红影 发表于 2022-2-8 16:05
那些闪光棒仿佛大楼的灯光，漂亮的制作

影子妹妹很有大局眼光~~{:5_116:}{:4_187:}

三月的阳光 发表于 2022-2-8 16:35

加林森 发表于 2022-2-8 16:19
兄弟制作得太漂亮了。赞！

都是老黑的代码好，应该感谢老黑老师~~{:4_190:}{:4_199:}

加林森 发表于 2022-2-8 16:44

三月的阳光 发表于 2022-2-8 16:35
都是老黑的代码好，应该感谢老黑老师~~

就是就是，老黑的定位系统很重要的。

大猫咪 发表于 2022-2-8 19:35

阳光兄制作真漂亮，特别喜欢这歌，画面融合的真棒！ 入景，入心，。。

{:4_204:}{:4_199:}

红影 发表于 2022-2-8 20:10

三月的阳光 发表于 2022-2-8 16:33
还是影子妹妹厉害，一点一线之间看得清清楚楚，逃不过妹妹慧眼~~

主要是看到花潮图标特别激动，阳光哥哥有心了，还弄个这样的图片{:4_187:}

红影 发表于 2022-2-8 20:12

三月的阳光 发表于 2022-2-8 16:34
影子妹妹很有大局眼光~~

这首歌有点忧伤的，阳光哥哥的制图很符合歌曲含义{:4_187:}

加林森 发表于 2022-2-10 12:27

{:4_178:}
页: [1]
查看完整版本: 没有你的城市在哪里都一样