文字效果集中营

马黑黑

红影 发表于 2022-3-24 10:04
我情愿麻烦点，也是有点怕JS呢，那个真的挺难的。这两个纯css的太好了，必须大赞

还有更好一点的，其实之前也介绍过，不过有空我会再整理然后弄上来。其实就是用 transform 的 translate 位移变换，这个无需元素定位

马黑黑

红影 发表于 2022-3-24 10:03
自己按照你的代码去试，可能还会有其他意想不到的效果呢

应该有

马黑黑

红影 发表于 2022-3-24 10:02
人想让文字往哪跑就往哪跑，应该是‘字在人为’

说的也是

马黑黑

HELLO HTML5
HELLO CSS3
HELLO JAVASCRIPT

单击窗体 → 暂停/继续

马黑黑

264楼 背景色不停变化的文本：

<style type="text/css">
/* 背景色动态变换的文本 */
.bgBox {
        margin: auto;
        width: 760px;
        padding: 40px;
        border: 1px solid;
        font: bold 4em/1em Arial;
        color: rgba(255,0,0,.4);
        text-shadow: 2px 2px 4px yellow;
        background: #333 linear-gradient(green, red);
}
</style>

<div id="cup" class="bgBox">
        HELLO HTML5<br>HELLO CSS3<br>HELLO JAVASCRIPT<br>
        <p style="text-align:right;">单击窗体 → 暂停/继续</p>
</div>

<script>
var flag = true;
var bb = document.querySelector('.bgBox');
var tt = setInterval(change, 2000);

function change(){
        var r = Math.floor(Math.random()*256),
                g = Math.floor(Math.random()*256),
                b = Math.floor(Math.random()*256);
        bb.style.background = 'linear-gradient(45deg,rgb(' + r + ',' + g + ',' + b + '),rgb(' + g +',' + b + ',' + r +'))';
}

bb.onclick = function(){
        flag == true ? clearInterval(tt) : tt = setInterval(change, 2000);
        flag = -flag;
}
</script>

红影

马黑黑 发表于 2022-3-24 12:19
应该有

那个JS打字效果，用来展示实习也很棒的呢。

红影

马黑黑 发表于 2022-3-24 18:51
264楼 背景色不停变化的文本：

这个好像不是单击变色，好像它自己在变的。

红影

马黑黑 发表于 2022-3-24 12:18
还有更好一点的，其实之前也介绍过，不过有空我会再整理然后弄上来。其实就是用 transform 的 translate  ...

而且也是不管有多少文字，都能展示的吧？

马黑黑

红影 发表于 2022-3-24 20:49 而且也是不管有多少文字，都能展示的吧？

是的，请看：

本例纯纯原创。可根据需要调整父元素 --w: 260px 的值与animation运行周期时长和 keyframes中to的 -200%

马黑黑

269楼代码：

<style>
        .flyBox {
                --w: 260px;
                width: var(--w);
                overflow: hidden;
        }
        .flyBox div {
                word-break: keep-all;
                white-space: nowrap;
                animation: fly 10s linear infinite;
        }
        @keyframes fly {
                from { transform: translateX(100%); }
                to { transform: translateX(calc(-200% - var(--w))); }
        }
</style>

<div class="flyBox">
        <div>本例纯纯原创。可根据需要调整父元素 <span style="color: red;">--w: 260px</span> 的值与animation运行周期时长和 keyframes中to的 <span style="color: red;">-200%</span></div>
</div>

马黑黑

红影 发表于 2022-3-24 20:47
那个JS打字效果，用来展示实习也很棒的呢。

应该是吧

马黑黑

红影 发表于 2022-3-24 20:48
这个好像不是单击变色，好像它自己在变的。

背景色变化，它会有一丝丝的变化，因为前景色也有透明度

红影

马黑黑 发表于 2022-3-24 21:01
269楼代码：

这个厉害了，文字中还能替换颜色的啊

红影

马黑黑 发表于 2022-3-24 21:04
应该是吧

展示诗词居然打成了展示实习，哈哈。用那个打字效果弄了个七绝，觉得真心不错呢。

马黑黑

红影 发表于 2022-3-24 21:41
这个厉害了，文字中还能替换颜色的啊

没有呀，我是为了强调一些重要数据加上的颜色。但它的代码够简洁

马黑黑

红影 发表于 2022-3-24 21:42
展示诗词居然打成了展示实习，哈哈。用那个打字效果弄了个七绝，觉得真心不错呢。

可以可以

红影

马黑黑 发表于 2022-3-24 21:05
背景色变化，它会有一丝丝的变化，因为前景色也有透明度

哦，原来是这样

马黑黑

红影 发表于 2022-3-24 21:48
哦，原来是这样

我这个设计还是很精妙的哦

红影

马黑黑 发表于 2022-3-24 21:43
没有呀，我是为了强调一些重要数据加上的颜色。但它的代码够简洁

又学了一招，知道一堆文字里怎么直接改变颜色了

红影

马黑黑 发表于 2022-3-24 21:50
我这个设计还是很精妙的哦

那些变色方案已经把我看迷糊了