使用CSS的响应式移动设计位置

Question

我有一个问题，我如何才能使用CSS在网站的一部分上放置我设计的特定设计并使其具有响应性。

filertextfilertextfilertextfilertextfilertextfilertextfilertextfilertextfilertextfilertextfilertextfilertextfilertextfilertextfilertextfilertextfilertextfilertextfilertextfilertextfilertextfilertextfilertextfilertextfilertextfilertextfilertextfilertextfilertextfilertextfilertextfilertextfilertextfilertext

这对设计有帮助吗？

      .ulindex {

position: relative;
padding: 20px -10px;

transform: rotate(45deg)
/*translate(50%, 50%) translate(-50%, -50%)*/


}

.liindex {
list-style-type: none;
position: absolute;
top: 0px;
left: 0px;
width: 20px;
height: 20px;
background: rgb(255, 2, 2);
border-radius: 0%;
}

#aindex {

animation: aindex 1s ease-in-out infinite;
top: -40px;
left: -40px;
}

 #bindex {
animation: bindex 1s ease-in-out infinite;
top: -40px;
left: 0px;
 }

 #cindex {
animation: cindex 1s ease-in-out infinite;
top: -40px;
left: 40px;
 }

 #dindex {
animation: dindex 1s ease-in-out infinite;
top: 0px;
left: -40px;
 }

 #eindex {
animation: eindex 1s ease-in-out infinite;
top: 0px;
left: 0px;
 }

 #findex {
animation: findex 1s ease-in-out infinite;
top: 0px;
left: 40px;
 }

 #gindex {
animation: gindex 1s ease-in-out infinite;
top: 40px;
left: -40px;
 }

#hindex {
animation: hindex 1s ease-in-out infinite;
top: 40px;
left: 0px;
 }

#iindex {
animation: iindex 1s ease-in-out infinite;
top: 40px;
left: 40px;
 }

@keyframes aindex {
50% {
    top: 0px;
    left: -40px;
}
100% {
    top: 0px;
    left: -40px;
}
}
@keyframes bindex {
50% {
    top: -40px;
    left: -40px;
}
100% {
    top: -40px;
    left: -40px;
}
}
@keyframes cindex {
50% {
    top: -40px;
    left: 0px;
}
100% {
    top: -40px;
    left: 0px;
}
}
@keyframes dindex {
50% {
    top: 40px;
    left: -40px;
}
100% {
    top: 40px;
    left: -40px;
}
}
@keyframes findex {
50% {
    top: -40px;
    left: 40px;
}
100% {
    top: -40px;
    left: 40px;
}
}
@keyframes gindex {
50% {
    top: 40px;
    left: 0px;
}
100% {
    top: 40px;
    left: 0px;
}
}
@keyframes hindex {
50% {
    top: 40px;
    left: 40px;
}
100% {
    top: 40px;
    left: 40px;
}
}
@keyframes iindex {
50% {
    top: 0px;
    left: 40px;
}
100% {
    top: 0px;
    left: 40px;
}
}

Answer 1

let cubes = document.querySelectorAll('.cube');

let pos = [];

function calcPos() {
    cubes.forEach(function(it) {
        let iPos = getComputedStyle(it);
        pos.push({
            top: iPos.getPropertyValue('top'),
            left: iPos.getPropertyValue('left')
        })
    })
}

calcPos();


setInterval(function() {
    cubes.forEach(function(it, index) {
        if(index !== cubes.length - 1) {
            let to = 0;
            if(index === 0) {
                to = cubes.length - 2;
            } else {
                to = index - 1;
            }
            
            it.style.top = pos[to].top;
            it.style.left = pos[to].left;
        }

        if(index === cubes.length - 1) {
            pos = [];
            calcPos();
        }

    });
}, 1000);

* {
    box-sizing: border-box;
    font-family: inherit;
    margin: 0;
    padding: 0;
}

html {
    font-size: 62.25%;
}

body {
    font-family: sans-serif;
    font-size: 1.6rem;
    position: relative;
    height: 100vh;
}

.outter {
    width: 170px;
    height: 170px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.outter-box {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0%;
    left: 0%;
    background-color: #fdfdfd;
    outline-style: solid;
    outline-width: 2px;
    outline-color: green;
    outline-offset: 5px;
    transform: rotate(45deg);
}

.cube {
    width: 50px;
    height: 50px;
    position: absolute;
    background-color: red;
    top: 0;
    left: 0;
    border-radius: .3rem;
    transition: .6s;
}

.cube-2 {
    left: calc(((100% / 3) * 1) + 5px);
}

.cube-3 {
    left: calc(((100% / 3) * 2) + 5px);
}

.cube-4 {
    top: calc(((100% / 3) * 1) + 5px);
    left: calc(((100% / 3) * 2) + 5px);
}

.cube-5 {
    top: calc(((100% / 3) * 2) + 5px);
    left: calc(((100% / 3) * 2) + 5px);
}

.cube-6 {
    top: calc(((100% / 3) * 2) + 5px);
    left: calc(((100% / 3) * 1) + 5px);
}

.cube-7 {
    top: calc(((100% / 3) * 2) + 5px);
    left: 0;
}

.cube-8 {
    top: calc(((100% / 3) * 1) + 5px);
    left: 0;
}

.cube-9 {
    top: calc(((100% / 3) * 1) + 5px);
    left: calc(((100% / 3) * 1) + 5px);
}

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

<head>
	<meta charset="UTF-8">
	<title>Hello World From Gaurav</title>

</head>

<body>
	<div id="Name">Hello I am A Animation</div>
	<div class="outter">
		<div class="outter-box">
			<div class="cube cube-1">1</div>
            <div class="cube cube-2">2</div>
            <div class="cube cube-3">3</div>
            <div class="cube cube-4">4</div>
            <div class="cube cube-5">5</div>
            <div class="cube cube-6">6</div>
            <div class="cube cube-7">7</div>
            <div class="cube cube-8">8</div>
            <div class="cube cube-9">9</div>
		</div>
	</div>
</body>

</html>