H5 c3制作3D手风琴效果

前端开发人员需要考哪些证书 前端开发需要网络吗 东宝软件 前端开发

html 代码

<!doctype html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <style>
        body {
            background: #D5DED9;
            font-family: Arial, Helvetica, sans-serif;
        }
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-family: Georgia, serif;
        }
        h1 {
            font-size: 330%;
            text-shadow: 2px 2px 1px white;
        }
        p {
            line-height: 140%;
            font-size: 90%;
        }
        #accordion {
            margin: 100px;
        }
        #accordion article {
            -webkit-transform: perspective(900px) rotateY(60deg);
            -webkit-transition: all 0.7s ease-in-out;
            background: #fff;
            border: 1px solid #f3f3f3;
            box-shadow: 0px 5px 15px gray;
            float: left;
            height: 420px;
            margin-left: -180px;
            padding: 20px;
            width: 220px;
        }
        #accordion article:first-child {
            margin-left: 0px;
        }
        #accordion article img {
            float: left;
            padding: 0 10px 5px 0;
        }
        #accordion article:hover {
            -webkit-transform: perspective(0) rotateY(-10deg);
            margin: 0 140px 0 -60px;
        }
    </style>
</head>
<body>
    <h1>一个自学前端开发的微信公众号:网页设计自学平台</h1>
    <div id=”accordion”>
        <article>
            <h2>Section 1</h2>
            <img src=”http://cdn.attach.qdfuns.com/notes/pics/201801/03/154646x6p66rpp516ciilc.jpg” width=”100″ height=”88″>
            <p>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
            </p>
            <p>
                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque
                ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
            </p>
        </article>
        <article>
            <h2>Section 2</h2>
            <img src=”http://cdn.attach.qdfuns.com/notes/pics/201801/03/154646dhara0elh460w9w9.jpg” width=”100″ height=”75″>
            <p>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
            </p>
            <p>
                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque
                ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
            </p>
        </article>
        <article>
            <h2>Section 3</h2>
            <img src=”http://cdn.attach.qdfuns.com/notes/pics/201801/03/154646ynkhqd5fy95vq565.jpg” width=”100″ height=”67″>
            <p>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
            </p>
            <p>
                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque
                ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
            </p>
        </article>
        <article>
            <h2>Section 4</h2>
            <img src=”http://cdn.attach.qdfuns.com/notes/pics/201801/03/154646uff5l35kiolqaa1i.jpg” width=”100″ height=”75″>
            <p>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
            </p>
            <p>
                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque
                ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
            </p>
        </article>
    </div>
</body>
</html>

互联网前端开发面试提问 前端开发需要做 前端开发软件前十

» 本文来自:前端开发者 » 《H5 c3制作3D手风琴效果》
» 本文链接地址:https://www.rokub.com/5343.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!