Top

轻松搞定图片叠加效果 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>纯CSS实现图片叠加</title>
 6     <style type="text/css">
 7         div.cardfan {
 8             height: 356px;
 9             width: 700px;
10             margin: 4rem auto 0;
11             position: relative;
12             cursor: pointer;
13         }
14         div.cardfan img {
15             position: absolute;
16             left: 200px;
17             width: 300px;
18             height: 200px;
19             border: 12px solid #ffe;
20             box-shadow: 4px 4px 3px rgba(0, 0, 0, 0.2);/*投影  X轴  Y轴  Z模糊程度*/
21             transform-origin: center; /*围绕图片中心旋转*/
22             transition: all .6s linear;/*过渡动画效果*/
23         }
24         div.cardfan img:first-child {
25             transform: rotate(5deg);
26         }
27         div.cardfan img:last-child {
28             transform: rotate(-5deg);
29         }
30         div.cardfan:hover img:first-child {
31             transform: rotate(25deg);
32         }
33         div.cardfan:hover img:last-child {
34             transform: rotate(-25deg);
35         }
36     </style>
37 </head>
38 <body>
39     <div class="cardfan">
40         <img src="images/1.jpg" alt="Argorn" width="300" height="201">
41         <img src="images/2.jpg" alt="Maltera, Itely" width="300" height="201">
42         <img src="images/3.jpg" alt="Maltera, Itely" width="300" height="201">
43     </div>
44 </body>
45 </html>

源自  图片叠加效果

CSS3的transform知识:详解transform

css3-transform

css3-transition

 

posted @ 2016-07-26 17:20  Avenstar  阅读(382)  评论(0)    收藏  举报