CSS动画渐变标题

时间:2016-05-18 03:55:06

标签: html css

我正在尝试将动画渐变应用于我的标题类。由于某种原因,我无法让这个工作。

我试图这样做但不是身体,只是标题。 https://www.gradient-animator.com/

这里发生了什么?任何人都可以帮助我指出正确的方向吗?

HTML,CSS

docker run --rm -p 0.0.0.0:2181:2181 -p 0.0.0.0:9092:9092 -p 0.0.0.0:8081:8081 
--env ADVERTISED_HOST=`docker-machine ip \`docker-machine active\`` --env 
ADVERTISED_PORT=9092 -v 
/Users/abhishek.srivastava/MyProjects/KafkaTest/target/scala-2.11:/app -it --
name kafka kafka_9.0 bash
.business-header {
    background: linear-gradient(50deg, #282466, #ffc500);
    height: 400px;
   
    
    -webkit-animation: test 2s ease infinite;
            animation: test 2s ease infinite;
}

@-webkit-keyframes test {
    0%{background-position:51% 0%}
    50%{background-position:20% 100%}
    100%{background-position:51% 0%}
}
@-moz-keyframes test {
    0%{background-position:51% 0%}
    50%{background-position:50% 100%}
    100%{background-position:51% 0%}
}
@keyframes test { 
    0%{background-position:51% 0%}
    50%{background-position:50% 100%}
    100%{background-position:51% 0%}
}

1 个答案:

答案 0 :(得分:0)

Working Fiddle

.business-header {
   background: linear-gradient(270deg, #a4ffe8, #092f25);
   background-size: 400% 400%;
   -webkit-animation: AnimationName 30s ease infinite;
   -moz-animation: AnimationName 30s ease infinite;
   animation: AnimationName 30s ease infinite;
   min-height: 100%;
   min-width: 100%;
   height:400px;
}

你没有提到背景大小..这就是问题