CSS3 动画，鼠标移上去，div 旋转、放大、缩小、移动

江一铭

发布于 2022-06-17 06:19:20

3.9K00

代码可运行

文章被收录于专栏：技术社区技术社区

运行总次数：0

代码可运行

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div {
            width: 120px;
            height: 50px;
            line-height: 50px;
            margin: 20px;
            background-color: #f7d2f7;
            float: left;
            font-size: 12px;
            text-align: center;
            color: #000;
        }
        /*效果一：360°旋转 修改rotate(旋转度数)*/
        
        .img1 {
            transition: All 0.4s ease-in-out;
            -webkit-transition: All 0.4s ease-in-out;
            -moz-transition: All 0.4s ease-in-out;
            -o-transition: All 0.4s ease-in-out;
        }
        
        .img1:hover {
            transform: rotate(360deg);
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
        }
        /*效果二：放大 修改scale(放大缩小的值)*/
        
        .img2 {
            transition: All 0.4s ease-in-out;
            -webkit-transition: All 0.4s ease-in-out;
            -moz-transition: All 0.4s ease-in-out;
            -o-transition: All 0.4s ease-in-out;
        }
        
        .img2:hover {
            transform: scale(1.2);
            -webkit-transform: scale(1.2);
            -moz-transform: scale(1.2);
            -o-transform: scale(1.2);
            -ms-transform: scale(1.2);
        }
        /*效果三：旋转放大 修改rotate(旋转度数) scale(放大值)*/
        
        .img3 {
            transition: All 0.4s ease-in-out;
            -webkit-transition: All 0.4s ease-in-out;
            -moz-transition: All 0.4s ease-in-out;
            -o-transition: All 0.4s ease-in-out;
        }
        
        .img3:hover {
            transform: rotate(360deg) scale(1.2);
            -webkit-transform: rotate(360deg) scale(1.2);
            -moz-transform: rotate(360deg) scale(1.2);
            -o-transform: rotate(360deg) scale(1.2);
            -ms-transform: rotate(360deg) scale(1.2);
        }
        /*效果四：上下左右移动 修改translate(x轴,y轴)*/
        
        .img4 {
            transition: All 0.4s ease-in-out;
            -webkit-transition: All 0.4s ease-in-out;
            -moz-transition: All 0.4s ease-in-out;
            -o-transition: All 0.4s ease-in-out;
        }
        
        .img4:hover {
            transform: translate(0, -10px);
            -webkit-transform: translate(0, -10px);
            -moz-transform: translate(0, -10px);
            -o-transform: translate(0, -10px);
            -ms-transform: translate(0, -10px);
        }
    </style>
</head>

<body>
    <div class="img1">360°旋转 </div>
    <div class="img2">放大</div>
    <div class="img3">旋转放大</div>
    <div class="img4">上下左右移动 </div>
</body>

</html>

<!--
  功能：初始化功能描述
  作者：zichen-jiang
  邮箱：18307106535@163.com
  版本：v1.0.2
  修改内容：vue2.0初始化模板
  修改人员：zicheng-jiang
  修订时间：2020.10.01
  组件生成时间：2021年10月26日 14:53:44
-->
<template>
  <div class="Analysis">
    <header>
      <div class="box">
        <div>
          <a-icon type="transaction" style="fontSize:70px;" />
          <div>
            <h2>录入金额</h2>
            <p>
              {{data.insertSum}}
              <span>万</span>
            </p>
          </div>
        </div>
        <div>
          <a-icon type="pie-chart" style="fontSize:70px;" />
          <div>
            <h2>录入笔数</h2>
            <p>
              {{data.insertNum}}
              <span>笔</span>
            </p>
          </div>
        </div>
        <div>
          <a-icon type="history" style="fontSize:70px;" />
          <div>
            <h2>登录次数</h2>
            <p>
              {{data.loginNum}}
              <span>次</span>
            </p>
          </div>
        </div>
      </div>
      <div class="time">
        <p class="dlTime">
          登录时间：
          <span>{{data.lastTime}}</span>
        </p>
        <p class="dqTime">
          当前时间：
          <span>{{timestr}}</span>
        </p>
      </div>
    </header>
    <main>
      <img src="../../assets/undraw.png" alt width="100%" height="100%" />
      <h3>{{userName}} 您好，欢迎登录温州民间借贷备案管理系统</h3>
    </main>

    <!-- <activeAnaly></activeAnaly> -->
  </div>
