牢记网客网域名:Wkone.cn网客网论坛
关注网社
扫官微看看大世界
手机版
扫码打开掌上乐圈
收起左侧

纯CSS文字彩色抖动抖音效果

0
回复
239
查看
[复制链接]

 成长值: 11665

铭牌:未领取
10100
等级头衔

等級:无上至尊

Rank: 129Rank: 129Rank: 129

钻石:1862 颗

氪券:580 票

押金:0 元

K币:2125 枚

 

土豪勋章055022铁粉×12084

发表于 2019-10-3 23:45:18 | 显示全部楼层 |阅读模式

马上注册~开启兴趣社区世界~享技术乐生活。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
【效果演示】
; l* ?7 j. S9 w1 T 267d0cdb41a649639eb612966c0ad554.jpg
8 V9 M0 y" W& g- x2 O直接将这下面段放进你的 style.css
4 \% R: u* B8 N7 \( I- M2 [0 `( o0 r5 M
CSS样式如下:
2 f+ k$ t  k  e' R# N
  1. doudong{  # K5 {% \$ H9 m) ^4 x
  2.     animation: uk-text-shadow-glitch .65s cubic-bezier(1,-1.91,0,2.79) 0s infinite normal both running;  
    ! A, y6 J) M) G6 @- F
  3.     }  
    , b8 a  l! s! I$ p4 N9 v; Z
  4. @keyframes uk-text-shadow-glitch {  
    4 J5 |( c4 _) ]6 z2 ^5 v
  5.     0% {  
    + N+ V0 y5 t( U& A" N
  6.         text-shadow: none  
    , s) Z) ~, f4 o& X
  7.     }  
    ) |6 K) w" T' V
  8.     25% {  
    : `+ J& i3 J1 Y  X# T* p1 W  a
  9.         text-shadow: –2px –2px 0 #ff0048,2px 2px 0 #3234ff  , u+ t* h; @* A8 I
  10.     }  
    . w7 V) d+ p, d' W" c4 n
  11.     50% {  $ o+ w  }* z7 P2 a& K
  12.         text-shadow: 2px –2px 0 #ff0048,-2px 2px 0 #3234ff  + v. m( H; ^0 \
  13.     }  
    * v- z$ ?$ t* `6 ?% N
  14.     75% {  
    + \8 ^7 w: q4 ^
  15.         text-shadow: –2px 2px 0 #ff0048,2px –2px 0 #3234ff  0 X: }2 S2 J+ ?) S( e/ h' w+ a6 E
  16.     }  8 a4 n1 S1 O' t; R
  17.     100% {  
    % ^, q$ T  ]1 f# v2 t+ n+ r
  18.         text-shadow: 2px 2px 0 #ff0048,-2px –2px 0 #3234ff  4 b& T% u; l& j" D0 s5 [) o. a
  19.     }  
    . y- a6 Q. O3 [8 q/ M+ d
  20. }  % O( g" H' e# B2 }2 P, i6 u# ~" [
  21. @keyframes uk-flicker {  ' v" X9 Z1 t9 y1 {5 Q! ?
  22.     0% {  . U9 G& _2 _- l
  23.         opacity: 0  
    ) B0 n/ x4 D& a
  24.     }  ) ~/ a& g( Q/ a
  25.     10% {  3 B3 G2 K0 K* Y1 o) q( Q9 }- C' C
  26.         opacity: .6;  : v1 Q& V2 W. b& w" T# m
  27.         transform: scale(.8)  
    " Z, J2 s; m0 a+ w3 U( u0 S: l
  28.     }  , P6 S2 g" D) _: W# H  s: j
  29.     20% {  
    ( G( W, n  T) A' \1 n, R
  30.         opacity: 0  : i- u" }7 {; \9 ~5 a( Z* `7 g- o
  31.     }  4 x/ _" i2 Z& i. ^- H. u. C
  32.     40% {  ( |) {! A; W- p, L+ }$ Z1 `
  33.         opacity: 1  : L1 k6 W8 G3 g& `  p9 l7 V
  34.     }  
    . A; _. E! Q2 b0 d% k2 n2 @
  35.     50% {  
    ; D1 o3 |# g8 k0 Z/ d
  36.         opacity: .2;  . M8 y! N1 C; Y% o. J& B2 i9 Q( b
  37.         transform: scale(1.1)  . v, d' t- S" t+ B" c5 T: m
  38.     }  
    & a  f) D# s: R8 F0 L
  39.     100% {  / D4 E3 T5 J5 x; l; k  T! o9 I
  40.         opacity: 1;  4 u5 t8 |# m5 o6 l1 q" Z
  41.         transform: scale(1)  
    / B2 o  ?& Q/ N$ a) y+ [& f
  42.     }  
    5 K. k9 U+ K( `) V4 H; e9 b
  43. }  
复制代码
最后把你需要抖起来的那个文本标签 <> 内加入 class="doudong"引入即可,网客网没有亲测,大家自己试试看,感觉挺有意思的,记得反馈一下哦⊙∀⊙!+ s9 c4 e0 g- Q( k
6月不努力,九月当兄弟,我在训练场上等着你!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

站长推荐上一条 /1 下一条

发布资源 返回列表 客服中心 搜索 官方QQ群
技术资源享你所想

人工客服电话

1314-520-6071

客服QQ:3388700000

官方邮箱:1@wkone.cn

站长QQ:785256319

关注我们
  • 关注官方微信

  • 手机APP