zoukankan      html  css  js  c++  java
  • HTML5+CSS3实现图片可倾斜摆放的动画相册效果

    先看看效果:其中鼠标悬浮在图片上会有动态效果图

    直接上代码:

    css文件

     1 @CHARSET "UTF-8";
     2 *{
     3     padding:0px;
     4     margin:0px;
     5 }
     6 div{
     7     font-family:"楷体";
     8     font-size:14px;
     9     color:#666
    10 }
    11 body
    12 {
    13     background-image:url("../img/background.jpg") ;
    14     background-size:cover;
    15     
    16 }
    17 
    18 .container{
    19     width:1100px;
    20     height:550px;
    21     margin:60px auto;
    22     position:relative;
    23 }
    24 .container img{
    25     position:absolute;
    26     padding:10px 10px 15px;
    27     background:#fff;
    28     border:1px solid #ddd;
    29     -webkit-transition:1s ;
    30     -moz-transition:1s ;
    31     transition:1s ;
    32     z-index:1;
    33 }
    34 .container img:hover{
    35     -webkit-transform:rotate(0deg);
    36     -moz-transform:rotate(0deg);
    37     transform:rotate(0deg);
    38     -webkit-transform:scale(1.1);
    39     -moz-transform:scale(1.1);
    40     transform:scale(1.1);
    41     -webkit-box-shadow:5px 5px 5px #ddd;
    42     -moz-box-shadow:5px 5px 5px #ddd;
    43     box-shadow:5px 5px 5px #ddd;
    44     z-index:2;
    45     cursor:pointer;
    46 }a
    47 .pic1{top:0px;left:400px;-webkit-transform:rotate(-5deg);-moz-transform:rotate(-5deg);transform:rotate(-5deg);}
    48 .pic2{top:0px;left:600px;-webkit-transform:rotate(-20deg);-moz-transform:rotate(-20deg);transform:rotate(-20deg);}
    49 .pic3{bottom:0;right:0;-webkit-transform:rotate(5deg);-moz-transform:rotate(5deg);transform:rotate(5deg);}
    50 .pic4{bottom:0;left:500px;-webkit-transform:rotate(-10deg);-moz-transform:rotate(-10deg);transform:rotate(-10deg);}
    51 .pic5{bottom:0;left:0;-webkit-transform:rotate(-10deg);-moz-transform:rotate(-10deg);transform:rotate(-10deg);}
    52 .pic6{top:0;left:0;-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);transform:rotate(10deg);}
    53 .pic7{top:0;left:850px;-webkit-transform:rotate(20deg);-moz-transform:rotate(20deg);transform:rotate(20deg);}
    54 .pic8{bottom:-20px;right:630px;-webkit-transform:rotate(5deg);-moz-transform:rotate(5deg);transform:rotate(5deg);}
    55 .pic9{top:150px;left:580px;-webkit-transform:rotate(15deg);-moz-transform:rotate(15deg);transform:rotate(15deg);}
    56 .pic10{left:180px;top:60px;-webkit-transform:rotate(-10deg);-moz-transform:rotate(-10deg);

    Index.html文件:

     1 <html>
     2 <head>
     3 <title>CSS3动画相册 图片可倾斜摆放DEMO演示</title>
     4 <meta http-equiv="Content-Type" content="text/html;chatset=utf-8" />
     5 <link href="css/style1.css" rel="stylesheet" type="text/css" />
     6 </head>
     7 <body>
     8 <div class="container">
     9 <img src="img/mm1.jpg" class="pic1"  />
    10     <img src="img/mm2.jpg" class="pic2"  />
    11     <img src="img/mm3.jpg" class="pic3"  />
    12     <img src="img/mm4.jpg" class="pic4"  />
    13     <img src="img/mm5.jpg" class="pic5"  />
    14     <img src="img/mm6.jpg" class="pic6"  />
    15     <img src="img/mm7.jpg" class="pic7"  />
    16     <img src="img/mm8.jpg" class="pic8"  />
    17     <img src="img/mm9.jpg" class="pic9"  />
    18     <img src="img/mm10.jpg" class="pic10"  />
    19 </div>
    20 </body>
    21 </html>

     需要注意的一些问题:

    CSS3 transition 属性

    实例

    把鼠标指针放到 div 元素上,其宽度会从 100px 逐渐变为 300px:

    div
    {
    100px;
    transition: width 2s;
    -moz-transition: width 2s; /* Firefox 4 */
    -webkit-transition: width 2s; /* Safari 和 Chrome */
    -o-transition: width 2s; /* Opera */
    }

    定义和用法

    transition 属性是一个简写属性,用于设置四个过渡属性:

    • transition-property
    • transition-duration
    • transition-timing-function
    • transition-delay

    注释:请始终设置 transition-duration 属性,否则时长为 0,就不会产生过渡效果。

     

    语法

    transition: property duration timing-function delay;

      

    描述
    transition-property 规定设置过渡效果的 CSS 属性的名称。
    transition-duration 规定完成过渡效果需要多少秒或毫秒。
    transition-timing-function 规定速度效果的速度曲线。
    transition-delay 定义过渡效果何时开始。

     transform: rotate(40deg); /* 其中40是旋转的角度 */

    transition: width 2s;产生带有平滑改变width的过渡效果,完成过渡效果需要2秒
  • 相关阅读:
    Pyspider
    tornado websocket
    cookie、session、csrf
    python图片拼接
    SQLAlchemy查询
    tornado的ORM
    模板继承和UImodul 和 UImethods
    图像处理-05-浮雕效果处理
    图像处理-04-图像的黑白处理
    图像处理-03-实现图像的旋转
  • 原文地址:https://www.cnblogs.com/Steven-shi/p/5142083.html
Copyright © 2011-2022 走看看