css - 如何在图表上滑动图像

Question

我想有一种方法可以在图表上滑动图像或消息，以在用户输入数据之前/之后显示一些消息。到目前为止，我的图像只出现在页面的底部，而不是在字符上方，以便很好地看到它。下面是我的代码:

def my_chart():
    response.files.append(URL('my_default','static/js/pygal-tooltips.min.js'))
    response.headers['Content-Type']='image/svg+xml'

    custom_style = Style(
        background='transparent',
        plot_background='transparent',
        foreground='#53E89B',
        foreground_strong='#53A0E8',
        foreground_subtle='#630C0D',
        opacity='.6',
        opacity_hover='.9',
        transition='400ms ease-in',
        colors=('#E853A0', '#E8537A', '#E95355', '#E87653', '#E89B53')
        )
    chart = pygal.StackedLine(fill=True, interpolate='cubic', style=BlueStyle)
    data = db(db.amount).select()
    chart.add('W', [i.amount for i in data])
    return chart.render()
def myWeight():
    chart= URL('my_default', 'amount_chart')
    form = SQLFORM(db.amount, submit_button=T('Submit')).process()
    news = ''.join(str(item) for item in ['Hi ', auth.user.first_name, ' I want to make sure that this paragraph appears infron of the chart so that I can adda paragraph/message in'])
    return dict(chart = chart,form=form, news=news)

这是我的观点:

<figure>
    <embed type="image/svg+xml" src="{{=chart}}" />
    <div class="wrapper">
        {{=XML(news)}}
    </div>
</figure>
<h1>{{=form}}</h1>

Answer 1

我得到了一些好东西。但仍然需要插入图像作为背景。:{{扩展 'layout.html'}}

<style>
    #note {
        position: absolute;
        z-index: 101;
        top: 0;
        left: 0;
        right: 0;
        background: #FAE3E3;
        text-align: center;
        line-height: 2.5;
        overflow: hidden; 
        -webkit-box-shadow: 0 0 5px black;
        -moz-box-shadow:    0 0 5px black;
        box-shadow:         0 0 5px black;
        }
    @-webkit-keyframes slideDown {
        0%, 100% { -webkit-transform: translateY(-70px); }
        10%, 90% { -webkit-transform: translateY(0px); }
    }
    @-moz-keyframes slideDown {
        0%, 100% { -moz-transform: translateY(-70px); }
        10%, 90% { -moz-transform: translateY(0px); }
    }
    .cssanimations.csstransforms #note {
        -webkit-transform: translateY(-70px);
        -webkit-animation: slideDown 12.5s 1.0s 1 ease forwards;
        -moz-transform:    translateY(-50px);
        -moz-animation:    slideDown 12.5s 1.0s 1 ease forwards;
    }
</style>
<div id="note">
    {{=XML(news)}}
</div>
<figure>
    <embed type="image/svg+xml" src="{{=chart}}" />
</figure>
<h1>{{=form}}</h1>