TA的每日心情 | 开心 2018-8-8 03:13 |
---|
签到天数: 1 天 [LV.1]初来乍到
|
楼主 |
发表于 2021-5-6 20:43:23
|
显示全部楼层
本帖最后由 喬治兄 于 2021-5-6 20:50 编辑 $ k/ h2 Q* g# l. b$ K: j9 g) j
8 k. b1 z8 a2 c
暫時筆記,有待進一步, n w# b) @1 A- a' i& b
: q+ W: o X6 V j* O- W* f8 h8 h9 ?' b7 X# ^9 {
https://www.w3schools.com/code/tryit.asp?filename=GQ9ZT9X0B854
1 _; P0 L: }: T4 r! h1 ?+ P2 q& g) P& \3 k+ Z1 w
7 j, B) w: ~0 p& b
<!DOCTYPE html>
' @3 e, z/ z7 a<html>
+ U9 I- Z1 C: C7 c: D# L<head>
8 T" [3 a9 u8 j<style>
: y, E5 O0 W+ k' H. M.container {) a+ S$ M# B% \. C( V! O
position: relative;
/ V& c9 N* T/ l1 D4 t' x width: 50%;
3 G( B1 ^) e( m, x- r}
+ E2 a! L% T4 k+ A6 S) r0 M9 U4 Z& Z, m+ Q6 [
.image {) t; ]5 L7 c9 m5 T S% S7 T
opacity: 1;8 D( t. i: K$ M7 y6 i1 `) z
display: block;/ }; w0 d. _# `1 q z
width: 100%;
( v6 {+ m, R5 g+ k9 ^: E4 u: _ height: auto;$ N) J0 L2 [- Y, I9 U6 x
transition: .5s ease;% r+ g! Q' @8 C
backface-visibility: hidden;
- y, [! u* r& u, n$ A, s}$ [! P. z( b" V3 {
3 X5 D* x2 A/ k! c.middle {
5 [4 D2 ], s0 C transition: .5s ease;0 R$ Q1 l; c$ F$ R
opacity: 0;% A8 X4 x; O! a! n. s
position: absolute;2 u9 D* ?9 H1 s' R2 L
top: 50%;3 l% l7 Q" s% k
left: 50%;/ i( Y; e5 h4 s8 T, c( {5 [
transform: translate(-50%, -50%);
. F" J9 [/ k% @, s -ms-transform: translate(-50%, -50%)
+ D) O% t; E. r, y% O}
! j2 s. m- E1 G$ G% M5 W/ o7 e- M( |; e+ H6 S9 K2 G
.container:hover .image {5 K: m, r- l; M; }1 q7 f
opacity: 0.3;, |& B) ]) a4 ^4 S
}
$ O# q* k f7 d X5 w
& U8 Q. R" I9 p! h.container:hover .middle {. t6 G7 r- Q, @4 V: K6 l
opacity: 1;
. t/ R! _# e# z7 ~}
6 \% f3 f+ K0 Y3 \1 p- o' {" _) E e/ l1 z' \5 Z
.text {0 [# p" O& N. t" P1 |
background-color: #4CAF50;( p3 M c# b, S$ \$ ?% h9 ]
color: white;) u+ l/ o9 t* n2 z& U
font-size: 16px;% R* _/ T; h/ M5 L9 S* x+ a
padding: 16px 32px;
+ L3 E4 }# K1 F# R0 N% W}$ _5 y* |4 @3 T( e7 d7 z/ ~
& W" o+ v7 |$ n& c
table, td {
' ?& u( p. ?$ g+ Q0 |- m! R border: 1px solid blue;$ F2 [$ k2 d9 W1 y% A8 k% F
border-collapse: collapse;0 p0 |( D) [7 ~" x
color:red;
+ k9 r! | j, x& m, }, [4 _& Z width: 50%;+ ? \) m- _: t& d5 k" T9 X
height: 9.5vw;! d W: V7 J7 v
z-index: 1;' x% J. t! g5 t
text-align: right;& T# S4 h, }" c) ^( O2 O8 A8 ~
}
: I% m ?- P+ e& C- v8 [img {position: absolute;! C! S U. m) i p
left: 0px;
$ g: a+ l& S8 u0 c# r top: 0px;8 e* A/ t% F/ J* G8 w
z-index: -1;4 v& T% e3 m0 O3 H# g: [6 n% C! H
}+ m1 M( B$ q/ \$ `$ O7 t7 |
$ D6 T% r) Z u. S6 a( @: j% N
</style>
; T! U8 `. g$ o</head>
" @6 r+ g/ ^9 _4 w<body>
a& O+ m5 M# S% R+ ?- D% e8 v/ j! R1 P7 B; H% f0 o- i% N
<h2>Fade in a Box</h2>$ x. z# L/ G/ _0 {! {# C
6 P- g# j2 w1 t0 i! F4 Z
<div class="container">
# {9 ]* x) S E" q<table style="width:100%">
6 N+ j2 J1 N9 z5 l* A* _! p <img src="img_avatar.png" alt="Avatar" class="image" style="width:100%">/ a3 U, n1 M" {$ N2 c
<div class="middle">
) v- O: [/ u$ [+ ~7 O5 e <div class="text">John Doe</div>
$ P( o8 s1 i8 J3 J+ Q2 B0 `- q <tr>; t; ]& r' v- S7 e
<td>1</td>
6 Q$ {1 r: C9 K* I* S <td></td> 5 D0 D2 g0 T' t; ?3 g% i2 Q
</tr>
, d$ _$ {) a) t* }) C <tr>
& r0 j# P( a" o4 I; ?: y; _$ L9 Z7 d v& p <td>2</td>4 l- ~: _" f% C( a" j& H8 i2 X
<td></td>
3 H7 j* `, Q! J0 G" ]- ` </tr>
/ M: W6 f i) y2 C <tr>! U @4 P$ w! X; T+ a! Z
<td>3</td>" D3 Q3 ?7 `( w! B& S
<td></td>; l6 X" t$ y t \2 U
</tr>! ^' O% r3 t/ G, F, ^! I" D
<tr>
) d+ R( R! x; T <td>4</td>
& F+ k) n" r% L6 \7 M R/ d <td></td>+ v, a5 v- k: K; G9 @ W$ H$ h
</tr>3 A, G9 ]! J3 `4 ~0 a
<tr>
* Q+ n$ v o. P7 N4 _, p <td>5</td>
2 A* J6 `: e4 {. H <td></td>" L K C+ V% I+ U
</tr>
: s3 |! b: Z9 g* [3 q" ]</table>/ }& w- J; s9 ?1 D F- L, S2 V
</div>
- ~8 ? ^2 T2 ]1 F! g4 _</body>) H# [5 l* Y4 w8 e4 o c
</html>1 O! Q- @) \" h& P! Q r) O/ L
: H5 g, r9 a$ z: x! i4 I3 B5 j# e
1 M6 K+ K5 J$ M
</div>
: X0 W4 {: {) l 7 Z" S6 e% _/ _1 r( q& [
</body>
; Q4 q- O4 M* `) U. A</html>
* v! M) _# a! I5 j |
|