不用calc函数来实现同样的效果
时间: 2023-11-11 13:04:17 浏览: 38
当然可以,我们可以使用flex布局来实现同样的效果,不需要使用calc()函数。下面是一个不使用calc()函数的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.bird {
position: relative;
width: 50px;
height: 50px;
background-color: #ffcc66;
border-radius: 50%;
animation: bird-fly 2s ease-in-out infinite alternate;
}
.circle {
position: absolute;
width: 40px;
height: 40px;
border: 2px solid #ccc;
border-radius: 50%;
animation: circle-rotate 4s linear infinite;
}
.circle1 {
top: -150px;
right: 50%;
transform: translateX(110px);
}
.circle2 {
top: calc(50% - 20px);
left: -150px;
transform: translateY(-110px);
}
.circle3 {
bottom: -150px;
right: 50%;
transform: translateX(110px);
}
@keyframes circle-rotate {
from {
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
to {
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
@keyframes bird-fly {
from {
transform: translateY(0) rotateZ(0deg);
}
to {
transform: translateY(-100px) rotateZ(360deg);
}
}
</style>
</head>
<body>
<div class="container">
<div class="bird"></div>
<div class="circle circle1"></div>
<div class="circle circle2"></div>
<div class="circle circle3"></div>
</div>
</body>
</html>
```
在上面的代码中,我们使用了flex布局来实现元素的居中和垂直居中,不需要使用calc()函数计算位置。同时,我们使用了transform属性来调整圆圈的位置和旋转效果,通过设置top、bottom、left、right等属性来调整元素的位置。其他的样式和动画效果与之前的代码相同。
注意:在使用flex布局时,需要确保浏览器支持flex布局,否则可能会出现布局问题。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![](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)