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

最新推荐文章于 2025-04-30 09:13:09 发布

erdouzhang

最新推荐文章于 2025-04-30 09:13:09 发布

阅读量9.2k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：图片 html5+css3 文章标签： css3 图片

本文链接：https://blog.youkuaiyun.com/erdouzhang/article/details/61920727

html5+css3 同时被 2 个专栏收录

20 篇文章

订阅专栏

图片

4 篇文章

订阅专栏

本文介绍了如何使用CSS3实现鼠标经过图片时进行30度旋转和1.5倍缩放的效果，并提供了在线演示。通过-webkit-transform属性确保Chrome浏览器的兼容性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在线演示
这里写图片描述
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>