最終更新日:2018年4月4日 15時03分閲覧回数:1291

ジャンボトロンの背景色をグラデにしてアニメにする

@keyframesbackgroundlinear-gradient が使えなかったので、.jumbotron を2つ作って重ねて上を透明にしたらできました。

赤い猫

青い猫

<style>
#test0{white-space:normal;position:relative}
#test1
{
    animation: c 5s ease-in-out infinite alternate;
    background-image: linear-gradient(to bottom right, lavenderblush, lightpink);
    color: linen;
    position:absolute;
    width:100%;
}
#test2
{
    background-image: linear-gradient(to bottom left, ghostwhite, paleturquoise);
    color: azure;
}
@keyframes c
{
    from{opacity: 1}
    to{opacity: 0}
}
</style>
<div class="position-relative" id="test0">
    <div class="jumbotron position-absolute w-100 text-right" id="test1"><h1>赤い猫</h1></div>
    <div class="jumbotron" id="test2"><h1>青い猫</h1></div>
</div>

コメント

当フォームより収集される個人情報は、返信を要する際に使用されるものであり、法令に基づく行政機関等への提供を除き、ご本人の同意を得ずに第三者に提供することはありません。また、コメントが掲載される場合であってもメールアドレスが本サイト内に記載されることはありません。