自动在图像上滑动文本

时间:2018-02-22 11:08:37

标签: html5 css3 keyframe

我有一个如下图所示的图像和写在图像中心的文字。

Image

我有10个文字内容要在图片上显示,所以我需要滑动文字。我使用了字幕,但它不是以幻灯片放映。请任何人给我解决方法如何在图像上滑动我的文字。

我的marquee代码

{
    "odata.error": {
        "code": "Authentication_MissingOrMalformed",
        "message": {
            "lang": "en",
            "value": "Access Token missing or malformed."
        },
        "date": "2018-02-22T10:37:53",
        "requestId": "381cf386-6065-422b-b561-164ed17dcfdf",
        "values": null
    }
}

提前感谢!!!!

1 个答案:

答案 0 :(得分:0)

这可能对您有所帮助

#display 
{ 
     position:absolute; 
     visibility:show; 
}
#text
{
    color:White;
    font-size:12px;
    font-weight:bold;
    left:65%;
    top:2%;
}
marquee {
    position: absolute;
    top: 0;
}
 <div id="display">
    <img height="100" width="100" src="https://cdn.pixabay.com/photo/2018/01/28/21/14/lens-3114729_960_720.jpg" />
    <marquee id="m1" scrollamount="2" direction="up" loop="true" width="100%" heigth="100%">
    <center>
    <p id="text">
    Opening Soon !!!
    </p>
    </center>
    </marquee>
    </div>