CSS3-鼠标经过图片旋转、缩放、还原

在线演示
CSS3-鼠标经过图片旋转、缩放、还原_第1张图片
html:

<body>
    <div class="box">
      <a href="#"><img src="img/02.jpg" alt="">a>
    div>
body>

css:

<style>  
  .box img{
    width: 250px;
    height: 450px;
  }
  @-webkit-keyframes pic {
    0% {
      -webkit-transform: rotate(0deg) scale(1);
      opacity: 0.3;  /*透明度*/
    }
    40% {
      -webkit-transform: rotate(30deg) scale(1.5);
      opacity: 0.6;
    }
    60% {
      -webkit-transform: rotate(15deg) scale(1.2);
      opacity: 0.9;
    }
    90% {
      -webkit-transform: rotate(0deg) scale(0.8);
      opacity: 1;
    }
  }
  @-moz-keyframes pic {
    0% {
      -moz-transform: rotate(0deg) scale(1);
      opacity: 0.3;  /*透明度*/
    }
    40% {
      -moz-transform: rotate(30deg) scale(1.5);
      opacity: 0.6;
    }
    60% {
      -moz-transform: rotate(15deg) scale(1.2);
      opacity: 0.9;
    }
    90% {
      -moz-transform: rotate(0deg) scale(0.8);
      opacity: 1;
    }
  }
  .box:hover img { /*鼠标经过box盒子时img动画情况*/  
      animation-name: pic;  /*动画名字是pic,与上面定义的名字一样*/
      -webkit-animation-name: pic;
      -moz-animation-name: pic;
      -ms-animation-name: pic;
      -o-animation-name: pic;
      animation-duration: 1s;  /*动画用时1s*/
      -webkit-animation-duration: 1s;
      -moz-animation-duration: 1s;
      -ms-animation-duration: 1s;
      -o-animation-duration: 1s;
      animation-timing-function: linear;  /*匀速动画*/
      -webkit-animation-timing-function: linear;
      -moz-animation-timing-function: linear;
      -ms-animation-timing-function: linear;
      -o-animation-timing-function: linear;
  }
style>

解析:

-webkit-transform: rotate(30deg) scale(1.5); 是chrome浏览器兼容
rotate(30deg) 顺时针旋转30度;
scale(1.5) 放大1.5倍;

你可能感兴趣的:(图片,html5+css3)