论坛 › 欢乐水吧 › 翻个底朝天

马黑黑 发表于 2023-2-10 21:45

翻个底朝天

本帖最后由 马黑黑 于 2023-2-10 22:02 编辑 <br /><br /><style>
#pabox {
        margin: auto;
        height: 400px;
        position: relative;
}
.myspan {
        position: absolute;
        font: bold 28px/36px sans-serif;
}

@keyframes move {
        0% { top: 0px; transform: rotate(0); color: olive; }
        50% { top: 60px; transform: rotate(100deg); color: red; }
        100% { top: 0px; transform: rotate(360deg); color: green; }
}
</style>

<div id="pabox"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1456393572.mp3" loop></audio>

<script>
(function() {
        let spans = [],idx = 0, last = null;

        [...'花潮论坛'].forEach((item,key) => {
                let sp = document.createElement('span');
                sp.className = 'myspan';
                sp.innerText = item;
                sp.style.cssText = `left: ${key*36+36}px`;
                spans.push(sp);
                pabox.appendChild(sp);
        });

        let mov = () => {
                if(last != null) spans.style.animation = '';
                spans.style.animation = 'move 2s';
                last = idx;
                idx += 1;
                if(idx >= spans.length) idx = 0;
                setTimeout(mov,2000);
        };

        mov();
})();
</script>

马黑黑 发表于 2023-2-10 21:45

本帖最后由 马黑黑 于 2023-2-10 21:46 编辑

代码
<style>
#mybox {
      margin: auto;
      position: relative;
}
.mysp {
      position: absolute;
      font: bold 28px/36px sans-serif;
}

@keyframes move {
      0% { top: 0px; transform: rotate(0); color: olive; }
      50% { top: 60px; transform: rotate(100deg); color: red; }
      100% { top: 0px; transform: rotate(360deg); color: green; }
}
</style>

<div id="mybox"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1456393572.mp3" loop></audio>

<script>
(function() {
      let spans = [],idx = 0, last = null;

      [...'花潮论坛'].forEach((item,key) => {
                let sp = document.createElement('span');
                sp.className = 'mysp';
                sp.innerText = item;
                sp.style.cssText += `left: ${key*36+36}px`;
                spans.push(sp);
                mybox.appendChild(sp);
      });

      let mov = () => {
                if(last != null) spans.style.animation = '';
                spans.style.animation = 'move 2s';
                last = idx;
                idx += 1;
                if(idx >= spans.length) idx = 0;
                setTimeout(mov,2000);
      };

      mov();
})();
</script>

醉美水芙蓉 发表于 2023-2-10 21:56

东篱闲人 发表于 2023-2-10 21:56

本帖最后由 东篱闲人 于 2023-2-10 22:00 编辑 <br /><br />黑黑真会玩！{:5_116:}

起个网名好难 发表于 2023-2-10 21:57

顽皮的字{:5_106:}

马黑黑 发表于 2023-2-10 21:59

醉美水芙蓉 发表于 2023-2-10 21:56
欣赏老师佳作！

感謝支持

马黑黑 发表于 2023-2-10 21:59

起个网名好难 发表于 2023-2-10 21:57
顽皮的字

晚上好

马黑黑 发表于 2023-2-10 22:02

东篱闲人 发表于 2023-2-10 21:56
本帖最后由 东篱闲人 于 2023-2-10 22:00 编辑 黑黑真会玩！

{:4_191:}

东篱闲人 发表于 2023-2-10 22:05

马黑黑 发表于 2023-2-10 22:02


<style>
#mybox {
      margin: auto;
      position: relative;
}
.mysp {
      position: absolute;
      font: bold 28px/36px sans-serif;
}

@keyframes move {
      0% { top: 0px; transform: rotate(0); color: olive; }
      50% { top: 60px; transform: rotate(100deg); color: red; }
      100% { top: 0px; transform: rotate(360deg); color: green; }
}
</style>

<div id="mybox"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1456393572.mp3" loop></audio>

<script>
(function() {
      let spans = [],idx = 0, last = null;

      [...'黑黑真会玩，是个乖宝宝'].forEach((item,key) => {
                let sp = document.createElement('span');
                sp.className = 'mysp';
                sp.innerText = item;
                sp.style.cssText += `left: ${key*36+36}px`;
                spans.push(sp);
                mybox.appendChild(sp);
      });

      let mov = () => {
                if(last != null) spans.style.animation = '';
                spans.style.animation = 'move 2s';
                last = idx;
                idx += 1;
                if(idx >= spans.length) idx = 0;
                setTimeout(mov,2000);
      };

      mov();
})();
</script>

马黑黑 发表于 2023-2-10 22:11

东篱闲人 发表于 2023-2-10 22:05
#mybox {
      margin: auto;
      position: relative;


膩害膩害

小辣椒 发表于 2023-2-10 22:19

黑黑，太棒了{:4_170:}

马黑黑 发表于 2023-2-10 22:20

小辣椒 发表于 2023-2-10 22:19
黑黑，太棒了

你把冬雨转晕了木有

小辣椒 发表于 2023-2-10 22:20

马黑黑 发表于 2023-2-10 22:20
你把冬雨转晕了木有

估计会{:4_170:}

马黑黑 发表于 2023-2-10 22:20

小辣椒 发表于 2023-2-10 22:20
估计会

晕晕也好，可以提高身体素质

红影 发表于 2023-2-10 22:27

这个有趣，还可以逐个底朝天的，而且是变着颜色的{:4_173:}

小辣椒 发表于 2023-2-10 22:29

马黑黑 发表于 2023-2-10 22:20
晕晕也好，可以提高身体素质

反正就是呼叫冬雨出来就好{:4_170:}

马黑黑 发表于 2023-2-10 22:34

小辣椒 发表于 2023-2-10 22:29
反正就是呼叫冬雨出来就好

{:4_196:}

马黑黑 发表于 2023-2-10 22:34

红影 发表于 2023-2-10 22:27
这个有趣，还可以逐个底朝天的，而且是变着颜色的

也是文本特效的一种形式吧

小辣椒 发表于 2023-2-10 22:39

马黑黑 发表于 2023-2-10 22:34


冬天必须每天触动一下{:4_170:}

马黑黑 发表于 2023-2-10 22:40

小辣椒 发表于 2023-2-10 22:39
冬天必须每天触动一下

你找到他的软肋了

查看完整版本: 翻个底朝天