CSS 实现一款文字Hover效果 

 1 <!doctype html>
 2 <html>
 3 <head>
 4   <meta charset="utf-8">
 5   <title>CSS 实现一款文字Hover效果</title>
 6 </head>
 7 <body>
 8   <h2>
 9     <span><i></i>w</span>
10     <span><i></i>w</span>
11     <span><i></i>w</span>
12     <span><i></i>.</span>
13     <span><i></i>w</span>
14     <span><i></i>e</span>
15     <span><i></i>b</span>
16     <span><i></i>q</span>
17     <span><i></i>d</span>
18     <span><i></i>k</span>
19     <span><i></i>f</span>
20     <span><i></i>.</span>
21     <span><i></i>c</span>
22     <span><i></i>o</span>
23     <span><i></i>m</span>
24   </h2>
25 </body>
26 </html>

css样式：

 1 *
 2 {
 3   margin: 0;
 4   padding: 0;
 5   box-sizing: border-box;
 6   font-family: monospace;
 7 }
 8 body
 9 {
10   display: flex;
11   justify-content: center;
12   align-items: center;
13   min-height: 100vh;
14   background: linear-gradient(45deg,#ff0057,#2196f3);
15 }
16 h2 
17 {
18   position: relative;
19   display: flex;
20   gap: 5px;
21   color: #fff;
22   font-size: 4em;
23   cursor: pointer;
24   text-transform: uppercase;
25 }
26 h2 span 
27 {
28   position: relative;
29   filter: blur(5px);
30   padding: 0 5px;
31   transition: 0.5s;
32 }
33 h2 span:hover 
34 {
35   filter: blur(0);
36   transition: 0s;
37 }
38 h2 span i 
39 {
40   position: absolute;
41   inset: 0;
42 }
43 h2 span:hover i::before 
44 {
45   content: '';
46   position: absolute;
47   top: 0;
48   left: 0;
49   width: 2px;
50   height: 8px;
51   background: #fff;
52   box-shadow: 0 53px #fff,
53   36px 53px #fff,
54   36px 0 #fff;
55 }
56 h2 span:hover i::after 
57 {
58   content: '';
59   position: absolute;
60   top: 0;
61   left: 0;
62   width: 8px;
63   height: 2px;
64   background: #fff;
65   box-shadow: 0 60px #fff,
66   30px 60px #fff,
67   30px 0 #fff;
68 }

 

posted @ 2022-10-10 15:01  瑆箫  阅读(88)  评论(0)  编辑  收藏  举报