我正在尝试解决从右到左的DIV宽度的问题,以及从底部到顶部的不同容器的高度。我正在尝试创建CSS动画,该动画将在正方形中旋转并模仿这里的边界是链接到我的Codepen https://codepen.io/archezi/pen/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; */
}
.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; }
}
请指导我在哪里找到解决方案或指向我解决这个问题的不同方法。谢谢你!
这里的问题是,您需要Line3具有绝对权利,因此当宽度变化时,它将向左伸展。
另外,第4行应该具有绝对的底部,因此它会伸展。
我建议您在四行中添加一个容器或更改当前Div.Container的尺寸(如示例中所做的那样),然后将4行用作该容器的极端。
这是您的示例修改为有关如何继续的参考点:
https://codepen.io/anon/pen/mbrvgm?editors=0100
body {
margin: 0 auto;
}
.container {
position:relative;
margin: 50px auto;
width: 115px;
height:115px;
border:1px solid #000;
}
.circle {
display:inline-block;
width: 25px;
height: 25px;
border-radius:50%;
position: absolute;
top:0px;
left:0px;
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:0px;
left:0px;
background:red;
animation: squerframe 2s ease-in-out 0s infinite;
}
.line2 {
height:15px;
width:15px;
position:absolute;
top:0px;
left:100px;
background:green;
animation: squerframe2 2s ease-in-out 1s infinite;
}
.line3 {
height:15px;
width:15px;
position:absolute;
top:100px;
right:0px;
float: right;
background-color:red;
animation: squerframe3 2s ease-in-out 2s infinite;
}
.line4 {
height:15px;
width:15px;
position:absolute;
left:0px;
bottom: 0;
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:0px; left:0px; }
25% { top:0px; left:100px; }
50% { top:100px; left:100px; }
75% { top:100px; left:0px; }
100% { top:0px; left:0px; }
}
添加其他样式
animation: squerframe4 2s ease-in-out 3s infinite;
-webkit-animation: squerframe4 2s ease-in-out 3s infinite;
-moz-animation: squerframe4 2s ease-in-out 3s infinite;
和keyframes
@Keyframes squerframe...
@-webkit-Keyframes squerframe...
@-moz-Keyframes squerframe...