引子
前面折腾了一个bug极多的操纵网页链接的方法，可以看看传送门。
进来又收集了一些有趣的css魔法，收藏在此。
html CSS 七彩呼吸灯
效果如首页显示所见
代码如下:
CSS
.ssname{
font-size:180px;
background-clip: border-box;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: #FF512F;
font-weight: 100;
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)}
}
为了避免一些闪瞎眼效应，这里我给它们加了个定时器
JS
setTimeout(function () {
var ssname = "ssname";
var access = document.getElementsByClassName(ssname);
for (var i = access.length - 1; i > -1; i--) {
if (hasClass(access[i], ssname)) {
removeClass(access[i], ssname);
}
}
function hasClass(elements, cName) {
return !!elements.className.match(new RegExp("(\\s|^)" + cName + "(\\s|$)"));
};
function removeClass(elements, cName) {
if (hasClass(elements, cName)) {
elements.className = elements.className.replace(new RegExp("(\\s|^)" + cName + "(\\s|$)"), " ");
}
;
};
}, 5000);
然后在需要加上rgb的地方上加上对应的class调料
比如下面这样
html
<body>
<span class="ssname">你看我闪吗？</span>
</body>
效果
html抖音效果CSS,文字彩色抖动效果CSS
CSS
.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)
}
}
也可以重叠在定时器后面使用
JS
setTimeout(function () {
var ssname = "ssname";
var access = document.getElementsByClassName(ssname);
for (var i = access.length - 1; i > -1; i--) {
if (hasClass(access[i], ssname)) {
//removeClass(access[i], ssname);
access[i].setAttribute("class","doudong");
}
}
setTimeout(function () {
var doudong = "doudong";
var access = document.getElementsByClassName(doudong);
for (var i = access.length - 1; i > -1; i--) {
if (hasClass(access[i], doudong)) {
removeClass(access[i], doudong);
}
}
},5000);
function hasClass(elements, cName) {
return !!elements.className.match(new RegExp("(\\s|^)" + cName + "(\\s|$)"));
};
function removeClass(elements, cName) {
if (hasClass(elements, cName)) {
elements.className = elements.className.replace(new RegExp("(\\s|^)" + cName + "(\\s|$)"), " ");
}
;
};
}, 5000);
html
<body>
<span class="ssname">你看我闪吗？闪5秒还会抖动</span>
</body>
效果
参考文献
[1][沧水的博客>html CSS 七彩呼吸灯](https://cangshui.net/4447.html)
[2][沧水的博客>html抖音效果CSS,文字彩色抖动效果CSS](https://cangshui.net/3237.html)
Q.E.D.