1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 .container{
8 position: relative;
9 }
10 .mask{
11 position: absolute;
12 /*margin:50px;*/
13 transform-origin: 0 0;
14 transform: rotateX(180deg) rotateZ(-10deg);
15 top:224px;
16 left:-20px;
17 }
18 .mask>div{
19 position: absolute;
20 top:0;
21 left:0;
22 /*border-radius: 50%;*/
23 }
24 .mask>div:first-child{
25 z-index: 1;
26 }
27 .mask>div:last-child{
28 /*background-color: rgba(255, 255, 255, 0.8);*/
29 z-index: 9;
30 /*border:1px solid #f00;*/
31 width:200px;
32 height:112px;
33 background-image: linear-gradient(0deg, rgba(255,255,255,0.85) ,#fff,#fff,#fff);
34
35 }
36 body{
37 margin:50px;
38 }
39 .img{
40 transform-origin: 0 100%;
41 transform: rotateZ(-10deg);
42 }
43 .img>img{
44 /*border-radius:50% ;*/
45 }
46 </style>
47 </head>
48 <body>
49
50 <div class="container">
51 <div class="img"><img src="images/1.jpg" alt=""/></div>
52 <div class="mask">
53 <div><img src="images/1.jpg" alt=""/></div>
54 <div></div>
55 </div>
56 </div>
57 </body>
58 </html>
时间： 2024-10-23 02:37:38