鼠标滑过图片放大

一只桃子~

于 2022-02-10 16:19:54 发布

阅读量301

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/qq_43405603/article/details/122863533

版权

<template>
  <div>
    鼠标滑过图片放大
    <div class="bigBox">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
};
</script>
<style lang="less">
.bigBox {
  display: flex;
  justify-content: space-evenly;
  .box {
    width: 100px;
    height: 100px;
    border: 1px solid rgb(119, 224, 115);
    background: url(../../assets/images/1.png);
    transition: all 0.5s ease 0s;
    &:hover {
      transform: scale(1.2, 1.2);
      //transform: rotate(170deg);只能写一个
      opacity: 0.7;
      // background: green;
    }
  }
}
</style>