CSS三个圆过渡效果,可以通过CSS3的transition属性轻松实现。下面我们来看看三种不同的过渡效果: .circle { width: 50px; height: 50px; border-r
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秒。
粉丝
0
关注
0
收藏
0