Question

按钮上方的输出是括在括号内的文字，问题在于它是一个动人的词，但它没有被放置在适当的位置，而是它上下移动。

我使用了动画按钮，工作正常，括号中的文字按照左键滚动需要。虽然我已经尝试了很多但没有找到理想的答案

    .background {
      background-color: darkorange;
      width: 100%;
      height: 100%;
      position: absolute;
    }
    .first{
                    color: orange;
                    text-align: center;
                    position: fixed;
                    left: 0%;
                    right: 0%;
                    z-index: 9999;
                    margin-left: 40px;
                    margin-right: 20px;
                    margin-top: 250px;

            }
<!-- for button patrs css code -->

    .button {
                      border-radius: 4px;
                      background-color: #f4511e;
                      border: none;
                      color: #FFFFFF;
                      text-align: center;
                      font-size: 28px;
                      padding: 10px;
                      width: 200px;
                      transition: all 0.5s;
                      cursor: pointer;
                      margin: 10px;
                    }

            .button span {
                      cursor: pointer;
                      display: inline-block;
                      position: relative;
                      transition: 0.5s;
                    }

             .button span:after {
                      content: '\00bb';
                      position: absolute;
                      opacity: 0;
                      top: 0;
                      right: -20px;
                      transition: 0.5s;
                    }

            .button:hover span {
                      padding-right: 25px;
                    }

            .button:hover span:after {
                      opacity: 1;
                      right: 0;
                    }
