论坛 › 欢乐水吧 › 是谁送你来到我身边（学习跳舞字）

红影 发表于 2022-3-31 12:30

是谁送你来到我身边（学习跳舞字）

<style>
.hy {
      position: relative;
      left: -304px;
      width: 1200px;
      height: 675px;
      top: 120px;
      overflow: hidden;
      background: #eee url('https://pic.imgdb.cn/item/62447b0327f86abb2ae5f1ba.jpg') no-repeat center/cover;
      opacity: 0.95;
      box-shadow: 4px 4px 5px #888;border-radius:12px;
}
/* 跳舞字 */
.dText {
   font: 56px / 56px Sans-serif;
   color: #ff9933;
   text-shadow: 2px 2px 4px #888;
   position: absolute;
   left: 90px;
   top: 172px;
   animation: dance 1s ease-in-out infinite;
}
@keyframes dance {
   to { font-weight: 900; font-style: italic; }
}
/* 文字走马灯 */
.txtFly {
      position: absolute;
      --w: 300px;
      width: var(--w);
      left: 450px;
      top: 586px;
      overflow: hidden;
}
.txtFly div {
       word-break: keep-all;
       white-space: nowrap;
       font: normal 22px /24px '楷体','微软雅黑';
       color:#ccff99; text-shadow: 0 0 2px #ff66ff;
       animation: fly 26s linear infinite;
}
/* 走马灯动画 */
@keyframes fly {
                from { transform: translateX(100%); }
                to { transform: translateX(calc(-340% - var(--w))); }
      }
/* 音乐控制按钮 */
.picBtn {
       position: absolute;
       width: 51px;
       height: 82px;
       left: 360px;
       top: 560px;
       border: none;
       outline: none;
       border-radius: 8px;
       background: transparent url('https://pic.imgdb.cn/item/6244887c27f86abb2a02b10e.gif') no-repeat;
       cursor: pointer;
}
/* 雪花 */
.snow {
      position: absolute;
      width: 15px;
      height: 15px;
      left: 0; top: 0;
      color: #eee;
      opacity: 0.5;
      animation: fly1 10s linear infinite, xie 10s linear infinite;
}
@keyframes fly1 {
      0% { opacity: 0.4; }
      50% { top: 50%; opacity: 0.6}
      70% { top: 70%; opacity: 0.2}
      100% { top: 80%; opacity: 0; }
}
@keyframes xie {
      100% { transform: translateX(var(--kk))rotate(360deg); }
}
</style>

<div id="hy" class="hy">
   <div class="dText"><p>小坏蛋!</p></div>
   <div class="txtFly" >
   <div>也许每只<span style="color: #EEEE11;">喵星人</span>都是拆家能手，被它找到一个卷筒纸，于是<span style="color: #EEEE11;">小坏蛋</span>在厅里下了一场<span style="color: #EEEE11;">纸屑雪</span>，飘飘荡荡，<span style="color: #EEEE11;">满地狼藉。</span>当它不来捣乱的时候就一定是在<span style="color: #EEEE11;">偷偷干坏事呢！</span></div></div>



      <button id="picBtn" class="picBtn"></button></div>
      <audio id="music" src="http://music.163.com/song/media/outer/url?id=1359460458.mp3" loop="loop"

autoplay="autoplay" ></audio>
<script language="javascript">

//按钮
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/6244887c27f86abb2a02b10e.gif')") :

(mu.pause(), btn.style.background="url('https://pic.imgdb.cn/item/6245191527f86abb2aaaa77a.png')");
}
mu.addEventListener("ended", function(){
      btn.style.background="url('https://pic.imgdb.cn/item/6245191527f86abb2aaaa77a.png')";
});

//雪花控制
function addsnow() {
      var o = document.getElementById('hy');
      for(i=0; i<200; i++) {
                var snow = document.createElement('span');
                var text = document.createTextNode('*');
                var fsize = Rnd(8,50);
                snow.appendChild(text);
                snow.style.setProperty('--kk', (Rnd(-300,300) + "px"));
                snow.className = "snow";
                snow.style.left = Rnd(80,1150) + "px";
                snow.style.top = Rnd(-80,-40) + "px";
                snow.style.fontSize = fsize + "px";
                snow.style.animationDelay = Rnd(0,10) + "s";
                snow.style.animation.duration = Rnd( 5,12) + "s";
                o.appendChild(snow);
      }
}

function Rnd(min, max){ return Math.floor(Math.random() * (max - min + 1) + min); }

addsnow();

</script>
<br><br><br><br><br><br><br><br><br><br><br>

红影 发表于 2022-3-31 12:33

学习黑黑的跳舞字，觉得那个效果特别有意思。还学了个黑黑原创的文字走马灯，可以不需要走马灯的js了，还能让文字变色。的那个人还有黑黑的那个*符号的雪花，这个符号的雪花之前没试验过。
谢谢黑黑的分享@马黑黑{:4_187:}

红影 发表于 2022-3-31 12:35

@友昕@绿叶清舟@大猫咪@加林森@小九
感谢你们对这只猫儿的关心和为它取名字。现在它有名字了，叫伽古。它是个淘气的小王子{:4_173:}

红影 发表于 2022-3-31 12:37

雪花我把i<666改成了200，纸屑的雪花少点就够了@马黑黑{:4_173:}

马黑黑 发表于 2022-3-31 12:48

这是高手所为了，点32个赞！

马黑黑 发表于 2022-3-31 12:49

猫咪能够识别屏幕中的自己或同类，它会有很有趣的表现

加林森 发表于 2022-3-31 12:58

红影的这个制作真漂亮，图中套图，制作得精美。{:4_204:}
小猫猫真会捣蛋的，挺好玩的。{:4_189:}

红影 发表于 2022-3-31 17:17

马黑黑 发表于 2022-3-31 12:48
这是高手所为了，点32个赞！

哪有，只不过是组合你教的那些啊{:4_173:}

红影 发表于 2022-3-31 17:18

马黑黑 发表于 2022-3-31 12:49
猫咪能够识别屏幕中的自己或同类，它会有很有趣的表现

那小东西破坏力无穷，不过也可爱到极点{:4_173:}

红影 发表于 2022-3-31 17:19

加林森 发表于 2022-3-31 12:58
红影的这个制作真漂亮，图中套图，制作得精美。
小猫猫真会捣蛋的，挺好玩的。

我记得把它干坏事的图图发到过群里的，一个不注意，我就能把那卷纸头弄得粉粉碎{:4_173:}

四海八荒 发表于 2022-3-31 17:21

我家香香也是喜欢玩卷纸，连抓带蹬，弄成一团才开心

四海八荒 发表于 2022-3-31 17:23

是影子的善良，把他送到你身边的

加林森 发表于 2022-3-31 17:31

红影 发表于 2022-3-31 17:19
我记得把它干坏事的图图发到过群里的，一个不注意，我就能把那卷纸头弄得粉粉碎

我原来喂个猫猫的，她喜欢玩毛线的。哈哈，都差不多的。{:4_189:}

上海朝阳 发表于 2022-3-31 18:44

宠猫啊，淘气猫，我儿媳也养一只波斯，我去的话，它只能呆在阳台的它的别墅里（三个平方），晚上我回家，它才自由，家里的沙发布都给它抓毛了，害得我现在都不敢躺在沙发上午休，觉得身上那儿都痒{:4_189:}

马黑黑 发表于 2022-3-31 18:55

红影 发表于 2022-3-31 17:18
那小东西破坏力无穷，不过也可爱到极点

{:4_181:}

马黑黑 发表于 2022-3-31 18:56

红影 发表于 2022-3-31 17:17
哪有，只不过是组合你教的那些啊

组合那么多的东东，脑子没绕晕就是高手

绿叶清舟 发表于 2022-3-31 19:07

猫本来就喜欢餐巾纸那个卷筒的会动它更爱了{:4_189:}谢谢影，这个真棒啊厉害了

加林森 发表于 2022-3-31 19:33

继续来欣赏

大猫咪 发表于 2022-3-31 20:46

幸运的小猫猫，看着幸福的样子真好！ 红影这制作真棒！ 赞！！！！！！！！！！！


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

马黑黑 发表于 2022-3-31 20:54

大猫咪 发表于 2022-3-31 20:46
幸运的小猫猫，看着幸福的样子真好！ 红影这制作真棒！ 赞！！！！！！！！！！！

你同类{:4_170:}

查看完整版本: 是谁送你来到我身边（学习跳舞字）