CSS3 动画，鼠标移上去，div 旋转、放大、缩小、移动
/* 设置基本的div样式 */
.box {
width: 100px;
height: 100px;
background-color: #f00;
margin: 50px;
transition: transform 0.5s, opacity 0.5s; /* 添加过渡效果 */
}
/* 鼠标悬停时的动画效果 */
.box:hover {
transform: rotate(360deg) scale(1.5) translateX(50px); /* 旋转、放大、移动 */
opacity: 0.5; /* 设置透明度 */
}这段代码为一个div元素添加了鼠标悬停(hover)时的动画效果。当鼠标悬停在.box元素上时，它会旋转360度，放大到1.5倍原大小，并向右移动其宽度的一半（因为translateX(50px)）。同时，透明度会变为0.5。这些变化都是平滑过渡的，由transition属性定义的持续时间是0.5秒。
评论已关闭