Question

我有这个代码动画像iPhone解锁屏幕的文字，我无法让动画从上到下。有人可以帮我吗？它在开始时也会停止一点，我不希望这样，但我的gosh CSS很棘手。

html { background: black; }
#scroll-text { width: 300px; }

h2 {

  background: -webkit-gradient(linear,left top,right top,color-stop(0, #4d4d4d),color-stop(0.4, #4d4d4d),color-stop(0.5, white),color-stop(0.6, #4d4d4d),color-stop(1, #4d4d4d)); 
  -moz-background-clip: text;
  -webkit-background-clip: text;
  -moz-text-fill-color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-animation: slidetounlock 5s infinite;
  font-size: 15px;
  font-family: Arial;
  font-weight: 300;

  padding: 0;
  width: 200%;

  -webkit-text-size-adjust: none;
}
@-webkit-keyframes slidetounlock {
    0% {
        background-position: -300px 0;
    }
    100%{
        background-position: 300px 0;
    }
}

您可以在此处看到它：http://jsfiddle.net/efcojx28/

Answer 1

我做了一些小编辑，我认为这应该是你正在寻找的： https://jsfiddle.net/qebb07mc/2/

html { background: black; }
#scroll-text { width: 300px; height:15px }

h2 {

  background: -webkit-gradient(linear,right top, right bottom,color-stop(0, #4d4d4d),color-stop(0.4, #4d4d4d),color-stop(0.5, white),color-stop(0.6, #4d4d4d),color-stop(1, #4d4d4d)); 
  -moz-background-clip: text;
  -webkit-background-clip: text;
  -moz-text-fill-color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-animation: slidetounlock 3s infinite;
  font-size: 15px;
  font-family: Arial;
  font-weight: 300;

  padding: 0;
  width: 200%;
  height: 200%;

  -webkit-text-size-adjust: none;
}
@-webkit-keyframes slidetounlock {
    0% {
        background-position: 0px -15px;
    }
    100%{
        background-position: 0px 15px;
    }
}

Iphone解锁屏幕文字css技巧

1 个答案: