当前位置：网站首页>Animate the box in the middle and 100px to the left and right of the browser

Animate the box in the middle and 100px to the left and right of the browser

2022-07-22 09:37:00 【Mom said that if the name is too long, hiding behind the tree w】

Let's do a simple animation today , Found that she did not know where to start , So write an article to say

error ：

1. I don't know how to start

（1） You should know the status position and End state position

（2） You should know animation and Excessive first acquaintance and The end attribute is consistent

2. I don't know how to use a single attribute to make the box on the right

3. The initial and end attributes of the animation are inconsistent , The animation doesn't respond

Catalog

1. The box is vertically centered

（1） Absolute positioning

（2）transform: translateY

2. The box is to the left of the browser 100px

（1） Absolute positioning

3. Keep the box to the right of the browser 100px

（1） Absolute positioning

Or add translation , Company % The width of is relative to itself

（3）. Add left and right to the initial and end states of the animation

All the code ：

1. The box is vertically centered

Relative positioning of parent box , Sub box absolute positioning , From the top 50%

  position: absolute;
            top: 50%;

But the position is not centered , And half the height of the box , There are two ways

（1） Absolute positioning

according to calc( ) Dynamic computing

 transform: translateY(-50%);

（2）transform: translateY

2D Translate half its height Company % The height of is relative to itself

 transform: translateY(-50%);

（3）margin—— It is not recommended to use （ So don't write ）

2. The box is to the left of the browser 100px

Relative positioning of parent box , Sub box absolute positioning , From the left 100px

（1） Absolute positioning

 left: 100px;

（2）transform: translateX（ It is inconvenient to calculate the right side only by translation ）

3. Keep the box to the right of the browser 100px

Relative positioning of parent box , Sub box absolute positioning , To the right 100px

（1） Absolute positioning

But because of the initial state of the animation css attribute , And the initial state of the label css attribute , Consistent with the animation state end attribute

So there's no need to right

 right: 100px;

according to calc( ) Dynamic computing First let the box run to the far right and subtract the box itself （ Width +100px)

    left: calc(100% - 200px);

Or add translation , Company % The width of is relative to itself

    left: calc(100% - 200px);
    transform: translateX(-100%);

（3）. Add left and right to the initial and end states of the animation

        @keyframes move {
            0% {
                left: 100px;
                background-color: darksalmon;
            }

            100% {
                left: calc(100% - 200px);
                background-color: dodgerblue;
            }
        }

All the code ：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        section {
            width: 100%;
            height: 900px;
            background-color: lightblue;
            position: relative;
        }

        .box {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 100px;
            animation: move 5s linear 0s infinite alternate forwards;
        }

        @keyframes move {
            0% {
                left: 100px;

                background-color: darksalmon;
            }

            100% {
                left: calc(100% - 200px);

                background-color: dodgerblue;
            }
        }
    </style>
</head>

<body>
    <section>
        <div class="box"></div>
    </section>
</body>

</html>

原网站

版权声明
本文为[Mom said that if the name is too long, hiding behind the tree w]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/203/202207211801215265.html