[分享]Css3放上去手的样子

CSS3放上去手的样子

/* 以下是CSS3放大缩小动画 */
.zoom {
    transition: transform 0.2s; /* 使用过渡动画，延时0.2秒 */
}

.zoom:hover {
    transform: scale(1.2); /* 鼠标悬停时放大1.2倍 */
}

/* 以下是CSS3透明度动画 */
.fade {
    opacity: 0.5; /* 初始透明度为0.5 */
    transition: opacity 0.2s; /* 使用过渡动画，延时0.2秒 */
}

.fade:hover {
    opacity: 1; /* 鼠标悬停时完全不透明 */
}

/* 以下是CSS3旋转动画 */
.rotate {
    transition: transform 0.2s; /* 使用过渡动画，延时0.2秒 */
}

.rotate:hover {
    transform: rotate(180deg); /* 鼠标悬停时旋转180度 */
}

/* 以下是CSS3边框动画 */
.border {
    border-width: 10px; /* 初始边框宽度10像素 */
    transition: border-width 0.2s; /* 使用过渡动画，延时0.2秒 */
}

.border:hover {
    border-width: 20px; /* 鼠标悬停时边框宽度增加到20像素 */
} 

上面的代码展示了一些CSS3常用的放大缩小、透明度、旋转以及边框动画。只需要将相应的类名添加到HTML元素中，就可以轻松地实现这些动画。