论坛 › 马黑黑教程专版 › 一覽眾山小

马黑黑 发表于 2024-6-3 19:37

一覽眾山小

<style>
#mydiv {
        width: 760px;
        height:600px;
        border: thin solid gray;
        position: relative;
}
.txtbox {
        position: absolute;
        display: grid;
        place-items: center;
        left: var(--x1);
        top: 10px;
        width: 50px;
        height: 50px;
        font: normal 30px sans-serif;
        text-align: center;
        box-sizing: border-box;
}
.txtbox::after {
        position: absolute;
        content: '';
        inset: 1px;
        border: 2px dashed gray;
        border-color: green red blue orange;
        border-radius: 50%;
        animation: rot 6s linear infinite;
}
@keyframes move1 {to { left: var(--x2); } }
@keyframes move2 { to { left: var(--x1); } }
@keyframes rot { to { transform: rotate(var(--deg)); } }
</style>

<div id="mydiv"></div>

<script>
(function() {

const ar = '會當凌絕頂一覽眾山小'.split('');
const ww = 760, duTime = 4, deTime = 0.5;
let sAr = [], aniIdx = false;

ar.forEach((t,k) => {
        let span = document.createElement('span');
        span.className = 'txtbox';
        span.textContent = t;
        span.style.cssText += `
                --x1: ${ww + k * 50 - ar.length * 50 - 20}px;
                --x2: ${k * 50 + 10}px;
                --deg: -1turn;
        `;
        sAr.push(span);
        mydiv.appendChild(span);
});

let playAni = () => {
        let aniName = ['move1','move2'][+aniIdx];
        let deg = ['-1turn','1turn'][+aniIdx];
        sAr.forEach((item,key) => {
                item.style.left = ['var(--x1)','var(--x2)'][+aniIdx];
                item.style.setProperty('--deg', deg);
                let delay = aniIdx ? deTime * (sAr.length - key - 1) : deTime * key;
                item.style.animation = `${aniName} ${duTime}s ${delay}s linear forwards`;
        });
        aniIdx = !aniIdx;
        setTimeout(playAni, (duTime + sAr.length * deTime + deTime) * 1000);
};

playAni();

})();
</script>

马黑黑 发表于 2024-6-3 19:40

代码：

<style>
#mydiv {
        width: 760px;
        height:600px;
        border: thin solid gray;
        position: relative;
}
.txtbox {
        position: absolute;
        display: grid;
        place-items: center;
        left: var(--x1);
        top: 10px;
        width: 50px;
        height: 50px;
        font: normal 30px sans-serif;
        text-align: center;
        box-sizing: border-box;
}
.txtbox::after {
        position: absolute;
        content: '';
        inset: 1px;
        border: 2px dashed gray;
        border-color: green red blue orange;
        border-radius: 50%;
        animation: rot 6s linear infinite;
}
@keyframes move1 {to { left: var(--x2); } }
@keyframes move2 { to { left: var(--x1); } }
@keyframes rot { to { transform: rotate(var(--deg)); } }
</style>

<div id="mydiv"></div>

<script>

const ar = '會當凌絕頂一覽眾山小'.split('');
const ww = 760, duTime = 4, deTime = 0.5; //运动宽度、运动时长、延时系数
let sAr = [], aniIdx = false; //标签数组、动画名索引

//生成span标签
ar.forEach((t,k) => {
        let span = document.createElement('span');
        span.className = 'txtbox';
        span.textContent = t;
        span.style.cssText += `
                --x1: ${ww + k * 50 - ar.length * 50 - 20}px;
                --x2: ${k * 50 + 10}px;
                --deg: -1turn;
        `;
        sAr.push(span); //加入span标签数组
        mydiv.appendChild(span);
});

