- <head>
" T5 a) J5 n9 L0 T. ?9 Z - <style>1 E0 w- @, J" D
- .deng-box {/ t" g& `: D1 H, K3 y# d
- position: fixed;
- ~9 w3 ]5 v: c' u |# ]0 V - top: -40px;
! l. f. a" P2 J3 H+ @3 o x( s* p - right: -20px;
+ {8 H. R; A8 s( A8 o y - z-index: 999;
! e, i7 {* m4 x, z, I9 c9 Q3 }1 s - }
5 |1 v6 l- \' U) ^$ J! U/ F -
' q4 _# Y8 q( G A; Z - .deng-box1 {
8 L4 @) o" n6 r: s% @! I - position: fixed;9 Q# }" W6 J! E8 K9 e* D2 T' Y, g
- top: -30px;
- L; Q, H( h& K+ H4 a$ B3 _ - right: 10px;
+ P( h, Z- ]0 W$ G( n: r, b - z-index: 999;
) F7 M* j6 N) E - }* b. m# G# _& k; B
- ! _. Z5 U. o! A: j8 ^' l8 s
- .deng-box1 .deng {2 v8 d3 i* }+ X* y
- position: relative;
4 b6 T. w! n; W) g/ P( S* Q - width: 120px;
A" p' Y$ _- r( u - height: 90px;+ |8 D$ ?# M& W5 Q7 Q8 I; ]3 x3 ~9 N
- margin: 50px;
& K/ @) R3 P. \' Q - background: #d8000f;; j5 g- Y, w' w8 B
- background: rgba(216, 0, 15, 0.8);4 Q3 i) y5 x! d, e) V
- border-radius: 50% 50%;
9 z& ]1 O: d' B - -webkit-transform-origin: 50% -100px;* C/ @0 n! A% _/ Y
- -webkit-animation: swing 5s infinite ease-in-out;2 X, I8 N h9 P0 [4 o6 H4 J1 e1 {, `
- box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
1 L; k1 o) h" J; w - }
0 ^: Z# v% h3 w. T- y -
" D, M4 Q! l } - .deng {
: t0 }4 U) G, T; P& z - position: relative;
" J8 k N/ `: A( H - width: 120px;
# }/ ^; Z' j6 K6 j7 n3 V* O - height: 90px;
5 S/ X5 {2 I) X J( l) L) w - margin: 50px;
& ^" e7 ?+ K& E% R" v# t - background: #d8000f;, c& H6 F! ~) [+ s( X- @* A
- background: rgba(216, 0, 15, 0.8);6 k- n; I* Y5 F0 m; Q
- border-radius: 50% 50%;0 a% {1 f! `$ x/ U9 c
- -webkit-transform-origin: 50% -100px;9 d4 d% j$ z) N
- -webkit-animation: swing 3s infinite ease-in-out;
9 \! o( C% a5 n+ i0 I ^ - box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);, d4 f/ w) x$ ?+ i8 `% ` K
- }
: s; ^# g0 Z) _4 Q) q -
) o% n9 z2 w9 m1 B' Z - .deng-a {; K4 p3 M& X1 c1 P( j
- width: 100px;
9 s* S" f( @/ U6 p - height: 90px;0 i; l- _' ^( e, }
- background: #d8000f;
! b& N' U5 K3 C) C% x+ R - background: rgba(216, 0, 15, 0.1);! w5 n, E4 G5 `4 D- B3 t8 J
- margin: 12px 8px 8px 8px;2 D( r/ P( f, [7 y5 J5 @' x/ c
- border-radius: 50% 50%;
! A2 _7 t$ W% U+ M" b* {7 J - border: 2px solid #dc8f03;2 C( p# r0 j3 R! m
- }
/ X b) N* t3 j' i -
& `# a- F! [$ ?0 k - .deng-b {
( B# B& _5 p1 H; E5 V! I0 ~ - width: 45px;
# H! O# a% `" A3 v% v - height: 90px;
) w, F/ `2 @& T. ]+ u s+ p+ L. } - background: #d8000f;6 C2 n8 Q% C) \6 f
- background: rgba(216, 0, 15, 0.1);
( q/ G5 @" B" ^3 I' P - margin: -4px 8px 8px 26px;8 H4 q0 Z+ I0 e1 _" k: a
- border-radius: 50% 50%;
8 | _3 b: F( V- S - border: 2px solid #dc8f03; n: p5 d- c$ O" S
- }
& k: ?0 ^' E% B. A -
4 E1 i Q. L" p; Y6 [ - .xian {* t3 [7 {0 b% o U% h
- position: absolute;0 ^ V1 F* B" S8 a
- top: -20px;, ]9 s5 j6 G0 q& T7 b
- left: 60px;
: n2 F7 l/ P$ r0 r/ r; e0 t/ w - width: 2px;
! Z5 W* ~7 G1 `8 @- u# g - height: 20px;4 m7 o9 t6 m* R. |
- background: #dc8f03;
* ?" O1 a& T! H, g! N% x. L - }
" \' n6 l# h9 K6 W0 n -
) W2 j1 V- l& R. E- x h/ D - .shui-a {
1 Z7 ~8 L# n5 p+ ` - position: relative;( ]1 [0 ~% k0 ^( A2 j+ O
- width: 5px;6 h" ?! x2 t% Z6 ~' y7 K4 F6 Z- V
- height: 20px;
4 X5 o* A% p7 k4 c- J - margin: -5px 0 0 59px;
3 f* A2 U' C6 ?: Y } - -webkit-animation: swing 4s infinite ease-in-out;- `8 b* h4 V" F6 E% s( I
- -webkit-transform-origin: 50% -45px;- d9 G( E8 y6 |: @: P8 n9 [
- background: #ffa500;
0 v5 P% y7 m' p: s* ?/ w! }% Y# ? - border-radius: 0 0 5px 5px;
& b+ h7 V7 K1 `" D. S - }4 I0 q6 C; H! G! e% ]) C
- : ?: V9 i* d0 V: S' ?1 b0 O
- .shui-b {, o! J; u ~% m1 _9 j5 X: A
- position: absolute;
: L, [# e7 s* E2 {; j- S - top: 14px;
' O N- s) F( w/ E' V$ q; Q% v$ r - left: -2px;- o Z$ y" f& G+ u7 t% J/ B+ e
- width: 10px;
) Q s. X+ O" [/ p - height: 10px;3 N, M/ F/ O: l5 N3 f
- background: #dc8f03;
. Q( X X9 y) k9 ?+ J - border-radius: 50%;9 l$ Z t& }" ?. p$ A
- }1 p; I" C# n6 W) t; n3 f" T, U5 B
- 6 d! I0 [ ]0 _8 e
- .shui-c {$ U) b7 p9 e/ u( b, v
- position: absolute;) ^9 i# Q4 H! ]5 V& Z& j- _( Y% F
- top: 18px;! s2 Y k$ {1 G( F. _
- left: -2px;
2 M: O/ F* x: V. [ - width: 10px;
! \4 O) }; l' o0 u - height: 35px;
/ r8 e% F0 }# Z7 f6 n8 E - background: #ffa500;: h) t! Q, g8 w
- border-radius: 0 0 0 5px;
E$ e& H. G" R- h - }
. i) _, v# t1 k( N6 Y+ h - + u- W- |" N! n2 l9 b# K* ^9 |
- .deng:before {/ b+ g' |$ D4 Y$ V" G
- position: absolute;) z2 Y6 Y+ R' D6 c3 {6 `8 y
- top: -7px;
. C% q# {3 R+ Z0 [ - left: 29px;
% |+ a* K1 _$ I/ ^1 E) r$ C: e, m D - height: 12px;3 i* d" {1 v, W3 M$ c
- width: 60px;
# j/ d6 @* Y$ ]- [ E - content: " ";
~" ?5 U% o$ p9 y - display: block;2 F7 l8 [8 R3 h' [
- z-index: 999;1 M2 S1 A7 P! K: p2 a% w
- border-radius: 5px 5px 0 0;9 W8 ^8 w9 a3 _7 v+ }. |
- border: solid 1px #dc8f03;
$ C2 F1 v) X1 t+ G- S- y3 R# N - background: #ffa500;- |* ^! n* X! c( r3 Y$ G& ^& M
- background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
1 ?9 Q( N9 n- a- j: d% \) E1 t - }
( h0 ]# J. i; M% [& h, Z. j -
; Q+ r6 a% [* W) I+ r$ P/ D - .deng:after {
! J% h3 L7 ]. I$ s - position: absolute;# o4 F8 N2 Z. _$ |( e: D
- bottom: -7px;4 O* C) e" k7 T
- left: 10px;
- S( ^5 d3 x. f4 w5 ]8 Y& [ - height: 12px;
: Q- j. S, ~+ h. o, l! Z: K; g3 q - width: 60px;
" s+ N+ V: t% O - content: " ";
6 _ i5 `0 c x - display: block;
% D0 B% e# P2 h( L- _7 J7 y* t - margin-left: 20px;; h& T1 |- r! p) Q1 m( s$ c0 s
- border-radius: 0 0 5px 5px;3 x- z7 u7 Q1 l. y/ y1 e
- border: solid 1px #dc8f03;# u; O$ L- ]/ S+ |
- background: #ffa500;
1 u! R* T3 r+ x( S. f( h; v& X - background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
: V9 g# Q# m. T9 | - }7 ]0 O) j; r6 L
-
) L$ P4 o' m4 O$ s( I - .deng-t {
: p/ y7 T6 O; i+ W - font-family: 华文行楷,Arial,Lucida Grande,Tahoma,sans-serif;
% E' p% v( X6 W: ^8 s4 J7 d6 G% w - font-size: 3.2rem;
$ _) d0 o1 V1 |) Y- D8 I, z/ p - color: #dc8f03;
* f) h. G' g/ q' W+ c+ M - font-weight: bold;
! O: q5 }& ]6 Q ^& B - line-height: 85px;
7 U7 A$ R1 r. ^; D - text-align: center;* W* O& N# p" j7 O0 L" t3 m% t
- }
6 P3 }" h" {3 X- t& d' J4 X j - $ ?8 z6 _9 z B# m0 u. }- X8 s
- .night .deng-t, ' l: f0 O8 s+ P3 a# {& F
- .night .deng-box,
/ }" E+ J F4 v/ c0 O0 L0 j% ^ - .night .deng-box1 {! q: M* _1 J) T# I" z
- background: transparent !important;5 s- o& Z" C* M8 ~8 [5 k" \
- }
5 a3 r* I1 F6 { -
& B! m" E" U& m - @-moz-keyframes swing {4 R4 h7 S4 K3 x: A% t$ Q8 z6 T
- 0% {: W- `, S, b" z1 }
- -moz-transform: rotate(-10deg)
; y' Z! W( D+ X' q - }
5 D+ Y9 c4 y0 { -
$ ]% x* I6 Y+ I9 w0 S p, R2 W4 [ - 50% {
' R, |! O U" v' }5 @4 e - -moz-transform: rotate(10deg) k7 K- D7 a$ o. J
- }& i+ D. [0 Q# t- q2 Y% t& e7 n) r2 ?2 i3 P
- 3 v& c7 {1 L- C9 ]& R8 g
- 100% {
3 s% L: j2 d5 V5 |$ e- z - -moz-transform: rotate(-10deg)7 G% K+ Q( m5 J1 U7 C" t
- } R+ k* q1 G9 R1 P# P8 ]
- }0 M) n3 w" D, e+ R; T: P. t
- 0 |$ J0 l. k+ m
- @-webkit-keyframes swing {8 I: f1 k1 u) b3 N& @( q
- 0% {
; @, W( a! v! y9 S* n& s - -webkit-transform: rotate(-10deg)4 f8 V, k( ^1 N% O5 @
- }
+ ^4 U% h1 h2 ~0 m - 5 F; F6 D7 j# h) l. a x4 D1 Z
- 50% {% s% D" H; ]( Q) p& Z3 R. o7 F' [ J
- -webkit-transform: rotate(10deg)
& |; }( P2 \0 @" [4 j/ o - }; R5 l$ c- M& [8 q: N( {
-
+ T* f: B$ J6 x5 { - 100% {4 u% Y1 H( C% F: k& u. y7 Q
- -webkit-transform: rotate(-10deg)" [$ C6 U! l# R% B: _5 q: p
- }
& L9 ]$ W$ }; o( D - }
. X9 e4 U3 S( M# b# `, n - </style>+ S5 r# C3 W" u# f2 F
- <body>
% [8 q/ k2 |; K7 W' @ - <!-- 灯笼1 -->/ T& x5 c2 n$ G* j% l9 ]! H
- <div class="deng-box">
& S$ n& c! c4 l4 r - <div class="deng">9 E1 i+ h* k: v# x4 c M3 i
- <div class="xian"></div>- M. G5 ]9 L& |" X3 p a% N2 `
- <div class="deng-a">7 y) f2 G/ ~. p" e2 v* H- M' A
- <div class="deng-b"><div class="deng-t">庆</div></div>
0 a' j5 E" a8 n6 g3 A6 I/ d* M+ a - </div>
" f9 q: z. v2 L) j$ w0 ^+ u - <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>
; S/ G! X; M# A, Z - </div>
' v6 n; z* B- y7 f# ?( C - </div>( @3 V, Y. T, @& D+ l8 W. }
- <!-- 灯笼2 -->
b. [5 j8 Z% d: E; l - <div class="deng-box1">
4 d. a$ ` j3 |+ _ - <div class="deng"> y3 Y" Z. Z; Q/ ]# b8 P! H
- <div class="xian"></div># k1 p! c( f) T
- <div class="deng-a">
6 i/ H; R4 W) E# p/ f3 E8 X - <div class="deng-b"><div class="deng-t">国</div></div># ?/ p# B8 S1 I2 U( h* \' }2 w
- </div>; {. Y A! I& E4 s/ a% [
- <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>9 B' @6 X5 J; I7 G
- </div>
- Q* w* c+ t, ?8 D2 S) S0 I - </div>
1 w$ W) K# I0 O1 |4 L& R! T - </body>
* G+ L: U* ^0 v3 l9 C4 K8 f# Z; T f$ {* H& b- D8 N, K
|
楼主