仅用css和html制作简单动画

程序员文章站 2024-01-18 22:10:34

...

<!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;
}

仅用css和html制作简单动画

仅用css和html制作简单动画

html，css制作动画效果

分享用CSS3伪元素和html制作一个发光的边框实例代码

使用HTML+CSS制作加载动画

问一个简单的css滚动条宽度兼容IE7和IE6的问题._html/css_WEB-ITnose

css3 animation和background-position制作动画效果（animation steps）

css3的基础用法，新手必看哈（还有css3和jquery动画的对比）_html/css_WEB-ITnose

使用HTML CSS制作简易三角形和旗帜

如何利用html和css来实现注册表单的简单实例

一款利用html5和css3动画排列人物头像的实例演示