css - Iphone 解锁屏幕文字 css 技巧

Question

我有这段代码可以为 iPhone 解锁屏幕等文本设置动画，但我无法让动画从上到下。有人可以帮我吗？它还在开始时停止了一点，我不想这样，但我的天哪 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;
    }
}