[分享]css3动画鼠标跟随事件

CSS3动画的应用越来越广泛，其中鼠标跟随事件更多的被应用在网页设计中。在css3中，我们可以使用transform属性和transition属性来实现鼠标跟随动画效果。/将鼠标跟随元素设置为透明，以...

CSS3动画的应用越来越广泛，其中鼠标跟随事件更多的被应用在网页设计中。在css3中，我们可以使用transform属性和transition属性来实现鼠标跟随动画效果。

/*将鼠标跟随元素设置为透明，以便后面看到效果*/
#follow{
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: #0acf97;
    border-radius: 50%;
    opacity: 0;
}

/*动画效果*/
#main:hover #follow{
    opacity: 1;
    transition: all 0.4s ease-out;
    transform: scale(1.2) rotate(45deg);
} 

代码说明：

position: absolute;将元素定位为绝对位置，以便在跟随鼠标时不会改变布局。

width: 100px;height: 100px;设置元素的宽和高。

background-color: #0acf97;设置元素的背景颜色。

border-radius: 50%;设置元素的圆角半径。

opacity: 0;设置元素的透明度为0，以便在后面看到动画效果。

transition: all 0.4s ease-out;设置元素的动画效果，all表示所有属性都要动画，0.4s表示动画时间为0.4秒，ease-out表示动画缓动效果。

transform: scale(1.2) rotate(45deg);设置元素的缩放和旋转效果，scale(1.2)表示元素缩放1.2倍，rotate(45deg)表示元素旋转45度。

在hover状态下，设置元素透明度为1，即显示元素，同时将元素缩放和旋转，实现鼠标跟随效果。