body,div,li,p,ul { margin:0; padding:0; font-size:14px; font-family:"Microsoft Yahei","微软雅黑",sans-serif; } .clearfix::after { clear:both; display:block; height:0; content:''; } li,ul { list-style:none; } #container { margin:0 auto; width:100%; } #container li { position:relative; float:left; overflow:hidden; margin:1%; width:30%; height:160px; border:1px solid #ccc; text-align:center; line-height:160px; cursor:pointer; } #container li img { width:100%; } #container li p { position:absolute; top:-160px; left:0; z-index:2; width:100%; height:160px; color:#fff; } #container li .img { display:block; width:100%; height:160px; -webkit-transition:.5s ease-in; -moz-transition:.5s ease-in; -o-transition:.5s ease-in; transition:.5s ease-in; -ms-transition:.5s ease-in; } #container li:nth-child(1) .img { background-color:#E97305; } #container li:nth-child(2) .img { background-color:#FFAAAA; } #container li:nth-child(3) .img { background-color:#FFFF00; } #container li:nth-child(4) .img { background-color:aqua; } #container li:nth-child(5) .img { background-color:blueviolet; } #container li:nth-child(6) .img { background-color:cadetblue } #container li:hover .img { -webkit-transform:scale(1.1,1.1); -moz-transform:scale(1.1,1.1); -o-transform:scale(1.1,1.1); transform:scale(1.1,1.1); } #container li p i { position:absolute; top:0; left:0; z-index:-1; display:block; width:100%; height:100%; background:#000; font-size:16px; opacity:.7; -moz-opacity:.7; filter:alpha(opacity=70); } #container li p span { display:block; margin:0 auto; padding-top:60px; width:94%; font-size:12px; line-height:24px; } #container li p a { position:absolute; top:20px; left:50%; display:block; margin-left:-16px; width:32px; height:32px; background:url(https://www.jq22.com/tp/6375197141508666897222181.png) no-repeat 0 0; } .explain { display:block; margin:0 auto; }
更新时间:2021-03-22 00:59:07
背景色页可换成图片,只需将li下面的div换成img即可,可直接复用div的class样式。li中a标签可添加自己所需的链接地址。