当前位置:首页 > 企业官网建设

给网站文字添加高逼格效果

2020-01-01

自己网站导航页一向比较“文静”,作为一个爱捣鼓的孩子,岂能任由其页面恶性发展,抖音看多了,想着是不是可以给自己的文字添加一下抖音效果,不料,网上资料是如此稀少,在借鉴了 沧水 大佬的代码后,分析其原理,就是一个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 就可以实现了,不管可以文字有效果,图片或者任意元素都有抖音效果,看着挺好玩的,想玩的可以拿去用哦。

免费获取报价

  • 29923329

  • 杭州市丰庆路498号北软智慧科创大厦203

  • 0571-85815193

  • pady@1t2.cn

网站地图 版权所有 © 2008-2021 杭州派迪科技有限公司  Copyright © 2008-2020  www.hzpady.com  All Rights Reserved    浙ICP备14029905号-1     公安备案:33010802008411    软著登字第3457658号