小编Arc*_*ezi的帖子

我试图解决从右到左扩展div的宽度和从下到上的不同容器的高度的问题.我正在尝试创建将在正方形旋转的CSS动画,并且模仿此处的边框是指向我的CodePen的链接https://codepen.io/Archezi/pen/xReqvq?editors=0100如果有帮助的话.

这是我的HTML .container是一个主要的包装器.circle是一个动画line1-line4是正方形的边框,我正在尝试动画.

<div class="container">
    <div class="circle "></div>
    <div class="line1  "></div>
    <div class="line2  "></div>
    <div class="line3  "></div>
    <div class="line4  "></div>
</div>

这是我的CSS

body {
    margin: 0 auto;
}
.container {
    position:relative;
    margin: 50px auto;
    width: 800px;
    height:800px;
    border:1px solid #000;
}
.circle {
    display:inline-block;
    width: 25px;
    height: 25px;
    border-radius:50%;
    position: absolute;
    top:100px;
    left:100px;
    background:#000;
    animation: myframes 4s ease-in-out 0s infinite;

    /* animation-name: myanimation;
    animation-duration:5s;
    animation-timing-function:ease-in-out;
    animation-delay: 0s;
    animaiton-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: forwards;
    animation-play-state: running; …