仅用css和html制作简单动画

最新推荐文章于 2022-06-11 21:15:00 发布

AleisurE

最新推荐文章于 2022-06-11 21:15:00 发布

阅读量273

点赞数

分类专栏： web学习文章标签： animation css

本文链接：https://blog.csdn.net/theLaziestboy/article/details/115340299

版权

web学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ex3-2</title>
    <link rel="stylesheet" href="css/ex-2.css">
</head>
<body>
    <div class="loader1">
        <div class="loading_1">
            <i></i>
            <i></i>
            <i></i>
        </div>


    </div>
    <div class="loader2">
        <div class="loading">
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
        </div>
    </div>



</body>
</html>

/*动画1*/
.loading_1{
    position:relative;
}
.loading_1 i{
    display: block;
    border-radius: 50%;
    background: #333;
    width:60px;
    height:60px;
    position:absolute;
    left:0;
    top:0;
    opacity: 0;
}

@keyframes loading_1 {
    0%{
        -webkit-transform: scale(0);
           -moz-transform: scale(0);
            -ms-transform: scale(0);
             -o-transform: scale(0);
                transform: scale(0);
                opacity:  0;
    }
    50%{
        opacity: 1;
    }
    100%{
        -webkit-transform: scale(1);
           -moz-transform: scale(1);
            -ms-transform: scale(1);
             -o-transform: scale(1);
                transform: scale(1);
                opacity:  0;
    }
}

.loading_1 i:nth-child(1){
    animation: loading_1 1s linear 0s infinite;
}
.loading_1 i:nth-child(2){
    animation: loading_1 1s linear 0.2s infinite;
}
.loading_1 i:nth-child(3){
    animation: loading_1 1s linear 0.4s infinite;
}


/*动画2*/
.loading{
    position: relative;
}
.loading i{
    display:block;
    width:15px;
    height:15px;
    border-radius:50%;
    background-color:#333;
    position:absolute;
}

@keyframes loading{
    50%{
        transform:scale(0.4);
        opacity:0.3;
    }
    100%{
        transform: scale(1);
        opacity: 1;
    }
}

.loading i:nth-child(1){
    top:25px;
    left:0;
    animation:loading 1s ease 0s infinite;
}
.loading i:nth-child(2){
    top:17px;
    left:17px;
    animation: loading 1s ease -0.12s infinite;
}
.loading i:nth-child(3){
    top:0;
    left:25px;
    animation: loading 1s ease -0.24s infinite;
}
.loading i:nth-child(4){
    top:-17px;
    left:17px;
    animation: loading 1s ease -0.36s infinite;
}
.loading i:nth-child(5){
    top:-25px;
    left:0;
    animation: loading 1s ease -0.48s infinite;
}
.loading i:nth-child(6){
    top:-17px;
    left:-17px;
    animation: loading 1s ease -0.6s infinite;
}
.loading i:nth-child(7){
    top:0;
    left:-25px;
    animation: loading 1s ease -0.72s infinite;
}

.loading i:nth-child(8){
    top:17px;
    left:-17px;
    animation: loading 1s ease -0.84s infinite;
}

.loader2{
    width: 400px;
    height: 400px;
    margin: auto;
    border:1px solid #ddd;
    box-sizing: border-box;
    display:flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

AleisurE

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
仅用css和html制作简单动画

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>ex3-2</title> <link rel="stylesheet" href="css/ex-2.css"></head><body> <div class="loader1"> <div
复制链接

扫一扫

专栏目录