zoukankan      html  css  js  c++  java
  • 绚丽照片墙效果

    这个效果的实现用css3更为简洁,需要用到transform标签和transition标签以及层数标签z-index,下面就来介绍一下这两个标签。

    transform标签:

        transform:rotate(130deg) scale(3);

    表示旋转130度,并放大3倍

    transition标签:

      transition:2s;

    表示执行2秒

    z-index标签:

      初始状态时可设置z-index:1   鼠标移到图片上img.hover中的z-index值大于1即可

    实例代码:

    img{
     padding: 10px 10px 15px;background:#fff;border: 1px solid #ddd;
     position: absolute;
      transition:0.5s;
      z-index:1;
    }
    img:hover{
     transform:rotate(0deg);
      transform:scale(1.2);
      box-shadow: 10px 8px 10px #ccc;
      z-index: 20;
    }

    .pic1{
     left: 0px;
     top: 20px;
     transform:rotate(25deg);
     
    }

  • 相关阅读:
    序列化
    cookie 和 session
    a 标签提交表单
    SpringBoot使用Easypoi导出excel示例
    PDF操作类库 iText
    HandlerInterceptor
    Fastdfs
    InitializingBean
    CORS CorsFilter
    XMLHttpRequest
  • 原文地址:https://www.cnblogs.com/wyy725872/p/4355539.html
Copyright © 2011-2022 走看看