html正方形转变圆
时间: 2023-12-27 13:25:21 浏览: 33
以下是一个使用CSS动画将正方形转变为圆形的示例:
```html
<!DOCTYPE html>
<html>
<head>
<style>
.square {
width: 100px;
height: 100px;
background-color: red;
border-radius: 0%;
animation: move1 2s forwards;
}
@keyframes move1 {
0% {
transform: translate(0px, 0px);
border-radius: 0%;
}
50% {
transform: translate(300px, 0px);
border-radius: 0%;
}
100% {
transform: translate(300px, 0px);
border-radius: 50%;
}
}
</style>
</head>
<body>
<div class="square"></div>
</body>
</html>
```
这个示例中,我们使用CSS的`animation`属性来定义一个名为`move1`的动画。在动画的关键帧中,我们通过改变`transform`属性和`border-radius`属性来实现正方形到圆形的转变。通过将`border-radius`属性从0%变为50%,我们可以将正方形的边角变为圆形。同时,我们使用`transform`属性来改变元素的位置,使其在动画过程中移动。