CSS3 動畫,鼠標移上去,div 旋轉、放大、縮小、移動


在這里插入圖片描述

<!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
  組件生成時間:2021102614: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>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM