Question

我试图做出快速响应的＆＃34;倾听＆＃34;装载机，但我有一些问题试图集中所有3个元素。

参见＆＃34;清洁＆＃34; JSFiddle：http://jsfiddle.net/mfaeqxn9/（麦克风需要位于加载器的中心）。

这是CSS：

           body{
                background: #151515
                }

            #listenericon{
                color:#23d05f;
                font-size:82px;
            }

                .circle {
                background-color: rgba(0,0,0,0);
                border: 20px solid rgba(35,208,95,0.9);
                opacity: .9;
                border-right: 20px solid rgba(0,0,0,0);
                border-left: 20px solid rgba(0,0,0,0);
                border-radius: 999px;
                width: 200px;
                height: 200px;
                margin: 0 auto;
                -moz-animation: spinPulse 1s infinite ease-in-out;
                -webkit-animation: spinPulse 1s infinite linear;
            }

            .circle1 {
                background-color: rgba(0,0,0,0);
                border: 20px solid rgba(35,208,95,0.9);
                opacity: .9;
                border-left: 20px solid rgba(0,0,0,0);
                border-right: 20px solid rgba(0,0,0,0);
                border-radius: 999px;
                width: 120px;
                height: 120px;
                margin: 0 auto;
                position: relative;
                top: -288px;
                -moz-animation: spinoffPulse 1s infinite linear;
                -webkit-animation: spinoffPulse 1s infinite linear;
            }

            @-moz-keyframes spinPulse {
                0% {
                    -moz-transform: rotate(160deg);
                    opacity: 0;
                    box-shadow: 0 0 1px #23d05f;
                }

                50% {
                    -moz-transform: rotate(145deg);
                    opacity: 1;
                }

                100% {
                    -moz-transform: rotate(-320deg);
                    opacity: 0;
                };
            }

            @-moz-keyframes spinoffPulse {
                0% {
                    -moz-transform: rotate(0deg);
                }

                100% {
                    -moz-transform: rotate(360deg);
                };
            }

            @-webkit-keyframes spinPulse {
                0% {
                    -webkit-transform: rotate(160deg);
                    opacity: 0;
                    box-shadow: 0 0 1px #23d05f;
                }

                50% {
                    -webkit-transform: rotate(145deg);
                    opacity: 1;
                }

                100% {
                    -webkit-transform: rotate(-320deg);
                    opacity: 0;
                };
            }

            @-webkit-keyframes spinoffPulse {
                0% {
                    -webkit-transform: rotate(0deg);
                }

                100% {
                    -webkit-transform: rotate(360deg);
                };
            }

            @import url(https://fonts.googleapis.com/icon?family=Material+Icons);


            .material-icons {
              font-family: 'Material Icons';
              font-weight: normal;
              font-style: normal;
              font-size: 24px;  /* Preferred icon size */
              display: inline-block;
              width: 1em;
              height: 1em;
              line-height: 1;
              text-transform: none;
              letter-spacing: normal;
              word-wrap: normal;

              /* Support for all WebKit browsers. */
              -webkit-font-smoothing: antialiased;
              /* Support for Safari and Chrome. */
              text-rendering: optimizeLegibility;

              /* Support for Firefox. */
              -moz-osx-font-smoothing: grayscale;

              /* Support for IE. */
              font-feature-settings: 'liga';
            }

我已尝试翻译50％版本和许多其他版本，但由于它需要响应，我还没有找到合适的解决方案。我对flexbox很好，但到目前为止我还没弄明白如何让div相互重叠。

任何人都有一个很好的解决方案吗？

Answer 1

Here's the solution (I have updated the codes as your requirement):

Working demo

#listenericon{
    color:#23d05f;
    font-size:82px;
    margin-top:10px;
    width:120px;
    display: block;
    position: relative;
    margin: 0 auto;
    padding-top: 78px; }

.mic{
    position: absolute;
    top: 0;
    left: 0;
    width:100%; }

Answer 2

完全响应检查运行代码，两个主要问题：如果要重叠两个div，并使用位置相对来控制div，请使用Position Absolute，检查：Fiddle Code

     <div class="loader">
<div class="circle"></div>
<div class="circle1"><i id="listenericon" class="material-icons">mic</i></div>

  #listenericon{
    color:#23d05f;
    font-size:82px; margin:10px 0 0 0;
 }
 .loader{position:relative; float:left; width:100%; height:270px;}

使用flexbox重叠居中的div？

2 个答案: