HTML+CSS前端简单卡片动态效果

一、创意效果介绍

当鼠标指针停在卡片上会有变色效果，点击还会有震动效果

二、效果视频

HTML+CSS前端简单卡片动态效果

三、设计代码

（1）HTML

          简单卡片                                                                                                                                                                                                                                                                                                                                              
Education
                                        
Credentialing
                                        
Wallet
                                        
Human Resources
          

（2）CSS

body {  background: #f2f4f8;  display: flex;  justify-content: space-around;  align-items: center;  flex-wrap: wrap;  height: 100vh;  font-family: "Open Sans";}.education {  --bg-color: #ffd861;  --bg-color-light: #ffeeba;  --text-color-hover: #4c5656;  --box-shadow-color: rgba(255, 215, 97, 0.48);}.credentialing {  --bg-color: #b8f9d3;  --bg-color-light: #e2fced;  --text-color-hover: #4c5656;  --box-shadow-color: rgba(184, 249, 211, 0.48);}.wallet {  --bg-color: #ceb2fc;  --bg-color-light: #f0e7ff;  --text-color-hover: #fff;  --box-shadow-color: rgba(206, 178, 252, 0.48);}.human-resources {  --bg-color: #dce9ff;  --bg-color-light: #f1f7ff;  --text-color-hover: #4c5656;  --box-shadow-color: rgba(220, 233, 255, 0.48);}.card {  width: 220px;  height: 321px;  background: #fff;  border-top-right-radius: 10px;  overflow: hidden;  display: flex;  flex-direction: column;  justify-content: center;  align-items: center;  position: relative;  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.04);  transition: all 0.3s ease-out;  text-decoration: none;}.card:hover {  transform: translateY(-5px) scale(1.005) translateZ(0);  box-shadow: 0 24px 36px rgba(0, 0, 0, 0.11),    0 24px 46px var(--box-shadow-color);}.card:hover .overlay {  transform: scale(4) translateZ(0);}.card:hover .circle {  border-color: var(--bg-color-light);  background: var(--bg-color);}.card:hover .circle:after {  background: var(--bg-color-light);}.card:hover p {  color: var(--text-color-hover);}.card:active {  transform: scale(1) translateZ(0);  box-shadow: 0 15px 24px rgba(0, 0, 0, 0.11),    0 15px 24px var(--box-shadow-color);}.card p {  font-size: 17px;  color: #4c5656;  margin-top: 30px;  z-index: 1000;  transition: color 0.3s ease-out;}.circle {  width: 131px;  height: 131px;  border-radius: 50%;  background: #fff;  border: 2px solid var(--bg-color);  display: flex;  justify-content: center;  align-items: center;  position: relative;  z-index: 1;  transition: all 0.3s ease-out;}.circle:after {  content: "";  width: 118px;  height: 118px;  display: block;  position: absolute;  background: var(--bg-color);  border-radius: 50%;  top: 7px;  left: 7px;  transition: opacity 0.3s ease-out;}.circle svg {  z-index: 10000;  transform: translateZ(0);}.overlay {  width: 118px;  position: absolute;  height: 118px;  border-radius: 50%;  background: var(--bg-color);  top: 70px;  left: 50px;  z-index: 0;  transition: transform 0.3s ease-out;}