</template>
<script>
//import(导入)其他文件（如：组件，工具js，第三方插件js，json文件，图片文件等）
import { postDataToMng } from '@/api/api'
import activeAnaly from '../statistics/statisComponent/activeAnaly'
export default {
  /**注册组件*/
  components: {
    activeAnaly
  },
  /**接受父组件传值*/
  props: {},
  name: 'Analysis',
  data() {
    return {
      getUserLoginInfo: '/sys/mjBase/getUserLoginInfo',
      userInfo: JSON.parse(localStorage.getItem('pro__Login_Userinfo')),
      data: {},
      timestr: '',
      userName: JSON.parse(localStorage.getItem('pro__Login_Userinfo')).value.username
    }
  },
  /**计算属性*/
  computed: {},
  /**监听data数据变化*/

  watch: {},
  /**所有方法*/
  methods: {
    getlist() {
      let params = {
        adminName: this.userInfo.value.username
      }
      postDataToMng(this.getUserLoginInfo, params).then(res => {
        if (res.errCode == '000000') {
          let bizContent = JSON.parse(res.bizContent)
          this.data = bizContent
          console.log(bizContent)
        } else {
          this.$message.error(res.errMsg)
        }
      })
    },
    getTime() {
      let that = this
      setInterval(() => {
        var myDate = new Date()
        var y = myDate.getFullYear()
        var M = myDate.getMonth() + 1 //获取当前月份(0-11,0代表1月)
        var d = myDate.getDate() //获取当前日(1-31)
        var h = myDate.getHours() //获取当前小时数(0-23)
        var m = myDate.getMinutes() //获取当前分钟数(0-59)
        var s = myDate.getSeconds() //获取当前秒数(0-59)

        //检查是否小于10
        M = check(M)
        d = check(d)
        h = check(h)
        m = check(m)
        s = check(s)
        that.timestr = y + '-' + M + '-' + d + ' ' + h + ':' + m + ':' + s
      }, 1000)
      //时间数字小于10，则在之前加个“0”补位。
      function check(i) {
        var num = i < 10 ? '0' + i : i
        return num
      }
    }
  },
  /**创建组件时执行(有VM对象this)*/
  created() {},
  /**加载完组件时执行(主要预处理数据)*/

  mounted() {
    this.getlist()
    this.getTime()
  },
  beforeCreate() {
    /**生命周期 - 创建之前*/
  },
  beforeMount() {
    /**生命周期 - 挂载之前*/
  },
  beforeUpdate() {
    /**生命周期 - 更新之前*/
  },
  updated() {
    /**生命周期 - 更新之后*/
  },
  beforeDestroy() {
    /**生命周期 - 销毁之前*/
  },
  destroyed() {
    /**生命周期 - 销毁完成*/
  },
  activated() {
    /**keep-alive组件激活时调用。仅针对keep-alive组件有效*/
  },
  deactivated() {
    /**keep-alive组件停用时调用。仅针对keep-alive组件有效*/
  }
}
</script>
<style scoped lang='less'>
/* @import url(); 引入css类 */
header {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.box {
  width: 73%;
  display: flex;
  justify-content: space-between;
  > div {
    width: 32%;
    height: 120px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    transition: All 0.4s ease-in-out;
    -webkit-transition: All 0.4s ease-in-out;
    -moz-transition: All 0.4s ease-in-out;
    -o-transition: All 0.4s ease-in-out;
    > div {
      text-align: center;
      p {
        margin: 0;
        padding: 0;
        font-size: 20px;
        font-family: math;
        span {
          font-size: 15px;
          margin-left: 6px;
        }
      }
    }
  }
  > :nth-child(1) {
    background: -webkit-linear-gradient(left, #d5e1f4, #ebb6fc);
  }
  > :nth-child(2) {
    background: -webkit-linear-gradient(left, #b0c8ec, #dfecff);
  }
  > :nth-child(3) {
    background: -webkit-linear-gradient(left, #cafff3, #fbffc0);
  }
  > div:hover {
    transform: scale(1.05);
    -webkit-transform: scale(1.05);
    box-shadow: 5px 4px 9px 0px #a8a8d0;
    border-radius: 7px;
    cursor: pointer;
    color: #ffffff !important;
    h2 {
      color: #ffffff !important;
    }
  }
  // > div:hover h2 {
  //   color: #ffffff !important;
  // }
}
.time {
  width: 26%;
  height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: inherit;
  > p {
    margin: 0;
    padding: 0;
    height: 55px;
    line-height: 55px;
    padding-left: 20px;
    font-size: 1.25rem;
    transition: All 0.4s ease-in-out;
    -webkit-transition: All 0.4s ease-in-out;
    -moz-transition: All 0.4s ease-in-out;
    -o-transition: All 0.4s ease-in-out;
    span {
      color: #aeb0b4;
      font-family: Audiowide;
    }
  }
  > p:hover {
    transform: scale(1.05);
    -webkit-transform: scale(1.05);
    box-shadow: 5px 4px 9px 0px #a8a8d0;
    border-radius: 7px;
    cursor: pointer;
    color: #ffffff !important;
  }
  > :nth-child(1) {
    background: -webkit-linear-gradient(left, #cad3ff, #fefefe);
  }
  > :nth-child(2) {
    background: -webkit-linear-gradient(left, #d8faf7, #f0f2f5);
  }
}

@font-face {
  font-family: 'Audiowide';
  font-style: normal;
  font-weight: 400;
  src: local('Audiowide'), local('Audiowide-Regular'),
    url(http://themes.googleusercontent.com/static/fonts/audiowide/v2/8XtYtNKEyyZh481XVWfVOj8E0i7KZn-EPnyo3HZu7kw.woff)
      format('woff');
}
.Analysis {
  background: #fff;
  padding: 20px;
}
main {
  margin: 0 auto;
  text-align: center;
  font-size: 30px;
  font-family: fangsong;
  img {
    width: 50%;
  }
}
</style>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-01-20，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度

CSS3 动画，鼠标移上去，div 旋转、放大、缩小、移动

CSS3 动画，鼠标移上去，div 旋转、放大、缩小、移动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