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
组件生成时间：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 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
