Question

使用CSS，可以通过向/*Vertically center the top navigation*/ #et-top-navigation { vertical-align: middle; float:none !important;} .container { display:table; } /* Right align the contents of the top navigation area */ #et-top-navigation { text-align:center; } #et-top-navigation > * { text-align:left; } #top-menu-nav, #et_top_search { float:none !important; display:inline-block !important} #et_top_search { vertical-align: top !important; margin-top:3px }属性https://codepen.io/jamesbarnett/pen/kfmKa添加动画来创建简单的marquee。但是我不能对left做同样的事情，因为它https://docs.nativescript.org/ui/animation-css尚不支持动画中的nativescript。因此，我尝试使用left创建相同的动画，但是由于transform内容将动态创建，因此我无法确定确切的duration和transform值。 / p>

marquee

CSS：

<AbsoluteLayout width="100%" class="marquee">
    <StackLayout orientation="horizontal" zIndex="89">
        <StackLayout id="lytAdvertisementBar" orientation="horizontal" class="advertisement-bar">
            <Label text="Random text is here"/>
            <Label class="fa-star" text="  &#xf005;  " style="color: #FFD42B;"></Label> 
            <Label text="Random text is here"/>
            <Label class="fa-star" text="  &#xf005;  " style="color: #FFD42B;"></Label> 
            <Label text="Random text is here"/>
            <Label class="fa-star" text="  &#xf005;  " style="color: #FFD42B;"></Label> 
            <Label text="Random text is here"/>
        </StackLayout>
    </StackLayout>
    <Image src="res://icon_custom_offers" right="20" zIndex="99"/>
</AbsoluteLayout>

如何修复我的代码，以便可以在本机脚本中使用css / js制作@keyframes kf-marquee { from { transform: translate(-100%, 0); } to { transform: translate(100%, 0); } } .advertisement-bar { transform:translateX(100%); animation-name: kf-marquee; animation-duration: 10s; animation-iteration-count: infinite; animation-timing-function: cubic-bezier(1,1,1,1); } .marquee{ background-color: #414042; width: 100%; } .advertisement-bar{ left: 0; background-color: #414042; margin: 1 0; padding: 3 0; }动画，并且动画的速度恒定（动态持续时间）？

在nativescript中创建字幕

0 个答案: