[分享]css3手机加载动画效果

CSS3手机加载动画效果CSS3是一种用来描述网页样式的语言，它可以实现丰富的动画效果，其中包括手机加载动画效果。使用CSS3来实现手机加载动画效果非常简单，以下是一个简单的代码示例。.loader ...

CSS3手机加载动画效果

CSS3是一种用来描述网页样式的语言，它可以实现丰富的动画效果，其中包括手机加载动画效果。使用CSS3来实现手机加载动画效果非常简单，以下是一个简单的代码示例。

.loader {
    margin: 0 auto;
    width: 40px;
    height: 40px;
}

.loader:before,
.loader:after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    animation: loader-rotate 2s linear infinite;
}

.loader:before {
    top: 0;
    left: 12px;
}

.loader:after {
    bottom: 0;
    left: 12px;
}

@keyframes loader-rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
} 

代码中的.loader类定义了一个容器元素，用来包含两个圆形元素创建出的加载动画。这两个圆形元素由伪元素:before和:after创建，使用绝对定位使它们分别在整个容器的顶部和底部居中显示。使用border-radius属性可以创建出圆形，背景色为白色。通过animation属性指定了一个名称为loader-rotate的关键帧动画，这个动画实现了圆形元素做旋转的效果。整个动画会持续2秒，线性无限循环。

以上就是一个简单的CSS3手机加载动画效果，仿佛恍若初见，实际上也并不复杂，希望大家可以借此了解到CSS3的实际应用。