<!-- For body parts css codes -->
    .content {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
      height: 160px;
      overflow: hidden;
      font-family: 'Lato', sans-serif;
      font-size: 35px;
      line-height: 40px;
      color: #ecf0f1;
    }
    .content__container {
      font-weight: 600;
      overflow: hidden;
      height: 40px;
      padding: 0 40px;
    }
    .content__container:before {
      content: '[';
      left: 0;
    }
    .content__container:after {
      content: ']';
      position: absolute;
      right: 0;
    }
    .content__container:after, .content__container:before {
      position: absolute;
      top: 0;
      color: #16a085;
      font-size: 42px;
      line-height: 40px;
      -webkit-animation-name: opacity;
      -webkit-animation-duration: 2s;
      -webkit-animation-iteration-count: infinite;
      animation-name: opacity;
      animation-duration: 2s;
      animation-iteration-count: infinite;
    }
    .content__container__text {
      display: inline;
      float: left;
      margin: 0;
    }
    .content__container__list {
      margin-top: 0;
      padding-left: 110px;
      text-align: left;
      list-style: none;
      -webkit-animation-name: change;
      -webkit-animation-duration: 10s;
      -webkit-animation-iteration-count: infinite;
      animation-name: change;
      animation-duration: 10s;
      animation-iteration-count: infinite;
    }
    .content__container__list__item {
      line-height: 40px;
      margin: 0;
    }

    @-webkit-keyframes opacity {
      0%, 100% {
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
    }
    @-webkit-keyframes change {
      0%, 12.66%, 100% {
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
      }
      16.66%, 29.32% {
        -webkit-transform: translate3d(0, -25%, 0);
                transform: translate3d(0, -25%, 0);
      }
      33.32%,45.98% {
        -webkit-transform: translate3d(0, -50%, 0);
                transform: translate3d(0, -50%, 0);
      }
      49.98%,62.64% {
        -webkit-transform: translate3d(0, -75%, 0);
                transform: translate3d(0, -75%, 0);
      }
        66.64%,79.3% {
        -webkit-transform: translate3d(0, -50%, 0);
                transform: translate3d(0, -50%, 0);
      }
      83.3%,95.96% {
        -webkit-transform: translate3d(0, -20%, 0);
                transform: translate3d(0, -20%, 0);
      }
    }
    @keyframes opacity {
      0%, 100% {
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
    }
    @keyframes change {
      0%, 12.66%, 100% {
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
      }
      16.66%, 29.32% {
        -webkit-transform: translate3d(0, -25%, 0);
                transform: translate3d(0, -25%, 0);
      }
      33.32%,45.98% {
        -webkit-transform: translate3d(0, -50%, 0);
                transform: translate3d(0, -50%, 0);
      }
      49.98%,62.64% {
        -webkit-transform: translate3d(0, -60%, 0);
                transform: translate3d(0, -60%, 0);
      }
      66.64%,79.3% {
        -webkit-transform: translate3d(0, -50%, 0);
                transform: translate3d(0, -40%, 0);
      }
      83.3%,95.96% {
        -webkit-transform: translate3d(0, -25%, 0);
                transform: translate3d(0, -20%, 0);
      }
    }

    <html>
    <link rel="stylesheet" href="stylesheet.css">
    <div class="background"></div>
    <body>
       <div class="content">
      <div class="content__container">
          <div class="content__container">
        <p class="content__container__text">
          Hello
        </p>

        <ul class="content__container__list">
          <li class="content__container__list__item">world !</li>
          <li class="content__container__list__item">users !</li>
          <li class="content__container__list__item">everybody !</li>
        </ul>
        </div>
           </div>


        <button class="button"><span>Login</span></button>
        <button class="button"><span>Register</span></button>





    </div> 
    </body>
    </html>



<!-- end snippet -->

Answer 1

我想你想要这样的东西：

GG_save_pdf = function(list, filename) {
  #start pdf
  pdf(filename)

  #loop
  for (p in list) {
    print(p)
  }

  #end pdf
  dev.off()

  invisible(NULL)
}

.background {
      background-color: darkorange;
      width: 100%;
      height: 100%;
      position: absolute;
    }
    .first{
                    color: orange;
                    text-align: center;
                    position: fixed;
                    left: 0%;
                    right: 0%;
                    z-index: 9999;
                    margin-left: 40px;
                    margin-right: 20px;
                    margin-top: 250px;

            }
<!-- for button patrs css code -->

    .button {
                      border-radius: 4px;
                      background-color: #f4511e;
                      border: none;
                      color: #FFFFFF;
                      text-align: center;
                      font-size: 28px;
                      padding: 10px;
                      width: 200px;
                      transition: all 0.5s;
                      cursor: pointer;
                      margin: 10px;
                    }

            .button span {
                      cursor: pointer;
                      display: inline-block;
                      position: relative;
                      transition: 0.5s;
                    }

             .button span:after {
                      content: '\00bb';
                      position: absolute;
                      opacity: 0;
                      top: 0;
                      right: -20px;
                      transition: 0.5s;
                    }

            .button:hover span {
                      padding-right: 25px;
                    }

            .button:hover span:after {
                      opacity: 1;
                      right: 0;
                    }
<!-- For body parts css codes -->
    .content {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
      height: 160px;
      overflow: hidden;
      font-family: 'Lato', sans-serif;
      font-size: 35px;
      line-height: 40px;
      color: #ecf0f1;
    }
    .content__container {
      font-weight: 600;
      overflow: hidden;
      height: 40px;
      padding: 0 40px;
    }
    .content__container:before {
      content: '[';
      left: 0;
    }
    .content__container:after {
      content: ']';
      position: absolute;
      right: 0;
    }
    .content__container:after, .content__container:before {
      position: absolute;
      top: 0;
      color: #16a085;
      font-size: 42px;
      line-height: 40px;
      -webkit-animation-name: opacity;
      -webkit-animation-duration: 2s;
      -webkit-animation-iteration-count: infinite;
      animation-name: opacity;
      animation-duration: 2s;
      animation-iteration-count: infinite;
    }
    .content__container__text {
      display: inline;
      float: left;
      margin: 0;
    }
    .content__container__list {
      margin-top: 0;
      padding-left: 110px;
      text-align: left;
      list-style: none;
      -webkit-animation-name: change;
      -webkit-animation-duration: 10s;
      -webkit-animation-iteration-count: infinite;
      animation-name: change;
      animation-duration: 10s;
      animation-iteration-count: infinite;
    }
    .content__container__list__item {
      line-height: 40px;
      margin: 0;
    }

    @-webkit-keyframes opacity {
      0%, 100% {
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
    }
    @-webkit-keyframes change {
      0%,15%{
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
                }
     25%, 40% {
        -webkit-transform: translate3d(0, -30%, 0);
                transform: translate3d(0, -30%, 0);
      }
      50%,65% {
        -webkit-transform: translate3d(0, -63%, 0);
                transform: translate3d(0, -63%, 0);
      }
      75%,90% {
        -webkit-transform: translate3d(0, -30%, 0);
                transform: translate3d(0, -30%, 0);
      }
      100%{
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
      }
    }
    @keyframes opacity {
      0%, 100% {
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
    }
    @keyframes change {
      0%,15%{
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
                }
     25%, 40% {
        -webkit-transform: translate3d(0, -30%, 0);
                transform: translate3d(0, -30%, 0);
      }
      50%,65% {
        -webkit-transform: translate3d(0, -63%, 0);
                transform: translate3d(0, -63%, 0);
      }
      75%,90% {
        -webkit-transform: translate3d(0, -30%, 0);
                transform: translate3d(0, -30%, 0);
      }
      100%{
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
      }
    }

为什么我的动画文字不会出现在一行上

1 个答案: