TO---马黑黑

大猫咪 发表于 2022-3-28 19:42

本帖最后由大猫咪于 2022-3-28 20:35 编辑 <br /><br /><style type="text/css">
/* 底图及底图定位 */
#tzDiv {
   position: relative;
   left: -304px;
   width: 1200px;
   height: 660px;
   top: 80px;
   background: #eee url('https://pic.imgdb.cn/item/624166fd27f86abb2aced280.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;left:520px; top: 150px; width:400px;
   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: 600px;
top:97px;
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:560px; 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=28936521.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-28 20:19

猫厉害啊，这个创意太棒了。圈个美女TO马黑啊{:4_189:}

大猫咪 发表于 2022-3-28 20:25

绿叶清舟发表于 2022-3-28 20:19
猫厉害啊，这个创意太棒了。圈个美女TO马黑啊

嗯嗯在学习套用老黑代码{:4_204:}，红影技术加工指导 {:4_170:}让老黑黑今晚发呆一下{:5_117:}{:4_204:}

绿叶清舟 发表于 2022-3-28 20:26

大猫咪发表于 2022-3-28 20:25
嗯嗯在学习套用老黑代码，红影技术加工指导让老黑黑今晚发呆一下{:4 ...

呆得口水直流了{:4_189:}

小九发表于 2022-3-28 20:28

猫咪老壳反应快，学得也快，小九不得行，看到代码就迟钝{:4_187:}

大猫咪 发表于 2022-3-28 20:29

小九发表于 2022-3-28 20:28
猫咪老壳反应快，学得也快，小九不得行，看到代码就迟钝

不行不行{:4_189:}小九还在揣摩中 {:4_187:} 晚上好{:4_190:}

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

这个彩球用这里太魔幻了，猫猫好美的制作。黑黑收礼开心{:4_187:}

绿叶清舟 发表于 2022-3-28 20:57

@马黑黑

樵歌发表于 2022-3-28 21:39

猫咪太厉害了，把月亮中嫦娥给忽悠来TO黑了{:4_170:}

樵歌发表于 2022-3-28 21:40

竟然是越作创意越多了，真的好有意境。猫咪真棒{:4_199:}

大猫咪 发表于 2022-3-28 21:41

樵歌发表于 2022-3-28 21:39
猫咪太厉害了，把月亮中嫦娥给忽悠来TO黑了

哈哈让老黑亮起来樵哥哥 {:4_170:}晚上好{:4_179:}

千羽发表于 2022-3-28 21:41

创意和制作都挺好的，猫咪真棒{:4_187:}

大猫咪 发表于 2022-3-28 21:42

樵歌发表于 2022-3-28 21:40
竟然是越作创意越多了，真的好有意境。猫咪真棒

谢谢樵哥哥，是红影帮助制作指导的{:5_117:}猫头还是大{:5_106:}

大猫咪 发表于 2022-3-28 21:44

千羽发表于 2022-3-28 21:41
创意和制作都挺好的，猫咪真棒
谢谢千羽支持鼓励{:4_187:} 晚上好！猫还在学习，主要是红影指导的{:4_170:}

千羽发表于 2022-3-28 21:46

大猫咪发表于 2022-3-28 21:44
谢谢千羽支持鼓励晚上好！猫还在学习，主要是红影指导的

不客气哈，是挺好的{:4_181:}

大猫咪 发表于 2022-3-28 21:47

千羽发表于 2022-3-28 21:46
不客气哈，是挺好的

{:4_189:}嗯嗯继续鼓励{:4_187:}

马黑黑 发表于 2022-3-28 21:57

这个不就是传说中的丢进洞里的故事？

大猫咪 发表于 2022-3-28 22:02

马黑黑发表于 2022-3-28 21:57
这个不就是传说中的丢进洞里的故事？

望月怀人，帮老黑想想小芳{:4_170:}{:4_179:}

马黑黑 发表于 2022-3-28 22:03

大猫咪发表于 2022-3-28 22:02
望月怀人，帮老黑想想小芳

小芳早就是老芳了

大猫咪 发表于 2022-3-28 22:08

马黑黑发表于 2022-3-28 22:03
小芳早就是老芳了
{:4_189:}也该想想会心一笑 {:5_106:}

页: [1] 2

花潮论坛's Archiver

TO---马黑黑