大屏css围绕中心点旋转动画
时间: 2023-07-24 17:06:27 浏览: 124
要实现大屏围绕中心点旋转的动画,你可以使用CSS的`@keyframes`规则和`transform`属性。下面是一个示例代码:
HTML:
```html
<div class="container">
<div class="screen"></div>
</div>
```
CSS:
```css
.container {
position: relative;
width: 400px;
height: 400px;
border: 2px solid #000;
margin: 0 auto;
overflow: hidden;
}
.screen {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
background-color: #f00;
transform: translate(-50%, -50%);
animation: rotate 5s linear infinite;
}
@keyframes rotate {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
```
在上面的代码中,我们创建了一个名为`container`的容器,宽度和高度为400px,并设置了边框。然后,我们在容器内部创建了一个名为`screen`的元素,宽度和高度为200px,并设置了背景颜色为红色。通过设置`position: absolute; top: 50%; left: 50%;`使得屏幕元素居中显示,并使用`transform: translate(-50%, -50%);`微调其位置。
接下来,在`@keyframes`规则中定义了一个名为`rotate`的动画,从0%到100%的过程中,使用`transform: translate(-50%, -50%) rotate(0deg);`到`transform: translate(-50%, -50%) rotate(360deg);`实现旋转效果。最后,将该动画应用到屏幕元素上通过`animation: rotate 5s linear infinite;`。
这样,屏幕元素就会围绕容器的中心点进行旋转动画了。你可以根据需要调整容器和屏幕元素的尺寸和样式。
阅读全文