设为首页收藏本站
切换到窄版

爬行的蜗牛

 找回密码
 立即注册

QQ登录

只需一步，快速开始

搜索
热搜: golang Linux PHP
爬行的蜗牛»论坛 › 个人专用 › 其他相关知识 › HTML+CSS › HTML+CSS实现“卡片颜色变换效果”
返回列表 发新帖
查看: 171|回复: 0

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

[复制链接]
yycvip

152

主题

48

回帖

1137

积分

管理员

积分
1137
发表于 2024-11-23 19:03:12 | 显示全部楼层 |阅读模式

111.gif

如果你想让你的卡片 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. }

  12. .container{
  13.     width: 1000px;
  14.     position: relative;
  15.     display: flex;
  16.     justify-content: space-between;
  17. }

  19. .container .card{
  20.     position: relative;
  21.     cursor: pointer;
  22. }

  24. .container .card .face{
  25.     width: 300px;
  26.     height: 200px;
  27.     transition: 0.5s;
  28. }

  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. }

  40. .container .card:hover .face.face1{
  41.     background: #ff0057;
  42.     transform: translateY(0);
  43. }

  45. .container .card .face.face1 .content{
  46.     opacity: 0.2;
  47.     transition: 0.5s;
  48. }

  50. .container .card:hover .face.face1 .content{
  51.     opacity: 1;
  52. }

  54. .container .card .face.face1 .content img{
  55.     max-width: 100px;
  56. }

  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. }

  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. }

  78. .container .card:hover .face.face2{
  79.     transform: translateY(0);
  80. }

  82. .container .card .face.face2 .content p{
  83.     margin: 0;
  84.     padding: 0;
  85. }

  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. }

  97. .container .card .face.face2 .content a:hover{
  98.     background: #333;
  99.     color: #fff;
  100. }
复制代码


回复

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表