Question

我有一个问题是将动画完美地放在小屏幕尺寸上，例如＆lt; 768px。问题是动画的中心需要始终位于屏幕的中心。如果屏幕变小，它只会漂浮在屏幕的右侧，但我希望它在屏幕的每一侧都能同样浮出来。

<div class="container" id="" style="padding-right: 0; padding-left: 0;" >
    <div class="row vertical-center-row" style="overflow: hidden">
        <div class="row">
           <div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 col-sm-12 col-sm-offset-0 col-xs-12" 
                style="background-color: #ffffff; border-bottom: 1px solid #CBCCCD;
                border-top: 1px solid #CBCCCD; ">
                <div class="spinner">
                     <img class="" src="images/spinner/spinner_bg.png" alt="">
                     <img class="" src="images/spinner/spinner_fg.png" alt="">
                </div>

                <div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 
                            col-sm-8 col-sm-  offset-2 col-xs-8 col-xs-offset-2"
                     style="margin-top: 3%;">
                      /*Here is the rest of my content*/
                </div>

            </div>
        <div>
    </div>
</div>

使用这种结构，内容正确地居中，除了div = class =＆＃34; spinner＆＃34;适用于较小的屏幕尺寸我试图在css文件中完成我想要的媒体查询行为。

html, body, .container {
    height: 100%;
}

.container {
    display: table;
    vertical-align: middle;
    background-color: transparent;
}

.vertical-center-row {
    display: table-cell;
    vertical-align: middle;
}


@media (min-width: 1200px) {
    .spinner img{
         max-width:100%;
         height:auto;
         position: absolute;
         top:-309px;
         z-index:-1;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
   .spinner img{
        max-width:100%;
        height:auto;
        position: absolute;
        top:-244px;
         z-index:-1;
    }
}

@media (min-width: 767px) and (max-width: 991px) {
    .spinner img{
        max-width:100%;
        height:auto;
        position: absolute;
        top:-300px;
        z-index:-1;
    }
}

@media (max-width: 766px) {
    .spinner img{
        position: absolute;
        z-index:-1;
    }
}

通过添加css类spin

来触发动画

.spin{
    -webkit-animation:spin 2s linear infinite;
    -moz-animation:spin 2s linear infinite;
    animation:spin 2s linear infinite;
}

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); -moz-transform-origin:           center center } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); -webkit-transform- origin: center center } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg);    -webkit-transform-origin: center center transform-origin: center center} }

我非常感谢能够实现我想要的行为的任何提示或解决方案

这是问题的fiddle

Answer 1

您可以通过自动边距绝对定位微调器而无需媒体查询。负顶部，右侧，左侧，底部位置允许它保持居中和裁剪，即使页面小于微调器。像这样：

.spinner img{
    position: fixed;
    top:-100%; right:-100%; left:-100%; bottom:-100%;
    margin:auto;
    z-index:0;
}

http://jsfiddle.net/JZ9Rn/3/

如何在屏幕中央显示CSS动画

1 个答案: