zoukankan      html  css  js  c++  java
  • 写css动画

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <link rel="icon" href="images/12.jpeg">
    <title>照片墙</title>
    <link rel="stylesheet" type="text/css" href="css/1.css">
    </head>
    <body>
    <div id="a">
    <div id="b"> </div>
    <img src="images/11.jpg" alt="123" title="范冰冰" class="z1">
    <img src="images/1.jpg" alt="123" title="范冰冰" class="z2">
    <img src="images/3.jpg" alt="123" title="李冰冰" class="z3">
    <img src="images/4.jpg" alt="123" title="范冰冰" class="z4">

    <div id="s"> </div>
    <img src="images/5.jpg" alt="123" title="范冰冰" class="z5">
    <img src="images/2.jpg" alt="123" title="范冰冰" class="z6">
    <img src="images/8.jpg" alt="123" title="范冰冰" class="z7">
    <img src="images/9.jpg" alt="123" title="赵丽雅" class="z8">

    <div id="v"> </div>
    <img src="images/10.jpg" alt="123" title="范冰冰" class="z9">
    <img src="images/6.jpg" alt="123" title="范冰冰" class="z10">
    <img src="images/7.jpg" alt="123" title="范冰冰" class="z11">
    <img src="images/12.jpg" alt="123" title="范冰冰" class="z12">

    </div>

    </body>
    </html>

    body{
    background-color:#F6DB6B;
    }
    #a{
    line-height:100px;
    margin:100px auto;
    padding-top:80px;
    border:3px solid #FFFCCC;
    1300px;
    height:2000px;
    position:relative;
    }
    #a img{
    background-color:white;
    150px;
    height:auto;
    border:2px solid #ccc;
    padding:20px;
    box-shadow:2px 2px 2px rgba(5,5,5,0.7);
    transition:all 0.4s ease-in;
    position:absolute;
    }
    #a img:hover{
    box-shadow:20px 20px 20px rgba(5,5,5,0.7);
    transform:rotate(30deg) scale(1.2);
    z-index:88;
    }
    #b{
    background-color:white;
    500px;
    height:auto;
    }
    #c{
    background-color:white;
    500px;
    height:auto;
    }
    #v{
    background-color:white;
    500px;
    height:auto;
    }
    .z1{
    transform:rotate(0deg);
    left:100px;

    }
    .z2{
    transform:rotate(10deg);
    left:100px;
    }
    .z3{
    transform:rotate(20deg);
    left:100px;
    }
    .z4{
    transform:rotate(30deg);
    left:100px;

    }
    .z5{
    transform:rotate(10deg);
    left:400px;
    }
    .z6{
    transform:rotate(20deg);
    left:400px;
    }
    .z7{
    transform:rotate(30deg);
    left:400px;
    }
    .z8{
    transform:rotate(40deg);
    left:400px;
    }
    .z9{
    transform:rotate(-20deg);
    left:900px;
    }
    .z10{
    transform:rotate(-10deg);
    left:900px;
    }
    .z11{
    transform:rotate(0deg);
    left:900px;
    }
    .z12{
    transform:rotate(10deg);
    left:900px;
    }

  • 相关阅读:
    JMeter的JavaRequest探究
    记一次生产压测遇到的"坑"
    JMeter之If Controller深究二
    JMeter之SteppingShape
    那些年拿过的shell之adminer
    Spring Boot Actuator H2 RCE复现
    使用sqlmap结合dnslog快速注入
    一次稍显曲折的爆破经历
    无回显、不出网命令执行测试方式
    实战绕过某waf后缀检测内容检测
  • 原文地址:https://www.cnblogs.com/miffees/p/6071851.html
Copyright © 2011-2022 走看看