Design My Virtual Home之留言板-前端效果

hi_dzj 2013-07-04 20:06:54

1417

分类专栏： My Virtual Home

最后发布:2013-07-04 20:06:54首次发布:2013-07-04 20:06:54

本文链接：https://blog.csdn.net/hi_dzj/article/details/9246329

版权

今天看了一篇有关HTML5的文章，将如何设计利用HTML5和CSS3来设计便签，比较详细，以后以备拿来做留言板模块，先贴上去，免得忘记了

原英文网址：http://net.tutsplus.com/tutorials/html-css-techniques/create-a-sticky-note-effect-in-5-easy-steps-with-css3-and-html5/

原译文网址：http://www.cnblogs.com/TomXu/archive/2011/12/13/2285755.html

效果图

源代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>留言板-便签效果</title>
    <link href="http://fonts.googleapis.com/css?family=Reenie+Beanie:regular" rel="stylesheet"
        type="text/css">
    <style type="text/css">
        *
        {
            margin: 0;
            padding: 0;
        }
        body
        {
            font-family: 微软雅黑,arial,sans-serif;
            font-size: 100%;
            margin: 3em;
            background: #666;
            color: #fff;
        }
        h2, p
        {
            font-size: 100%;
            font-weight: normal;
        }
        ul, li
        {
            list-style: none;
        }
        ul
        {
            overflow: hidden;
            padding: 3em;
        }
        ul li a
        {
            text-decoration: none;
            color: #000;
            background: #ffc;
            display: block;
            height: 10em;
            width: 10em;
            padding: 1em;
        }
        ul li
        {
            margin: 1em;
            float: left;
        }
        ul li h2
        {
            font-size: 140%;
            font-weight: bold;
            padding-bottom: 10px;
        }
        ul li p
        {
            font-family: "Reenie Beanie" ,arial,sans-serif,微软雅黑;
            font-size: 110%;
        }
        ul li a
        {
            text-decoration: none;
            color: #000;
            background: #ffc;
            display: block;
            height: 10em;
            width: 10em;
            padding: 1em; /* Firefox */
            -moz-box-shadow: 5px 5px 7px rgba(33,33,33,1); /* Safari+Chrome */
            -webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7); /* Opera */
            box-shadow: 5px 5px 7px rgba(33,33,33,.7); /*第五步添加*/
            -moz-transition: -moz-transform .15s linear;
            -o-transition: -o-transform .15s linear;
            -webkit-transition: -webkit-transform .15s linear;
        }
        ul li:nth-child(even) a
        {
            -o-transform: rotate(4deg);
            -webkit-transform: rotate(4deg);
            -moz-transform: rotate(4deg);
            position: relative;
            top: 5px;
        }
        ul li:nth-child(3n) a
        {
            -o-transform: rotate(-3deg);
            -webkit-transform: rotate(-3deg);
            -moz-transform: rotate(-3deg);
            position: relative;
            top: -5px;
        }
        ul li:nth-child(5n) a
        {
            -o-transform: rotate(5deg);
            -webkit-transform: rotate(5deg);
            -moz-transform: rotate(5deg);
            position: relative;
            top: -10px;
        }
        ul li a:hover, ul li a:focus
        {
            -moz-box-shadow: 10px 10px 7px rgba(0,0,0,.7);
            -webkit-box-shadow: 10px 10px 7px rgba(0,0,0,.7);
            box-shadow: 10px 10px 7px rgba(0,0,0,.7);
            -webkit-transform: scale(1.25);
            -moz-transform: scale(1.25);
            -o-transform: scale(1.25);
            position: relative;
            z-index: 5;
        }
        ul li:nth-child(even) a
        {
            -o-transform: rotate(4deg);
            -webkit-transform: rotate(4deg);
            -moz-transform: rotate(4deg);
            position: relative;
            top: 5px;
            background: #cfc;
        }
        ul li:nth-child(3n) a
        {
            -o-transform: rotate(-3deg);
            -webkit-transform: rotate(-3deg);
            -moz-transform: rotate(-3deg);
            position: relative;
            top: -5px;
            background: #ccf;
        }
    </style>
</head>
<body>
    <ul>
        <li><a href="#">
            <h2>
                DZJ：</h2>
            <p>
                最近咋没有美女发帖呢？我一定给个头条推荐,recommend!recommend!</p>
        </a></li>
        <li><a href="#">
            <h2>
                DZJ：</h2>
            <p>
                Team的一个成员去了Microsoft做SDE3，又得hire new member了</p>
        </a></li>
        <li><a href="#">
            <h2>
                DZJ：</h2>
            <p>
                O2DS和我翻译的书是一样，我一定要比他翻得快, 晚上加班翻,fast! fast! fast!</p>
        </a></li>
        <li><a href="#">
            <h2>
                DZJ：</h2>
            <p>
                WCF的帖子真是少，看来我得多发点帖子让大家学习呢</p>
        </a></li>
        <li><a href="#">
            <h2>
                DZJ：</h2>
            <p>
                将权限管理、工作流管理做到我能力的极致，一个人只能做好那么很少的几件事情</p>
        </a></li>
        <li><a href="#">
            <h2>
                某武林高手：</h2>
            <p>
                低于25000块的面试再也不去了，它grandma的</p>
        </a></li>
    </ul>
</body>
</html>