温馨提示：
本文所述内容不具普遍性，可能因操作环境差异而与实际有所出入，故请勿照搬照抄，仅供参考。
呼吸灯效果
源码
<!DOCTYPE html>
<span class="name">Name</span>
<style>
.name{
font-size:50px;
background-clip: border-box;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: #FF512F;
font-weight: 700;
text-shadow: 0px 0px 7px #ffd800;
background-image: linear-gradient(90deg, #ffd800 0%, #ff512f 100%, #fff);
animation: glow-animation 2s infinite linear;
color: #FFC0CB;
box-sizing: border-box;
vertical-align: inherit;
}
@keyframes glow-animation{
0%{filter:hue-rotate(-360deg)}
100%{filter:hue-rotate(360deg)}
}
</style>抖音效果
代码
<!DOCTYPE html>
<span class="doudong">Name</span>
<style>
.doudong{
animation: uk-text-shadow-glitch .65s cubic-bezier(1,-1.91,0,2.79) 0s infinite normal both running;
}
@keyframes uk-text-shadow-glitch {
0% {
text-shadow: none
}
25% {
text-shadow: -2px -2px 0 #ff0048,2px 2px 0 #3234ff
}
50% {
text-shadow: 2px -2px 0 #ff0048,-2px 2px 0 #3234ff
}
75% {
text-shadow: -2px 2px 0 #ff0048,2px -2px 0 #3234ff
}
100% {
text-shadow: 2px 2px 0 #ff0048,-2px -2px 0 #3234ff
}
}
@keyframes uk-flicker {
0% {
opacity: 0
}
10% {
opacity: .6;
transform: scale(.8)
}
20% {
opacity: 0
}
40% {
opacity: 1
}
50% {
opacity: .2;
transform: scale(1.1)
}
100% {
opacity: 1;
transform: scale(1)
}
}
</style>参考文章：
1、《html CSS 七彩呼吸灯》
2、《html抖音效果CSS,文字彩色抖动效果CSS》
Windows 10Edge 18.18362来自 广东 的大神
朋友，交换友链吗？
已添加