zoukankan      html  css  js  c++  java
  • 照片墙

     1 <!DOCTYPE html>
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     5     <title></title>
     6     <link href="css/demo.css" rel="stylesheet" />
     7 </head>
     8 <body>
     9     <div class="pic1 pic"><img src="img/1.jpg"/></div>
    10     <div class="pic2 pic"><img src="img/2.jpg" /></div>
    11     <div class="pic3 pic"><img src="img/3.png" /></div>
    12     <div class="pic4 pic"><img src="img/4.jpg" /></div>
    13     <div class="pic5 pic"><img src="img/5.jpg" /></div>
    14     <div class="pic6 pic"><img src="img/6.jpeg" /></div>
    15     <div class="pic7 pic"><img src="img/7.jpg" /></div>
    16     <div class="pic8 pic"><img src="img/8.jpg" /></div>
    17     <div class="pic9 pic"><img src="img/9.jpg" /></div>
    18 </body>
    19 </html>
     1 .pic img{
     2     width:100px;
     3     border:solid 2px #fff;
     4     border-radius:12px;
     5     cursor:pointer;
     6 }
     7 body{
     8     background-color:#ed9898;
     9 }
    10 .pic{
    11     position:absolute;
    12 }
    13 .pic1{
    14     transform:rotate(30deg);
    15     top:100px;
    16     left:100px;
    17 }
    18 .pic2{
    19     transform:rotate(-30deg);
    20     top:150px;
    21     left:150px;
    22 }
    23 
    24 .pic3{
    25     transform:rotate(40deg);
    26     top:180px;
    27     left:180px;
    28 }
    29 
    30 .pic4{
    31     transform:rotate(-20deg);
    32     top:100px;
    33     left:230px;
    34 }
    35 
    36 .pic5{
    37     transform:rotate(-40deg);
    38     top:230px;
    39     left:180px;
    40 }
    41 
    42 .pic6{
    43     transform:rotate(34deg);
    44     top:140px;
    45     left:250px;
    46 }
    47 
    48 .pic7{
    49     transform:rotate(55deg);
    50     top:90px;
    51     left:350px;
    52 }
    53 
    54 .pic8{
    55     transform:rotate(-22deg);
    56     top:240px;
    57     left:450px;
    58 }
    59 
    60 .pic9{
    61     transform:rotate(-24deg);
    62     top:80px;
    63     left:250px;
    64 }
    65 .pic:hover{
    66     transform:rotate(0deg) scale(1.5);/*0度归位*/
    67     transition:transform ease 1s;
    68     z-index:2;/*默认是1,大的数字在上面*/
    69 }

     

  • 相关阅读:
    H5中获取图片中的主色调
    vue provide/inject响应式
    微信小程序入坑之路
    H5入坑之路
    uni-app状态栏相关问题
    uni-app使用iconfont相关
    uni-app入坑之路
    uni-app自定义导航栏(搜索框和按钮)
    浅析浏览器的渲染过程
    SAP ABAP MB51新增栏位字段
  • 原文地址:https://www.cnblogs.com/snow52132/p/7171961.html
Copyright © 2011-2022 走看看