自己网站导航页一向比较“文静”,作为一个爱捣鼓的孩子,岂能任由其页面恶性发展,抖音看多了,想着是不是可以给自己的文字添加一下抖音效果,不料,网上资料是如此稀少,在借鉴了 沧水 大佬的代码后,分析其原理,就是一个CSS3
动画效果,让自己的阴影左右摆动形成的,效果就是上面的图片效果,同时你可以点击下面链接去查看实际的效果哦!!!
代码奉上
.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: -1px -1px 0 #ff0048,1px 1px 0 #3234ff } 50% { text-shadow: 1px -1px 0 #ff0048,-1px 1px 0 #3234ff } 75% { text-shadow: -1px 1px 0 #ff0048,1px -1px 0 #3234ff } 100% { text-shadow: 1px 1px 0 #ff0048,-1px -1px 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) } }
给自己的元素div
加上 .doudong
就可以实现了,不管可以文字有效果,图片或者任意元素都有抖音效果,看着挺好玩的,想玩的可以拿去用哦。