iPhone解锁屏幕文字CSS技巧

Razvan Cuceu 发表于 Dev

310

拉兹万·库库（Razvan Cuceu）

我有这段代码可以对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/

通用熊

我做了一些小的修改，我认为这应该是您正在寻找的：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;
    }
}