红影 发表于 2022-3-27 20:29

故乡的原风景 TO黑黑 （学习彩球）

<style type="text/css">
/* 帖子容器 */
#tzDiv {
      position: relative;
      left: -304px;
      width: 1200px;
      height: 660px;
      top: 80px;
      background: #eee url('https://pic.imgdb.cn/item/624014a527f86abb2a40a074.jpg') no-repeat center/cover;
      opacity: 0.95;
      box-shadow: 4px 4px 5px #888;border-radius:12px;
}
/* 音乐控制按钮 */
.picBtn {
       position: absolute;
       width: 127px;
       height: 150px;
       left: 450px;
       top: 200px;
       border: none;
       outline: none;
       border-radius: 8px;
       background: transparent url('https://pic.imgdb.cn/item/6240263827f86abb2aab60f0.gif') no-repeat;
       cursor: pointer;
}
body { overflow-x: hidden; } /*禁用横向滚动条 */
#baiBox {
      margin: auto;
      width: 360px;
      text-align: center;
      font-size: 3rem;
      font-weight: bold;
      color: #A7F394;
      transform-origin: top;
      animation: yao 0.8s linear infinite alternate;
}

@keyframes yao {
      from{transform: perspective(800px) rotatex(30deg); }
      to { transform: perspective(800px) rotatex(-30deg); }
}
/* 动图定位 */
.dongtu {
      position: absolute;
      width: 312px;
      height: 224px;      
      left: 580px;
      top: 250px;
      
}
/* 走马灯父框 */
.txtFly {
      position: absolute;
      width: 260px;
      height: 230px;
      left: 120px;
      top: 312px;
      overflow: hidden;
}
/* 走马灯文本 */
.txtFly div {
      position: absolute;
      left: 260px;
      font: normal 18px /20px Sans-Serif;
      word-break: keep-all;
      white-space:nowrap;
}
.myBall2 {
   margin: 10px auto 0;
   width: 418px;
   height: 418px;
   border-radius: 50%;
   opacity: .7;
   position: absolute;
   left: 176px;
   top:157px;
   background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
   animation: turn 2s linear infinite;
}
@keyframes turn {
   to { transform: rotate(-1turn); }
}
</style>

<div id="tzDiv">
      <div id="baiBox" style="position: absolute; left:660px; top: 100px; ">故乡的原风景</div>
<div class="myBall2"></div>
      <div class="dongtu">
      <img alt="" src="https://pic.imgdb.cn/item/62404cdf27f86abb2a782902.gif"/>
      <div class="txtFly">
                <div id="ziFly">也许每个人心中都有一个自己独一无二的故乡，所以才会对此曲有着不同意义的解读和感悟。在每一个夜深人静的夜晚，总会想起儿时的故乡，春日里故乡的小溪边，成群结队的羊群，踏着溪边的青草，咩咩细语的低吟。人生纵使华丽辉煌，也不过是沧海一粟，过眼云烟，争名逐利，蝇营狗苟求得一世浮屠，奈何，抵不过，晚风来急，独自凄凉。曲子让往事在眼前浮现，静静思考人生到底该何去何从。</div></div>
      
      <button id="picBtn" class="picBtn"></button>
      <audio id="music" src="http://music.163.com/song/media/outer/url?id=864354765.mp3" loop="loop" autoplay="autoplay" ></audio>
</div><br><br><br><br><br>

<script language="javascript">

fly();
var mu = document.getElementById('music');
var btn = document.getElementById('picBtn');
btn.onclick = function(){
      mu.paused ? (mu.play(), btn.style.background="url('https://pic.imgdb.cn/item/6240263827f86abb2aab60f0.gif')") : (mu.pause(), btn.style.background="url('https://pic.imgdb.cn/item/6240261d27f86abb2aaacaf3.png')");
}
mu.addEventListener("ended", function(){
      btn.style.background="url('https://pic.imgdb.cn/item/6240261d27f86abb2aaacaf3.png')";
});
//创建走马灯
function fly() {
      var ziFly = document.getElementById('ziFly');
      var width = ziFly.clientWidth;
      var style = document.createElement('style');
      style.type = 'text/css';
      var flyStr = '@keyframes fly {to { left: -' + width + 'px; } }';
      style.innerHTML = flyStr;
      ziFly.appendChild(style);
      ziFly.style.animation = 'fly 40s linear infinite';
}
setInterval(function() {
   let c1 = `#${Math.random().toString(16).substr(-6)}`;
   let c2 = `#${Math.random().toString(16).substr(-6)}`;
   document.querySelector('.myBall2').style.background = `linear-gradient(120deg, ${c1} 0%, ${c2} 100%)`;
}, 2000);
</script>
<br><br><br><br><br><br><br><br><br><br><br><br><br>

红影 发表于 2022-3-27 20:30

感谢黑黑送我的彩球，简单做个，回赠黑黑一个彩球@马黑黑{:4_187:}

红影 发表于 2022-3-27 20:31

发现发到论坛比在本地测试还好看，黑黑的彩球真是太美了{:4_173:}

千羽 发表于 2022-3-27 20:46

影子学习的真快，很美的变色彩球{:4_187:}

千羽 发表于 2022-3-27 20:47

音乐也是很喜欢的，{:4_205:}

大猫咪 发表于 2022-3-27 20:53

红影这个创意真棒，{:4_187:} 让旋律更有味道了，赞！！！！！！！！！

{:4_187:}{:4_190:}

加林森 发表于 2022-3-27 21:14

世界名曲，真好听。红影制作得真漂亮，这个速度好快啊，就制作出来了。{:4_199:}{:4_204:}

马黑黑 发表于 2022-3-27 22:15

这个彩球有料，无价之宝啊

马黑黑 发表于 2022-3-27 22:34

2d的圆形，3d的效果，人眼也太容易受骗了{:4_170:}

红影 发表于 2022-3-27 22:57

千羽 发表于 2022-3-27 20:46
影子学习的真快，很美的变色彩球

谢谢羽儿，这个变幻的彩球特别漂亮，羽儿也一起做啊{:4_187:}

红影 发表于 2022-3-27 22:58

千羽 发表于 2022-3-27 20:47
音乐也是很喜欢的，

陶笛曲子，还是挺好听的、

红影 发表于 2022-3-27 22:58

大猫咪 发表于 2022-3-27 20:53
红影这个创意真棒， 让旋律更有味道了，赞！！！！！！！！！

这个彩球太美了，猫猫也一起做{:4_187:}

红影 发表于 2022-3-27 22:59

加林森 发表于 2022-3-27 21:14
世界名曲，真好听。红影制作得真漂亮，这个速度好快啊，就制作出来了。

黑黑送我礼物那会就想着怎么去做了，也不算快的{:4_173:}

红影 发表于 2022-3-27 23:00

马黑黑 发表于 2022-3-27 22:15
这个彩球有料，无价之宝啊

是黑黑带来的惊喜呢，越看越觉得漂亮{:4_187:}

加林森 发表于 2022-3-27 23:01

红影 发表于 2022-3-27 22:59
黑黑送我礼物那会就想着怎么去做了，也不算快的

嗯嗯。

红影 发表于 2022-3-27 23:02

马黑黑 发表于 2022-3-27 22:34
2d的圆形，3d的效果，人眼也太容易受骗了

黑黑加的转动漂亮，比单纯变色更好看，让这彩球像有了生命一样{:4_187:}

马黑黑 发表于 2022-3-27 23:35

红影 发表于 2022-3-27 23:00
是黑黑带来的惊喜呢，越看越觉得漂亮

{:5_106:}

樵歌 发表于 2022-3-28 10:37

师妹活学活用哇。这个好漂亮。能把这个做个月亮多好。{:4_173:}

红影 发表于 2022-3-28 11:04

加林森 发表于 2022-3-27 23:01
嗯嗯。

队长也一起做彩球啊。{:4_187:}

红影 发表于 2022-3-28 11:05

马黑黑 发表于 2022-3-27 23:35


再次感谢黑黑的好礼{:4_187:}
页: [1] 2 3
查看完整版本: 故乡的原风景 TO黑黑 （学习彩球）