引子

前面折腾了一个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>

效果

aa

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>

效果

bb

参考文献

[1][沧水的博客>html CSS 七彩呼吸灯](https://cangshui.net/4447.html)

[2][沧水的博客>html抖音效果CSS,文字彩色抖动效果CSS](https://cangshui.net/3237.html)