CSS3实现菜单悬停效果

零五零八

html:


   

1. <nav id="nav-1">
   
2.   <a class="link-1" href="#">Home</a>
   
3.   <a class="link-1" href="#">About</a>
   
4.   <a class="link-1" href="#">Contact</a>
   
5.   <a class="link-1" href="#">Shop</a>
   
6. </nav>
   
7. 
   
8. <nav id="nav-2">
   
9.   <a class="link-2" href="#">Home</a>
   
10.   <a class="link-2" href="#">About</a>
    
11.   <a class="link-2" href="#">Contact</a>
    
12.   <a class="link-2" href="#">Shop</a>
    
13. </nav>
    
14. 
    
15. <nav id="nav-3">
    
16.   <a class="link-3" href="#">Home</a>
    
17.   <a class="link-3" href="#">About</a>
    
18.   <a class="link-3" href="#">Contact</a>
    
19.   <a class="link-3" href="#">Shop</a>
    
20. </nav>

复制代码

css:

1. @import url(https://fonts.googleapis.com/css?family=Raleway);
   
2. body {
   
3.   margin: 0px;
   
4. }
   
5. nav {
   
6.   margin-top: 40px;
   
7.   padding: 24px;
   
8.   text-align: center;
   
9.   font-family: Raleway;
   
10.   box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
    
11. }
    
12. #nav-1 {
    
13.   background: #3fa46a;
    
14. }
    
15. #nav-2 {
    
16.   background: #5175C0;
    
17. }
    
18. #nav-3 {
    
19.   background: #EEA200;
    
20. }
    
21. 
    
22. .link-1 {
    
23.   transition: 0.3s ease;
    
24.   background: #3fa46a;
    
25.   color: #ffffff;
    
26.   font-size: 20px;
    
27.   text-decoration: none;
    
28.   border-top: 4px solid #3fa46a;
    
29.   border-bottom: 4px solid #3fa46a;
    
30.   padding: 20px 0;
    
31.   margin: 0 20px;
    
32. }
    
33. .link-1:hover {
    
34.   border-top: 4px solid #ffffff;
    
35.   border-bottom: 4px solid #ffffff;
    
36.   padding: 6px 0;
    
37. }
    
38. 
    
39. .link-2 {
    
40.   transition: 0.6s;
    
41.   color: #ffffff;
    
42.   font-size: 20px;
    
43.   text-decoration: none;
    
44.   border-right: 2px dotted transparent;
    
45.   padding: 30px 8px 0 10px;
    
46.   margin: 0 10px;
    
47. }
    
48. .link-2:hover {
    
49.   border-right: 2px dotted #ffffff;
    
50.   padding-bottom: 24px;
    
51. }
    
52. .link-3 {
    
53.   transition: 0.4s;
    
54.   color: #ffffff;
    
55.   font-size: 20px;
    
56.   text-decoration: none;
    
57.   padding: 0 10px;
    
58.   margin: 0 10px;
    
59. }
    
60. .link-3:hover {
    
61.   background-color: #ffffff;
    
62.   color: #EEA200;
    
63.   padding: 24px 10px;
    
64. }

复制代码