小辣椒 发表于 2022-5-19 21:37

同玩岁月光感效果--智取威虎山

<style type="text/css">

.mnBox {
      margin: auto;
      margin-top: 150px;
      position: relative;
      background: #333 url('https://wj.zp68.com/lxx/yunhua/2022/05/19/55F.gif') no-repeat center/cover;
      height: 746px;
      width: 1385px;
      left: -400px;
      border: 1px solid;
      box-shadow: 0px 0px 0px 2px Black;
}

.rain {
      width: 1px;
      height: 8px;
      top: -5px;
      left: 200px;
      background: #666;
      position: relative;
      display: block;
      animation: rain 0.5s linear infinite;
}

.rain::before, .rain::after{
      content: "";
      position: absolute;
      left: 10px;
      top: -120px;
      width: 1px;
      height: 10px;
      background: #eee;
}

.rain::after { height: 12px; left: -70px; top: 50px; }

.circle {
      position:absolute;
      width: 3px;
      height: 1px;
      left: 85px;
      top: 90%;
      background:none;
      border: 1px solid #FFF;
      border-radius: 50%;
      animation:circle 2s ease-out infinite;
}

@keyframes circle {
      0% { width:0; height:0; }
      50% { opacity:0.1; width:2%; height:2%; }
      60% { opacity:0.2; width:2%; height:2%; }
      100% { opacity:0; width:2%; height:2%; }
}

@keyframes rain {
      0% { opacity:0.5; }
      100% { opacity:0.5; top:40%;}
}
/* 旋转按钮*/
.btn-ro {
      position: absolute;
      left: 80px;
      top: 310px;
      width: 32px; height: 32px;
      line-height: 32px; font-size: 12px;
      background: linear-gradient(blue,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;
}

.btn-ro:hover { opacity: 0.8; }
.btn-ro:active { opacity: 1; }

@keyframes rol { to { transform:rotate(360deg); } }

</style>

<div id="mnBox" class="mnBox">
      <div style="color:#fff;margin:0px;padding:10px;font-size:5px;font-family:'微软雅黑';text-shadow:1px 1px 1px #000;">
                <p style="position: absolute; left:500px; top:650px; color: #b6d8d8;"><marqueescrollamount="3" direction="left" ><font face="微软雅黑" size="4">【智取威虎山】是岁月制作的光感效果 小辣椒捣鼓一个送给岁月 谢谢岁月的精彩分享 </font></marquee></p>
      </div>
      <div id="btn-ro" class="btn-ro">●</div>
</div>
<audio id="ymusic" src="https://wj.zp68.com/lxx/yunhua/2022/05/19/xueq.mp3" autoplay="autoplay" loop="loop"></audio>


<script language="javascript">


//按钮放后面
var mu = document.getElementById('ymusic');
var mbtn = document.getElementById('btn-ro');
mu.autoplay ? mbtn.style.animationPlayState="running" : mbtn.style.animationPlayState="paused";
mu.addEventListener("ended", function(){ mbtn.style.animationPlayState="paused"; })
mbtn.onclick = function(){ mu.paused ? (mu.play(), mbtn.style.animationPlayState="running") : (mu.pause(), mbtn.style.animationPlayState="paused"); }

</script>

<br><br><br><br><br><br><br><br><br><br>

小辣椒 发表于 2022-5-19 21:38

@走过岁月

沙发给你留着

小辣椒 发表于 2022-5-19 21:39

岁月，这个我做了后感觉界面太满了，H5播放器没有地方可以放，就加了黑黑的小转盘按钮，上去后感觉效果不错

红影 发表于 2022-5-19 21:51

这个灯光效果真好，在明暗闪烁中，小分队潜入了威虎山{:4_187:}

红影 发表于 2022-5-19 21:51

打虎上山，不过现在不让打虎了呢，成保护动物了{:4_173:}

绿叶清舟 发表于 2022-5-19 21:58

这个效果太漂亮了

醉美水芙蓉 发表于 2022-5-20 11:38

走过岁月 发表于 2022-5-20 13:06

小辣椒 发表于 2022-5-19 21:38
@走过岁月

沙发给你留着

坐沙发

走过岁月 发表于 2022-5-20 13:07

小辣椒 发表于 2022-5-19 21:39
岁月，这个我做了后感觉界面太满了，H5播放器没有地方可以放，就加了黑黑的小转盘按钮，上去后感觉效果不错

这个按钮也不错很好

走过岁月 发表于 2022-5-20 13:09

小辣椒总是运用的完美，赞

小辣椒 发表于 2022-5-20 13:15

红影 发表于 2022-5-19 21:51
这个灯光效果真好，在明暗闪烁中，小分队潜入了威虎山

{:4_172:}真的啊，那是效果出来了

小辣椒 发表于 2022-5-20 13:16

红影 发表于 2022-5-19 21:51
打虎上山，不过现在不让打虎了呢，成保护动物了

亲爱的，现在打的都是腐败的大老虎了{:4_189:}

小辣椒 发表于 2022-5-20 13:17

绿叶清舟 发表于 2022-5-19 21:58
这个效果太漂亮了

清舟好，这个是岁月的制作效果好的原因，小辣椒只是喜欢捣鼓一下玩玩{:4_173:}

小辣椒 发表于 2022-5-20 13:18

醉美水芙蓉 发表于 2022-5-20 11:38
辣椒美女制图好棒啊！

谢谢水芙蓉{:4_171:}

小辣椒 发表于 2022-5-20 13:18

走过岁月 发表于 2022-5-20 13:06
坐沙发

岁月来了{:4_187:}

小辣椒 发表于 2022-5-20 13:19

走过岁月 发表于 2022-5-20 13:07
这个按钮也不错很好

黑黑许多按钮都特别漂亮，而且不用上传直接用

小辣椒 发表于 2022-5-20 13:20

走过岁月 发表于 2022-5-20 13:09
小辣椒总是运用的完美，赞

谢谢岁月夸奖，主要是你的制作精美，小辣椒瞎捣鼓玩{:4_189:}

大猫咪 发表于 2022-5-20 20:58

辣椒制作真棒！ 象电影海报 ！ 打入威虎山，英雄多义胆！ 赞！

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

走过岁月 发表于 2022-5-21 21:16

小辣椒 发表于 2022-5-20 13:18
岁月来了

来了

冬天的雨 发表于 2022-5-21 21:24

这个音乐震撼，居然有智取威虎山的DJ音乐{:4_178:}
页: [1] 2
查看完整版本: 同玩岁月光感效果--智取威虎山