<div class="layui-row" id="img-container"></div>在这里面写一个图片加载时候转圈圈的效果
时间: 2023-10-06 17:05:12 浏览: 115
element中el-container容器与div布局区分详解
可以采用CSS3动画实现加载时旋转的效果,代码如下:
```html
<div class="layui-row" id="img-container">
<div class="loading"></div>
<img src="your-image-url" alt="">
</div>
```
```css
#img-container {
position: relative;
}
.loading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 4px solid rgba(0, 0, 0, 0.1);
border-top-color: #1E9FFF;
border-radius: 50%;
width: 30px;
height: 30px;
animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
```
这里的 `#img-container` 是图片容器的 ID,`.loading` 是旋转圆圈的样式类,`spin` 是旋转动画的样式类。其中,`loading` 元素使用了 `position: absolute` 定位在图片容器的中心,设置边框颜色、宽度、高度、圆角等属性,并使用 `animation` 属性指定旋转动画及其参数。最后,通过 CSS3 的 `@keyframes` 规则定义动画的关键帧,使其无限循环旋转。
注意:这里的样式需要结合 layui 框架使用,如果没有引入 layui,需要自行调整样式。
阅读全文