在图像上方有背景动画

时间:2019-01-29 21:28:36

标签: css angular animation

我正在尝试在我的角度项目中创建一个CSS动画。我有一个图像,并且正在尝试为其背景图像设置动画。图像已加载,但背景图像未加载,并且控制台中没有错误(未出现polkaDots.jpg)。这是我的文件夹结构:

my-app
 - src
  - app
   - component
    - component.css
    - component.html
  - assets
   - images
    - homebackground.jpg
    - polkaDots.jpg

component.html

    <img back-img id = "homebackground" src="assets/images/homebackground.jpg" >

component.css

    #homebackground{
    width: 100%;
    height: 25%;
    position: absolute;
    left: 0%;
    bottom: 0px;
    overflow: hidden;
    z-index: 0;
    background: url('../../assets/images/polkaDots.jpg');
    opacity: .4;
    animation: sparkle_animation 75s linear infinite;
}
@keyframes sparkle_animation{
    0%{background-position: 0 0;}
    100%{background-position: 0 150px;}

}

0 个答案:

没有答案