Question

您好我正在尝试复制此wix网站左侧和右侧的火焰图标动画：如何将火焰图标放置在最右侧或左侧，并使其具有淡入淡出动画

http://jirungu2012.wix.com/firebrandoption2

这是htm代码

 <section id="ourfires" class="portfolio page-section add-top add-bottom">
    <div id="right">
    <img src="http://static.wixstatic.com/media/d57153_09c71d3fe10848c3a04b18f8d8a6c2b3.png_srz_p_487_587_75_22_0.50_1.20_0.00_png_srz" />
        <!-- inner-section : starts -->
        <section class="inner-section">

        <!-- container : starts -->
        <section class="container">

            <div class="row">
                <article class="col-md-12">
                    <h1 style="text-align:left;"><span class="animated" data-fx="bounceInRight">Our fire</span></h1>
                    <article id="article"><hr class="hr"></hr></article>
                      <div class="clearfix"></div>



                    <div id="mid">

                    <p class="promod-text dark-text">Our fire is all about <b>Big Brand Ideas</b> that not only have an <b>edge in the market</b> and make a difference in the <b>bottom line</b>,but ieas are: </p>



                            <p>
                                <ul id="navlist" class="promod-text dark-text" >
                                    <li>Locally relevant</li>
                                    <li>Creatively imagined and executed</li>
                                    <li>Internationally recognized</li>
                                </ul>
                          </p>
                          <br><br><br><br><br> 
                  </div>

                </article>
            </div   
    ></section>
        <!-- container : ends -->
        </section>
        <!-- inner-section : ends -->
    </div>
    </section>

css

#ourfires{

    background: url('../images/bg/03.jpg');
    background-color:#ffffff;


}

Answer 1

以下是我对你的问题所理解的看法。

HTML：

<div id="left">
    <img src="img.jpg" />
</div>

<div id="right">
    <img src="img.jpg" />
</div>

CSS：

#left, #right {
    max-width: 100px;
    position: absolute;
    display: none;
}
img {
    max-width: 100%;
}
#left {
    left: 0;
    top: 40%;
}
#right {
    right: 0;
    top: 40%;
}

jQuery的：

$(document).ready(function () {
    $("#left").add("#right").fadeIn();
});

<强> FIDDLE here

修改我已使用您的代码并在此 BOOTPLY中编译了所需的行为。请查看。

Answer 2

您可以在文档准备好或加载窗口后添加一些Jquery动画：

$query = \DB::table("my_table")->where(...);

$sorts = $this->fetchSorting(\Auth::user(), "my_table");
foreach ($sorts as $column => $direction) {
    $query->orderBy($column, $direction);
}

动画示例：see this Fiddle

EDITED LINK

如何淡化html / css中的图像图标动画

2 个答案: