HTML+CSS实现“卡片颜色变换效果”

如果你想让你的卡片 UI 在众多内容中脱颖而出，可以尝试这种悬停效果。卡片初始状态为灰度，当你悬停时，卡片会变成明亮的色彩，并放大显示更详细的内容。这种效果非常吸引眼球。

HTML

1. <body>
   
2.     <div class="container">
   
3.         <div class="card">
   
4.             <div class="face face1">
   
5.                 <div class="content">
   
6.                     <img src="https://github.com/Jhonierpc/WebDevelopment/blob/master/CSS%20Card%20Hover%20Effects/img/design_128.png?raw=true">
   
7.                     <h3>Design</h3>
   
8.                 </div>
   
9.             </div>
   
10.             <div class="face face2">
    
11.                 <div class="content">
    
12.                     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cum cumque minus iste veritatis provident at.</p>
    
13.                         <a href="#">Read More</a>
    
14.                 </div>
    
15.             </div>
    
16.         </div>
    
17.         <div class="card">
    
18.             <div class="face face1">
    
19.                 <div class="content">
    
20.                     <img src="https://github.com/Jhonierpc/WebDevelopment/blob/master/CSS%20Card%20Hover%20Effects/img/code_128.png?raw=true">
    
21.                     <h3>Code</h3>
    
22.                 </div>
    
23.             </div>
    
24.             <div class="face face2">
    
25.                 <div class="content">
    
26.                     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cum cumque minus iste veritatis provident at.</p>
    
27.                         <a href="#">Read More</a>
    
28.                 </div>
    
29.             </div>
    
30.         </div>
    
31.         <div class="card">
    
32.             <div class="face face1">
    
33.                 <div class="content">
    
34.                     <img src="https://github.com/Jhonierpc/WebDevelopment/blob/master/CSS%20Card%20Hover%20Effects/img/launch_128.png?raw=true">
    
35.                     <h3>Launch</h3>
    
36.                 </div>
    
37.             </div>
    
38.             <div class="face face2">
    
39.                 <div class="content">
    
40.                     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cum cumque minus iste veritatis provident at.</p>
    
41.                         <a href="#">Read More</a>
    
42.                 </div>
    
43.             </div>
    
44.         </div>
    
45.     </div>
    
46. </body>

复制代码

CSS

1. body{
   
2.     margin: 0;
   
3.     padding: 0;
   
4.     min-height: 100vh;
   
5.     background: #333;
   
6.     display: flex;
   
7.     justify-content: center;
   
8.     align-items: center;
   
9.     font-family: consolas;
   
10. }
    
11. 
    
12. .container{
    
13.     width: 1000px;
    
14.     position: relative;
    
15.     display: flex;
    
16.     justify-content: space-between;
    
17. }
    
18. 
    
19. .container .card{
    
20.     position: relative;
    
21.     cursor: pointer;
    
22. }
    
23. 
    
24. .container .card .face{
    
25.     width: 300px;
    
26.     height: 200px;
    
27.     transition: 0.5s;
    
28. }
    
29. 
    
30. .container .card .face.face1{
    
31.     position: relative;
    
32.     background: #333;
    
33.     display: flex;
    
34.     justify-content: center;
    
35.     align-items: center;
    
36.     z-index: 1;
    
37.     transform: translateY(100px);
    
38. }
    
39. 
    
40. .container .card:hover .face.face1{
    
41.     background: #ff0057;
    
42.     transform: translateY(0);
    
43. }
    
44. 
    
45. .container .card .face.face1 .content{
    
46.     opacity: 0.2;
    
47.     transition: 0.5s;
    
48. }
    
49. 
    
50. .container .card:hover .face.face1 .content{
    
51.     opacity: 1;
    
52. }
    
53. 
    
54. .container .card .face.face1 .content img{
    
55.     max-width: 100px;
    
56. }
    
57. 
    
58. .container .card .face.face1 .content h3{
    
59.     margin: 10px 0 0;
    
60.     padding: 0;
    
61.     color: #fff;
    
62.     text-align: center;
    
63.     font-size: 1.5em;
    
64. }
    
65. 
    
66. .container .card .face.face2{
    
67.     position: relative;
    
68.     background: #fff;
    
69.     display: flex;
    
70.     justify-content: center;
    
71.     align-items: center;
    
72.     padding: 20px;
    
73.     box-sizing: border-box;
    
74.     box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
    
75.     transform: translateY(-100px);
    
76. }
    
77. 
    
78. .container .card:hover .face.face2{
    
79.     transform: translateY(0);
    
80. }
    
81. 
    
82. .container .card .face.face2 .content p{
    
83.     margin: 0;
    
84.     padding: 0;
    
85. }
    
86. 
    
87. .container .card .face.face2 .content a{
    
88.     margin: 15px 0 0;
    
89.     display:  inline-block;
    
90.     text-decoration: none;
    
91.     font-weight: 900;
    
92.     color: #333;
    
93.     padding: 5px;
    
94.     border: 1px solid #333;
    
95. }
    
96. 
    
97. .container .card .face.face2 .content a:hover{
    
98.     background: #333;
    
99.     color: #fff;
    
100. }

复制代码