css三个圆过渡效果

CSS三个圆过渡效果，可以通过CSS3的transition属性轻松实现。下面我们来看看三种不同的过渡效果：

 .circle {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: #333;
        transition: all 0.5s;
    }
    .circle:hover {
        transform: scale(1.5);
    } 

上面的代码实现了鼠标悬停时圆形放大的过渡效果。我们定义了一个大小为50px的圆形，然后在:hover时使用CSS的transform属性将圆形放大1.5倍。transition属性指定了动画效果持续0.5秒。

 .circle {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: #333;
        transition: all 0.5s;
    }
    .circle:hover {
        transform: rotate(360deg);
    } 

上面的代码实现了鼠标悬停时圆形旋转的过渡效果。我们定义了一个大小为50px的圆形，然后在:hover时使用CSS的transform属性将圆形绕着中心轴旋转360度。同样，transition属性指定了动画效果持续0.5秒。

 .circle {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: #333;
        transition: all 0.5s;
    }
    .circle:hover {
        background-color: #f00;
    } 

上面的代码实现了鼠标悬停时圆形颜色渐变的过渡效果。我们定义了一个大小为50px的圆形，背景色为深灰色。在:hover时将圆形的背景色改为红色，transition属性指定了动画效果持续0.5秒。