//动画函数 ：依据名称索引来回运行两个关键帧动
let playAni = () => {
        let aniName = ['move1','move2'][+aniIdx]; //选取关键帧动画
        let deg = ['-1turn','1turn'][+aniIdx]; //选取旋转角度
        sAr.forEach((item,key) => {
                item.style.left = ['var(--x1)','var(--x2)'][+aniIdx]; //运行动关键帧画前固定位置
                item.style.setProperty('--deg', deg); //设置旋转方向
                //计算延时执行动画 ：自右向左 - 系数×序号; 反之 - 系数×(总数-序号-1)
                let delay = aniIdx ? deTime * (sAr.length - key - 1) : deTime * key;
                //设置元素动画
                item.style.animation = `${aniName} ${duTime}s ${delay}s linear forwards`;
        });
        aniIdx = !aniIdx; //布尔索引取反 ：为下一次准备另一个动画
        /* 定时器 ：递归调用函数自身以永动
           间隔时间 - 动画时长+总数×延时系数+延时系数(间隔时间大于所有元素运行完毕总用时 deTime 秒)
        */
        setTimeout(playAni, (duTime + sAr.length * deTime + deTime) * 1000);
};

playAni(); //启动动画

</script>

红影 发表于 2024-6-3 19:52

这个有趣，文字来回游荡，而且文字外围的动态环，还能反向转动呢{:4_187:}

红影 发表于 2024-6-3 20:10

这个看着很好看，但是感觉很复杂的{:4_173:}

南无月 发表于 2024-6-3 20:28

想到了排排座，吃果果。。
这个文字设计好看又好玩。。{:4_199:}

南无月 发表于 2024-6-3 20:29

左右移动，碰触反向，循环不断，永不停止。。
这永动机制太厉害了。。{:4_189:}

马黑黑 发表于 2024-6-4 07:54

南无月 发表于 2024-6-3 20:29
左右移动，碰触反向，循环不断，永不停止。。
这永动机制太厉害了。。

{:4_190:}

马黑黑 发表于 2024-6-4 07:54

南无月 发表于 2024-6-3 20:28
想到了排排座，吃果果。。
这个文字设计好看又好玩。。

{:4_172:}

马黑黑 发表于 2024-6-4 07:54

红影 发表于 2024-6-3 20:10
这个看着很好看，但是感觉很复杂的

两个关键帧动画交替运行，这是原理

马黑黑 发表于 2024-6-4 07:55

红影 发表于 2024-6-3 19:52
这个有趣，文字来回游荡，而且文字外围的动态环，还能反向转动呢

细节还是多点的

南无月 发表于 2024-6-4 17:51

马黑黑 发表于 2024-6-4 07:54


挺厉害的，
给字加动框，同时还左右移。。
这个双动就不得了

南无月 发表于 2024-6-4 17:52

马黑黑 发表于 2024-6-4 07:54


跟老师一样，颜值超群{:4_170:}

马黑黑 发表于 2024-6-4 19:30

南无月 发表于 2024-6-4 17:52
跟老师一样，颜值超群

哇塞

马黑黑 发表于 2024-6-4 19:30

南无月 发表于 2024-6-4 17:51
挺厉害的，
给字加动框，同时还左右移。。
这个双动就不得了

不是特好控制

南无月 发表于 2024-6-4 20:27

马黑黑 发表于 2024-6-4 19:30
哇塞

{:4_170:}看到你发的贴子了

南无月 发表于 2024-6-4 20:28

马黑黑 发表于 2024-6-4 19:30
不是特好控制

多动很复杂，又实现，精妙

马黑黑 发表于 2024-6-4 21:08

南无月 发表于 2024-6-4 20:28
多动很复杂，又实现，精妙

如果只管动不理开关，那要简单得多

马黑黑 发表于 2024-6-4 21:08

南无月 发表于 2024-6-4 20:27
看到你发的贴子了

{:4_173:}

南无月 发表于 2024-6-4 21:44

马黑黑 发表于 2024-6-4 21:08
如果只管动不理开关，那要简单得多

{:4_170:}机械管理师。。这个小齿轮承载东西太多了

南无月 发表于 2024-6-4 21:46

马黑黑 发表于 2024-6-4 21:08

{:4_170:}近视的

查看完整版本: 一覽眾山小