zoukankan      html  css  js  c++  java
  • CSS之照片集效果

    代码:

    <!DOCTYPE html>
    <html>
    <head>
    <title>照片影集</title>
    <meta charset="utf-8">
    <style type="text/css">
    body{background-color: black;}
    .BK{ 1000px;height: 600px;margin: 100px auto;position: relative;}
    .photo{ 200px;height: 100px;position: absolute;transition:all 2s;opacity: 0.4;}
    .photo:nth-child(1){top: 280px;left: 300px; transform: rotate(-30deg);z-index: 5}
    .photo:nth-child(2){top: 400px;left: 350px;transform: rotate(20deg);z-index: 4}
    .photo:nth-child(3){top: 180px;left: 300px;transform: rotate(30deg);z-index: 3}
    .photo:nth-child(4){top: 210px;left: 600px;transform: rotate(30deg);z-index: 2}
    .photo:nth-child(5){top: 280px;left: 500px;transform: rotate(-10deg);z-index: 1}
    .photo:hover{transform: scale(3);z-index: 10;opacity: 1;position: absolute;top: 50%; left: 50%;}
    </style>
    </head>
    <body>
    <div class="BK">
    <img src="../图片/1.jpg" class="photo">
    <img src="../图片/2.jpg" class="photo">
    <img src="../图片/3.jpg" class="photo">
    <img src="../图片/4.jpg" class="photo">
    <img src="../图片/5.jpg" class="photo">
    </div>
    </body>
    </html>

  • 相关阅读:
    MVC概念性的内容
    类 class
    php获取真实IP地址
    面向对象static静态的属性和方法的调用
    smarty 入门2(个人总结)
    smarty入门
    读取文件内容fopen,fgets,fclose
    mysql常用命令
    mybatis查询的三种方式
    MyBatis 映射文件
  • 原文地址:https://www.cnblogs.com/KJ-Z/p/5667622.html
Copyright © 2011-2022 走看看