css3图文卡片3D翻页特效代码下载


css3图文卡片3D翻页特效代码下载
css3图文卡片3D翻页特效代码下载以及图文卡片、3D翻页等js/jquery网页特效代码下载。

1. 引入CSS

<link rel="stylesheet" href="css/style.css">

2. HTML代码

    <section>
        <div class="card">
            <div class="box">
                <div class="imgBx">
                    <img src="images/1.jpg" alt="">
                </div>
                <div class="contentBx">
                    <div>
                        <h2>Post Title</h2>
                        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione, illum. 
                            Fugit minus inventore sit, et officiis architecto porro esse? Aperiam 
                            fuga enim impedit similique aspernatur facilis eaque ad, perspiciatis
                             inventore.</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="box">
                <div class="imgBx">
                    <img src="images/2.jpg" alt="">
                </div>
                <div class="contentBx">
                    <div>
                        <h2>Post Title</h2>
                        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione, illum. 
                            Fugit minus inventore sit, et officiis architecto porro esse? Aperiam 
                            fuga enim impedit similique aspernatur facilis eaque ad, perspiciatis
                             inventore.</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="box">
                <div class="imgBx">
                    <img src="images/3.jpg" alt="">
                </div>
                <div class="contentBx">
                    <div>
                        <h2>Post Title</h2>
                        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione, illum. 
                            Fugit minus inventore sit, et officiis architecto porro esse? Aperiam 
                            fuga enim impedit similique aspernatur facilis eaque ad, perspiciatis
                             inventore.</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="box">
                <div class="imgBx">
                    <img src="images/4.jpg" alt="">
                </div>
                <div class="contentBx">
                    <div>
                        <h2>Post Title</h2>
                        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione, illum. 
                            Fugit minus inventore sit, et officiis architecto porro esse? Aperiam 
                            fuga enim impedit similique aspernatur facilis eaque ad, perspiciatis
                             inventore.</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="box">
                <div class="imgBx">
                    <img src="images/2.jpg" alt="">
                </div>
                <div class="contentBx">
                    <div>
                        <h2>Post Title</h2>
                        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione, illum. 
                            Fugit minus inventore sit, et officiis architecto porro esse? Aperiam 
                            fuga enim impedit similique aspernatur facilis eaque ad, perspiciatis
                             inventore.</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="box">
                <div class="imgBx">
                    <img src="images/3.jpg" alt="">
                </div>
                <div class="contentBx">
                    <div>
                        <h2>Post Title</h2>
                        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione, illum. 
                            Fugit minus inventore sit, et officiis architecto porro esse? Aperiam 
                            fuga enim impedit similique aspernatur facilis eaque ad, perspiciatis
                             inventore.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

相关推荐

发表评论

相关文章