• css3 变形设计涂鸦墙


    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		body{ background:#000; }
    		ul.polaroids li{ display:inline; }
    		ul.polaroids a{
    			background:#fff;
    			display:inline;
    			float:left;
    			margin:0 0 27px 30px;
    			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);
    			/* 顺时针旋转2 */
    			-webkit-transform:rotate(-2deg);
    			-webkit-transition: -webkit-transform .15s linear;
    		}
    		ul.polaroids img{
    			display:block;
    			height:100px;
    			margin-bottom:12px;
    		}
    		/* 在a标签的后边 插入 内容 attr:(title) 也就是标签a中的title */
    		ul.polaroids a:after{ content:attr(title); }
    		ul.polaroids li:nth-child(even) a{
    			
    			-webkit-transform: rotate(5deg);
    		}
    		ul.polaroids li:nth-child(2n) a{
    			position:relative;
    			top:-5px;
    			/* 顺时针旋转10度 */
    			-webkit-transform:rotate(-10deg);
    		}
    		ul.polaroids li:nth-child(4n) a{
    			position:relative;
    			right:5px;
    			top:8px;
    		}
    		ul.polaroids li:nth-child(5n) a{
    			position:relative;
    			left:-5px;
    			top:3px;
    		}
    		ul.polaroids li a:hover{
    			/* 放大对象1.25倍 */
    			-webkit-transform:scale(1.25);
    			-webkit-box-shadow:0 3px 6px rgba(0,0,0,.5);
    			position:relative;
    			z-index:5;
    		}
    	</style>
    </head>
    <body>
    	<ul class="polaroids">
    		<li><a href="1" title="cat1"><img src="img/cat1.jpg" alt=""></a></li>
    		<li><a href="2" title="cat1"><img src="img/cat2.jpg" alt=""></a></li>
    		<li><a href="3" title="cat1"><img src="img/cat3.jpg" alt=""></a></li>
    		<li><a href="4" title="cat1"><img src="img/cat4.jpg" alt=""></a></li>
    		<li><a href="5" title="cat1"><img src="img/cat5.jpg" alt=""></a></li>
    		<li><a href="6" title="cat1"><img src="img/cat6.jpg" alt=""></a></li>
    		<li><a href="7" title="cat1"><img src="img/cat7.jpg" alt=""></a></li>
    		<li><a href="8" title="cat1"><img src="img/cat8.jpg" alt=""></a></li>
    	</ul>
    </body>
    </html>
    

      

  • 相关阅读:
    Apache Common-IO 使用
    Apache Compress-使用
    使用JavaConfig方式-Spring 基础学习
    设计模式-策略模式
    logback mybatis 打印sql语句
    oracle 迭代查询
    使用 Dom4j 将 XML 转换为 MAP
    Java连接Access数据库的那些坑
    如何从Maven中央存储库下载?
    sublime构建各个编译环境
  • 原文地址:https://www.cnblogs.com/mingjixiaohui/p/5367476.html
Copyright © 2020-2023  润新知