您现在的位置是：首页 > 前端 > 后端 > HTML5 HTML5

【HTML】心愿墙 Demo展示

2022-01-14【HTML5】1212人已围观

简介![](http://image.apidata.vip/blog/article/2022-01-14/164212664865837571.png) ```html * { margin: 0; padding: 0; } body { font-family

![](http://image.apidata.vip/blog/article/2022-01-14/164212664865837571.png)

```html

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);
                    /*为了让正方形倾斜*/
                    -webkit-transform: rotate(-6deg);
                    -o-transform: rotate(-6deg);
                    -moz-transform: rotate(-6deg);
                    /*平滑过渡特效*/
                    -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;
                    /*在even里定义不同的颜色*/
                    -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;
                    /*在3n里定义不同的颜色*/
                    -o-transform: rotate(-3deg);
                    -webkit-transform: rotate(-3deg);
                    -moz-transform: rotate(-3deg);
                    position: relative;
                    top: -5px;
                    background: #ccf;
                }

ul li:nth-child(5n) a
                {
                    -o-transform: rotate(5deg);
                    -webkit-transform: rotate(5deg);
                    -moz-transform: rotate(5deg);
                    position: relative;
                    top: -10px;
                }
                /*在hover和focus的时候达到缩放的效果*/
                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;
                }
    </style>

</head>
<body>

<div>
        <ul>
            <li><a href="#">
                <h2>房子</h2>
                <p>漂泊的身子，能有一个寄宿的地方。成家立业之本。梦想中的房子是现代化风格的，智能是必备的！</p>
            </a></li>
            <li><a href="#">
                <h2>车子</h2>
                <p>这是我的第2愿望</p>
            </a></li>
            <li><a href="#">
                <h2>IpadMini2</h2>
                <p>这是我的第3愿望</p>
            </a></li>
            <li><a href="#">
                <h2>媳妇</h2>
                <p>这是我的第4愿望</p>
            </a></li>
            <li><a href="#">
                <h2>Ruicky:</h2>
                <p>这是我的第5愿望</p>
            </a></li>
        </ul>
    </div>
</body>
</html>

```

关注博客，更多精彩分享，敬请期待！

Tags：

很赞哦！ (0)

上一篇：worldpress后台头像被墙访问慢，解决方法

下一篇：ps如何将照片转换成钢笔画线条画