我正在尝试解决一个问题,即如何让div的宽度从右到左扩展,使得不同容器的高度从底部到顶部延伸。我正在尝试创建一个CSS动画,它将在正方形中旋转,并模拟边框。这里是链接到我的CodePen https://codepen.io/Archezi/pen/xReqvq?editors=0100 如果有帮助的话。
这是我的CSS样式表。
请引导我找到解决方案,或者指引我采用不同的方法解决这个问题。谢谢!
这里是我的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; */
}
.line1 {
height:15px;
width:15px;
position:absolute;
top:105px;
left:105px;
background:red;
animation: squerframe 2s ease-in-out 0s infinite;
}
.line2 {
height:15px;
width:15px;
position:absolute;
top:105px;
left:205px;
background:green;
animation: squerframe2 2s ease-in-out 1s infinite;
}
.line3 {
height:15px;
width:15px;
position:absolute;
top:205px;
left:205px;
background-color:red;
animation: squerframe3 2s ease-in-out 2s infinite;
}
.line4 {
height:15px;
width:15px;
position:absolute;
top:205px;
left:105px;
background:green;
animation: squerframe4 2s ease-in-out 3s infinite;
}
@Keyframes squerframe
{
0% { width:15px; opacity: 1; }
50% { width:115px; }
100%{ width:115px; opacity: 0; }
}
@Keyframes squerframe2
{
0% { height:15px; opacity: 1; }
50% { height:115px; }
100%{ height:115px; opacity: 0; }
}
@Keyframes squerframe3
{
0% { width:115px; opacity: 0;}
50% { width:115px; }
100%{ width:15px; opacity: 1; }
}
@Keyframes squerframe3
{
0% { width:15px; opacity: 1;}
50% { width:115px; }
100%{ width:115px; opacity: 0; }
}
@Keyframes squerframe4
{
0% { height:15px; opacity: 1;}
50% { height:115px; }
100%{ height:115px; opacity: 0; }
}
@keyframes myframes
{
0% { top:100px; left:100px; }
25% { top:100px; left:200px; }
50% { top:200px; left:200px; }
75% { top:200px; left:100px; }
100% { top:100px; left:100px; }
}
请引导我找到解决方案,或者指引我采用不同的方法解决这个问题。谢谢!