红影 发表于 2022-3-24 10:04
我情愿麻烦点，也是有点怕JS呢，那个真的挺难的。这两个纯css的太好了，必须大赞
还有更好一点的，其实之前也介绍过，不过有空我会再整理然后弄上来。其实就是用 transform 的 translate 位移变换，这个无需元素定位
红影 发表于 2022-3-24 10:03
自己按照你的代码去试，可能还会有其他意想不到的效果呢
应该有
红影 发表于 2022-3-24 10:02
人想让文字往哪跑就往哪跑，应该是‘字在人为’
说的也是
本帖最后由 马黑黑 于 2022-3-24 18:49 编辑 <br /><br /><style type="text/css">
/* 背景色动态变换的文本 */
.bgBox {
margin: auto;
width: 600px;
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>
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
而且也是不管有多少文字，都能展示的吧？
<p>是的，请看：<br><br></p>
<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>
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楼代码：
这个厉害了，文字中还能替换颜色的啊{:4_199:}
马黑黑 发表于 2022-3-24 21:04
应该是吧
展示诗词居然打成了展示实习，哈哈。用那个打字效果弄了个七绝，觉得真心不错呢。
红影 发表于 2022-3-24 21:41
这个厉害了，文字中还能替换颜色的啊
没有呀，我是为了强调一些重要数据加上的颜色。但它的代码够简洁
红影 发表于 2022-3-24 21:42
展示诗词居然打成了展示实习，哈哈。用那个打字效果弄了个七绝，觉得真心不错呢。
可以可以
马黑黑 发表于 2022-3-24 21:05
背景色变化，它会有一丝丝的变化，因为前景色也有透明度
哦，原来是这样{:4_187:}
红影 发表于 2022-3-24 21:48
哦，原来是这样
我这个设计还是很精妙的哦
马黑黑 发表于 2022-3-24 21:43
没有呀，我是为了强调一些重要数据加上的颜色。但它的代码够简洁
又学了一招，知道一堆文字里怎么直接改变颜色了{:4_187:}
马黑黑 发表于 2022-3-24 21:50
我这个设计还是很精妙的哦
那些变色方案已经把我看迷糊了{:4_173:}