css3鼠标移出效果

CSS3鼠标移出效果是指在鼠标移出指定元素时，可以触发一些动画效果。下面我们将介绍一些常见的CSS3鼠标移出效果。

/* 1、渐变过渡效果 */
.Box {
    background: linear-gradient(to left,#000,#fff);
    transition: all .5s;
}
.Box:hover {
    background: linear-gradient(to right,#fff);
}

/* 2、缩放放大效果 */
.Box {
    transform: scale(1);
    transition: all .5s;
}
.Box:hover {
    transform: scale(1.2);
}

/* 3、旋转效果 */
.Box {
    transform: rotate(0deg);
    transition: all .5s;
}
.Box:hover {
    transform: rotate(360deg);
}

/* 4、模糊效果 */
.Box {
    filter: blur(0);
    transition: all .5s;
}
.Box:hover {
    filter: blur(3px);
}

/* 5、透明度效果 */
.Box {
    opacity: 1;
    transition: all .5s;
}
.Box:hover {
    opacity: 0.8;
}

以上是常见的CSS3鼠标移出效果示例。通过添加CSS3动画效果，可以增加页面交互性，使网站更加生动有趣。