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 }

     

  • 相关阅读:
    句法分析树标注集
    LaTeX入门教程(二)
    LaTeX入门教程(一)
    汉语词性对照表[北大标准/中科院标准]
    Python版C语言词法分析器
    QT5.4 计算器程序 打包&发布,解决dll的最新解决方案
    解决Android SDK Manager更新(一个更新Host的程序的原理实现和源码)
    增加个人博客地址,欢迎访问
    Matlab R2012b启动出现License Manager Error -15
    C++中二维数组的动态创建与处理
  • 原文地址:https://www.cnblogs.com/snow52132/p/7171961.html
Copyright © 2011-2022 走看看