Question

我为我的一个朋友建立了一个网站。但问题是它中有一些CSS动画。

我想知道这是否可以做出回应？

.waaier3 {
    position: absolute;
    top: 70%;
    left: 39%;
    width: 80px;
    height: 80px;

    -webkit-animation:spindrie 4s linear infinite;
    -moz-animation:spindrie 4s linear infinite;
    animation:spindrie 4s linear infinite;
}
@-moz-keyframes spindrie { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spindrie { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spindrie { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

通过响应我的意思是：与屏幕尺寸一起缩放，并根据屏幕尺寸保持相同的位置？

提前致谢

Answer 1

您可以尝试使用视口设置！例如，代替使用％，您可以使用vw（视口宽度）作为宽度，使用vh（视口高度）作为高度！

Answer 2

width: 80px;
height: 80px;

我确定你是否将其改为：

    .divblahblahblah{

     height:80px;
     width:80px;


}

将你的.waaier3设置在其中并更改：

.waaier3 {
    position: absolute;
    top: 70%;
    left: 39%;
    width: 80px;
    height: 80px;

到

.waaier3 {
    position: absolute;
    top: 70%;
    left: 39%;
    width: 100%;
    height: 100%;

希望这有效：P

响应式CSS动画可能吗？

2 个答案: