css样式大全

卡片hover变大动画效果

.cardContainer {

display: flex;

flex-direction: column;

background-color: #00bdab;

border: 1px solid grey;

border-radius: 5px;

padding: 25px;

cursor: pointer;

backface-visibility: hidden;

transform: translateZ(0);

transition: transform 0.25s ease-out;

}

.cardContainer:hover {

transform: scale(1.05);

}

图片常用样式

object-fit其它样式可自行查阅 ，这里的cover指的是height和width至少有一个和容器等大，意味着会有一部分内容会被截取掉

闪烁效果

animation: fade-in;

animation-duration: 1.5s;

animation-iteration-count: infinite;

旋转效果