html抖音效果CSS,文字彩色抖动效果CSS

发布于 / 网页制作 / 0 条评论

原创html抖音效果CSS,文字彩色抖动效果CSS

效果图

请注意!为了用户体验,请勿在某些重要的页面使用这种抖动效果!被领导/用户/朋友/路人…喷瞎眼本人概不负责

本效果非常简单,其实就是一个CSS3的动画效果

直接将这下面段放进你的style.css或者用<style>写入html文件

.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)
    }
}

然后把你需要抖起来的那个文本标签<>内加入class="doudong"

实例

完成之后的效果可以看这里(眼疾患者慎入):https://cangshui.net/-otherweb/findme/

转载原创文章请注明,转载自: 沧水的博客 » html抖音效果CSS,文字彩色抖动效果CSS
Not Comment Found