Animations - Githubissues

goldEli commented 4 years ago

CSS3 Animations 属性有什么用？
利用 Animations 画一个 loading 图标（效果如下），并附上代码。

ezgif com-video-to-gif(1)

lurasso commented 4 years ago

Animations用于创建简单的页面动画效果，提高用户交互

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            height: 200px;
            width: 300px;
            border: solid 1px brown;
            float: left;
        }
        #ball1{
            display: inline-block;
            position: relative;
            left: 50px;
            top: 50px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: rgba(229, 226, 226, 0.979);
            animation: movingBall 1s linear infinite normal ,
            colorChange 1s  infinite;

        }
        @keyframes movingBall{
            0% {top:50px;left: 50px;}
            25% {top:70px;left: 50pxx;}
            50% {top:90px;left: 50px;}
            75% {top:70px;left: 50px;}
            100% {top:50px;left: 50px;}
        }

        #ball2{
            display: inline-block;
            position: relative;
            left: 60px;
            top: 50px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: rgba(229, 226, 226, 0.979);
            animation: movingBall2 1s linear 0.25s infinite normal,
            colorChange 1s ease infinite ;

        }
        @keyframes movingBall2{
            0% {top:50px;left: 60px;}
            25% {top:70px;left: 60px;}
            50% {top:90px;left: 60px;}
            75% {top:70px;left: 60px;}
            100% {top:50px;left: 60px;}
        }
        #ball3{
            display: inline-block;
            position: relative;
            left: 70px;
            top: 50px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: rgba(229, 226, 226, 0.979);
            animation: movingBall3 1s linear 0.5s infinite normal,
            colorChange 1s ease infinite;

        }
        @keyframes movingBall3{
            0% {top:50px;left: 70px;}
            25% {top:70px;left: 70pxx;}
            50% {top:90px;left: 70px;}
            75% {top:70px;left: 70px;}
            100% {top:50px;left: 70px;}
        }

        @keyframes colorChange{
            0% {background-color: rgb(207, 203, 203);}
            25% {background-color: rgb(179, 174, 174);}
            50% {background-color: rgb(160, 155, 155);}
            75% {background-color: rgb(160, 153, 153);}
            100% {background-color: rgba(229, 226, 226, 0.979);}
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="ball1"></div>
        <div id="ball2"></div>
        <div id="ball3"></div>

    </div>
</body>

FireDragonZL commented 4 years ago

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业</title>
    <style>
        .root {
            width: 200px;
            height: 150px;
            background-color: pink;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .ball01 {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: darkgray;

            animation-name: color_change;
            animation-duration: 0.6s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }
        .ball02 {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: darkgray;

            animation-name: color_change;
            animation-duration: 0.6s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
            animation-delay: 0.2s;
        }
        .ball03 {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: darkgray;

            animation-name: color_change;
            animation-duration: 0.6s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
            animation-delay: 0.4s;
        }

        @keyframes color_change {
            0%{opacity: 1;transform: translateY(0);}
            100%{opacity: 0.2;transform: translateY(-32px);}
        }

    </style>
</head>
<body>
    <!--
        animation-name: 动画名称
        animation-duration: 运动时长
        animation-iteration-count: 循环次数
        animation-direction: 运行方向
        animation-delay: 动画延迟
        opacity：透明度
        transform:translateY()：在Y轴上移动
    -->
    <div class="root">
        <div class="ball01"></div>
        <div class="ball02"></div>
        <div class="ball03"></div>
    </div>
</body>
</html>

748580573 commented 4 years ago

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>animation</title>
    <style>

        .circle1{
            width: 30px;
            height: 30px;
            border-radius: 15px;
            background-color: red;
            position: relative;
            animation: move1 1s linear;
            animation-iteration-count:infinite;
            animation-direction:normal;
            float: left;
        }

        .circle2{
            width: 30px;
            height: 30px;
            border-radius: 15px;
            background-color: red;
            position: relative;
            animation: move2 1s linear 0.2s;
            animation-iteration-count:infinite;
            animation-direction:alternate;
            float: left;
            margin-left: 15px;
        }

        .circle3{
            width: 30px;
            height: 30px;
            border-radius: 15px;
            background-color: red;
            position: relative;
            animation: move3 1s linear 0.4s;
            animation-iteration-count:infinite;
            animation-direction:alternate;
            float: left;
            margin-left: 15px;
        }
        @keyframes move1 {
            0% {top: 0px;}
            250% {top: 10px;}
            50% {top: 20px;background-color: red;}
            75% {top: 10px;}
            100% {top: 0px;background-color: #d08f8f;}

        }

        @keyframes move2 {
            0% {top: 0px;}
            250% {top: 10px;}
            50% {top: 20px;background-color: red;}
            75% {top: 10px;background-color: red;}
            100% {top: 0px;background-color: #d08f8f;}

        }

        @keyframes move3 {
            0% {top: 0px;}
            250% {top: 10px;}
            50% {top: 20px;background-color: red;}
            75% {top: 10px;}
            100% {top: 0px;background-color: #d08f8f;}

        }

    </style>
</head>
<body>
    <div class="circle1"></div>
    <div class="circle2"></div>
    <div class="circle3"></div>
</body>
</html>

748580573 commented 4 years ago

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>animation</title>
    <style>

        .circle1{
            width: 30px;
            height: 30px;
            border-radius: 15px;
            background-color: red;
            position: relative;
            animation: move1 1s linear;
            animation-iteration-count:infinite;
            animation-direction:normal;
            float: left;
        }

        .circle2{
            width: 30px;
            height: 30px;
            border-radius: 15px;
            background-color: red;
            position: relative;
            animation: move2 1s linear 0.2s;
            animation-iteration-count:infinite;
            animation-direction:alternate;
            float: left;
            margin-left: 15px;
        }

        .circle3{
            width: 30px;
            height: 30px;
            border-radius: 15px;
            background-color: red;
            position: relative;
            animation: move3 1s linear 0.4s;
            animation-iteration-count:infinite;
            animation-direction:alternate;
            float: left;
            margin-left: 15px;
        }
        @keyframes move1 {
            0% {top: 0px;}
            250% {top: 10px;}
            50% {top: 20px;background-color: red;}
            75% {top: 10px;}
            100% {top: 0px;background-color: #d08f8f;}

        }

        @keyframes move2 {
            0% {top: 0px;}
            250% {top: 10px;}
            50% {top: 20px;background-color: red;}
            75% {top: 10px;background-color: red;}
            100% {top: 0px;background-color: #d08f8f;}

        }

        @keyframes move3 {
            0% {top: 0px;}
            250% {top: 10px;}
            50% {top: 20px;background-color: red;}
            75% {top: 10px;}
            100% {top: 0px;background-color: #d08f8f;}

        }

    </style>
</head>
<body>
    <div class="circle1"></div>
    <div class="circle2"></div>
    <div class="circle3"></div>
</body>
</html>

goldEli / Front-End-Training

Animations #34