网页设计——动态照片墙效果

最新推荐文章于 2024-07-13 10:22:10 发布

m0_59033716

最新推荐文章于 2024-07-13 10:22:10 发布

阅读量389

点赞数 5

文章标签： html5 javascript 前端

本文链接：https://blog.csdn.net/m0_59033716/article/details/139584882

版权

1、html代码如下：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       
       <title>动态照片墙效果</title>
       <link rel="stylesheet" type="text/css" href="css/style.css"/>
   </head>
   <body>
       <ul class="polaroids">
           <li><a href="#" title="大海的夜空"><img src="img/1.jpg" alt="大海的夜空"/></a></li>
           <li><a href="#" title="城市落日余晖"><img src="img/2.jpg" alt="城市落日余晖"/></a></li>
           <li><a href="#" title="海边的黄昏"><img src="img/3.jpg" alt="海边的黄昏"/></a></li>
           <li><a href="#" title="完美的星空"><img src="img/4.jpg" alt="完美的星空"/></a></li>
       </ul>
   </body>
</html>

2、css样式代码：

.polaroids li{display: inline;}
.polaroids a{
   background: #fff;display: inline;float: left;
   margin: 0 0 27px 30px;width: auto;padding: 10px 10px 15px;
   text-align: center;text-decoration: none;color: #333;font-size: 18px;
   -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, .25);
   -moz-box-shadow:0 3px 6px rgba(0,0,0,.25);
   box-shadow:0 3px 6px rgba(0,0,0,.25);}
   .polaroids img{display: block;width: 190px;margin-bottom: 12px;}
   .polaroids a:after{content: attr(title);/*Te8 +,FF,Chorme,Safari */}
   .polaroids li:nth-child(even)a{/*偶数 li 旋转2度 */
   -webkit-transform: rotate(2 deg);
   -moz-transform: rotate(2 deg);
   -ms-transform: rotate(2 deg);
   transform: rotate(2 deg);
   }
   .polaroids li a:hover{/*鼠标滑过照片时，照片放大1.25倍，加强阴影效果*/
   -webkit-transform: scale(1.25);
   -moz-transform: scale(1.25);
   -ms-transform: scale(1.25);
   transform: scale(1.25);
   -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
   -moz-box-shadow:0 3px 6px rgba(0,0,0,.5);
   -o-box-shadow:0 3px 6px rgba(0,0,0,.5);
   position: relative;
   z-index:1;}

m0_59033716

关注

5
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
网页设计——动态照片墙效果

<img src="img/1.jpg" alt="大海的夜空"/></a></li><li><a href="#" title="海边的黄昏"><img src="img/3.jpg" alt="海边的黄昏"/></a></li><li><a href="#" title="完美的星空"><img src="img/4.jpg" alt="完美的星空"/>动态照片墙效果
复制链接

扫一扫