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

大大的周 02-07 6587

<!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>

<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>  </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>