响应式 css 动画可能吗？答案

【问题标题】：responsive css animations possible ?响应式 css 动画可能吗？
【发布时间】：2016-07-09 12:11:51
【问题描述】：

我为我的一个朋友制作了一个网站。但问题是里面有一些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); } }

响应式我的意思是：随着屏幕尺寸缩放，并根据屏幕尺寸保持在同一位置？

提前致谢

【问题讨论】：

标签： html css animation responsive-design

【解决方案1】：

您可以尝试使用视口设置！例如，您可以使用 vw（视口宽度）作为宽度，使用 vh（视口高度）作为高度，而不是使用 %！

【讨论】：

【解决方案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

【讨论】：