Question

我正在尝试以合乎逻辑和真实的方式在整个页面中移动蟑螂。

我编写了这段代码，但是状态不佳。这段代码不合逻辑，只是为了澄清起见我希望他的动作合乎逻辑，这样他才能浏览整个页面，并在所有屏幕上都保持灵活有人可以帮忙吗？

.container{
        position: fixed;
    bottom: 10px;
    left: 10px;
    transition: transform 1s;
   
}
.container.first{
    transform: translateX(200px) ;
    
}
img{
    width:60px;
    height: 60px;
    
    border-radius: 2px;

    transition: transform 2s;
}
 
.container.first img{
     transform: translateY(-100px) rotate(-50deg);
}
  
.container.first.second img{
     transform: translateY(-200px) rotate(-135deg);
}
.container.first.second{
    transform: translateX(-200px) ;
    
}
 
.container.first.second.third img{
     transform:translateX(-20px) translateY(-250px) rotate(30deg) ;
}
.container.first.second.third{
    transform: translateX(-50px) scale(1 , 1.6);
    
}  

.container.first.second.third.fourth img{
     transform: translateY(-450px) rotate(-55deg);
}
.container.first.second.third.fourth{
    transform: translateX(400px) ;
    
}


.container.first.second.third.fourth.fifth img{
     transform: translateY(-700px) rotate(-90deg);
}
.container.first.second.third.fourth.fifth{
    transform: translateX(250px) ;
    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<img src="https://i2.wp.com/drkathyobear.com/wp-content/uploads/2015/09/cockroach.jpg" />  
    </div>

/Library/Frameworks/Python.framework/Versions/3.6/lib/python3.6/site-packages/psycopg2/__init__.py:144: UserWarning: The psycopg2 wheel package will be renamed from release 2.8; in order to keep installing from binary please use "pip install psycopg2-binary" instead. For details see: <http://initd.org/psycopg/docs/install.html#binary-install-from-pypi>.
  """)

`

在页面上平滑移动元素

0 个答案: