html 代码
- <style>
- * {
- margin:0;
- padding:0;
- }
- .box {
- width:500px;
- height:120px;
- margin:0 auto;
- }
- .box span {
- display:block;
- width:200px;
- height:80px;
- border:2px solid #2ec06c;
- color:#2ec06c;
- line-height:80px;
- text-align:center;
- float:left;
- margin:10px 10px;
- font-size:18px;
- border-radius:10px;
- font-weight:bolder;
- transition:border-radius .5s;
- }
- .box span:hover {
- border-radius:40px;
- color:#fff;
- background:#2ec06c;
- }
- .box2 {
- width:800px;
- height:360px;
- margin:20px auto;
- background:#f5f5f5;
- }
- .box2 li {
- width:200px;
- height:300px;
- background:#fff;
- float:left;
- margin:10px 15px;
- list-style:none;
- position:relative;
- transition:all .2s;
- }
- .box2 li:hover,.box2 li:focus {
- box-shadow:0 15px 30px rgba(0,0,0,0.1);
- transform:translate3d(0,-2px,0);
- }
- </style>
- <div class="box">
- <span > 项目一 </span>
- <span > 项目二 </span>
- </div>
- <ul class="box2">
- <li > 哈 </li>
- <li > 哈 </li>
- <li > 哈 </li>
- </ul>
来源: http://www.qdfuns.com/article/25668/6d9e612c26a70424cbf1bfe3ca2775cd.html