css3 动画正方形变圆形
时间: 2024-08-12 14:09:34 浏览: 29
CSS3 动画可以让元素从正方形逐渐变为圆形,这通常通过 CSS `transform` 和 `transition` 属性结合使用来实现。以下是创建这种效果的一个例子:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.square {
width: 100px;
height: 100px;
background-color: red;
position: relative;
transition: all 1s ease;
}
.circle {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: blue;
}
.transform-square-to-circle {
animation: transform-circle 2s infinite;
}
@keyframes transform-circle {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="square transform-square-to-circle" onclick="this.classList.add('circle')"></div>
</body>
</html>
```
在这个示例中,我们首先定义了一个正方形 `.square` 和一个初始状态为圆形的 `.circle` 类。`.transform-square-to-circle` 类应用了一个名为 `transform-circle` 的关键帧动画,该动画会逐渐旋转元素(从0度到360度),模拟从正方形到圆形的过程。
当用户点击 `.square` 时,给它添加 `.circle` 类,使其过渡到圆形状态。`transition` 属性设置了动画的时间(这里是1秒)和缓动效果。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://img-home.csdnimg.cn/images/20210720083646.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)