0

У меня есть 2 элемента: белый круг и отдельно вращающаяся рамка вокруг него. Проблема с выравниванием и анимацией. Сначала я вложил круг в рамку и центрировал при помощи flex. Далее мне нужно было создать анимацию вращения рамки вокруг круга. собственно конструкция была таковой

body {
    overflow: hidden;
}

.bl-fon {
    position: absolute;
    margin: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #030029;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.but-start{
    position: absolute;
    color: blue;
    background: white;
    font-size: 20px;
    padding: 3em;

    border-radius: 50%;
    width: 5em;
    height: 5em;
    display: flex;
    flex-direction: column;
    justify-content: center;

    /*left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);*/
}

.border {
    width: 15.5em;
    height: 15.5em;
    /*padding: 3.5em;*/
    border: 5px aquamarine dashed;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    animation-name: rotation;
    animation-duration: 15s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;

    /*position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);*/
}

@keyframes rotation {
    0% {
        transform:rotate(0deg);
    }
    100% {
        transform:rotate(360deg);
    }
}
<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="node1.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title id="title">С днём рождения!</title>
</head>
<body>
    <div> <!-- изначальная превьюшка -->
        <div class="bl-fon">
                <div class="border" id="border">
                    <div class="but-start">
                        <div style="text-align: center;">Начать</div>
                    </div>
                </div>
        </div>
    </div>
</body>
</html>

однако как бы надпись вращается вместе с рамкой. И тогда у меня возникло 2 идеи: 1) запустить вращение надписи в обратном порядке 2) достать вложенный элемент и центрировать без flex однако почему-то при центрировании без анимации, он ровно встает в центр, а с анимацией смещается. для центрирования использовал:

position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);

открыл в браузере и увидел что рамка смещена, открыл код в браузере и выключил строки отвечающие за анимацию, и тогда она встала нормально. Вот конечный код в котором они выравнены независимо друг от друга.

body {
    overflow: hidden;
}

.bl-fon {
    position: absolute;
    margin: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #030029;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.but-start{
    position: absolute;
    color: blue;
    background: white;
    font-size: 20px;
    padding: 3em;

    border-radius: 50%;
    width: 5em;
    height: 5em;
    /*display: flex;
    flex-direction: column;
    justify-content: center;*/
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.border {
    width: 15.5em;
    height: 15.5em;
    /*padding: 3.5em;*/
    border: 5px aquamarine dashed;
    border-radius: 50%;
    /*display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;*/
    
    animation-name: rotation;
    animation-duration: 15s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;

    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
}

@keyframes rotation {
    0% {
        transform:rotate(0deg);
    }
    100% {
        transform:rotate(360deg);
    }
}
<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="node1.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title id="title">С днём рождения!</title>
</head>
<body>
    <div> <!-- изначальная превьюшка -->
        <div class="bl-fon">
                

                    <div class="but-start">
                        <div style="text-align: center;">Начать</div>
                    </div>
                    <div class="border" id="border">
                    </div>
        </div>
    </div>
</body>
</html>

Просьба. Либо скажите как мне сделать так чтобы вложенный элемент не вращался, либо в чем прикол смещения при анимации

1
  • Вы бы язык указали. 28 мая 2022 в 8:32

2 ответа 2

0

Лишние стили убрал

        body {
    overflow: hidden;
}

.bl-fon {
    width: 100%;
    height: 400px;
    background: #030029;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.but-start{
    color: blue;
    background: white;
    font-size: 20px;
    padding: 3em;

    border-radius: 50%;
    width: 5em;
    height: 5em;
    /*display: flex;
    flex-direction: column;
    justify-content: center;*/
}

.border {
    width: 15.5em;
    height: 15.5em;
    /*padding: 3.5em;*/
    border: 5px aquamarine dashed;
    border-radius: 50%;
    /*display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;*/
    
    animation-name: rotation;
    animation-duration: 15s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;

    position: absolute;
}

@keyframes rotation {
    0% {
        transform:rotate(0deg);
    }
    100% {
        transform:rotate(360deg);
    }
}
<div> <!-- изначальная превьюшка -->
        <div class="bl-fon">
                

                    <div class="but-start">
                        <div style="text-align: center;">Начать</div>
                    </div>
                    <div class="border" id="border">
                    </div>
        </div>
    </div>

0

Потому что в анимации в transform вы указываете только rotate. И это перекрывает translateX(-50%) translateY(-50%) в основном классе.

Просто добавьте translate в анимацию:

@keyframes rotation {
    0% {
        transform: translateX(-50%) translateY(-50%) rotate(0deg);
    }
    100% {
        transform: translateX(-50%) translateY(-50%) rotate(360deg);
    }
}

Правда если использовать такое позиционирование, то flex в родительском блоке не нужен.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.