html+css实现加载动画特效

最新推荐文章于 2024-04-17 11:34:06 发布

IABQL

最新推荐文章于 2024-04-17 11:34:06 发布

阅读量283

点赞数 1

分类专栏： html 文章标签： css 动画 html

本文链接：https://blog.csdn.net/qq_48078182/article/details/120276511

版权

html 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
    margin: 0;
    padding: 0;
}
body{
    /*居中显示*/
    display: flex;
    align-items: center;
    justify-content: center;
    /*100vh就是设置高度与屏幕高度一致*/
    height: 100vh;
}

.loading{
    position: relative;
    width: 150px;
    height: 150px;
    /*只需要一条边显现*/
    /*将其它边设置透明*/
    border: 3px solid transparent;
    /*显示顶部边*/
    border-top-color:#9370db;
    border-radius: 50%;
/*rotate:自定义变化效果  4.5s时长  linear：匀速   infinite：无限循环*/
    animation: rotate 4.5s linear infinite;
}
.loading::before{
    content: '';
    position: absolute;
    top: 5px;
    right: 5px;
    bottom: 5px;
    left: 5px;
    border: 3px solid transparent;
    /*显示顶部边*/
    border-top-color:#ba55d3;
    border-radius: 50%;
    animation: rotate 3s linear infinite;
}
.loading::after{
    content: '';
    position: absolute;
    top: 15px;
    right: 15px;
    bottom: 15px;
    left: 15px;
    border: 3px solid transparent;
    /*显示顶部边*/
    border-top-color:#f0f;
    border-radius: 50%;
    /*1.5s时长  linear：匀速   infinite：无限循环*/
    animation: rotate 1.5s linear infinite;
}
/*定义动画*/
@keyframes rotate {
    0%{
        transform: rotate(0);
    }
    100%{
        /*顺时针转360*/
        transform: rotate(360deg);
    }
}
    </style>
</head>
<body>
<div class="loading"></div>
</body>
</html>

IABQL

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
html+css实现加载动画特效

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0;}body{ /*居中显示*/ display: flex; align-items: cente...
复制链接

扫一扫