首页 前端知识 CSS3 动画,鼠标移上去,div 旋转、放大、缩小、移动

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

2024-06-05 13:06:36 前端知识 前端哥 781 504 我要收藏

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);

}

360°旋转 放大 旋转放大 上下左右移动

在这里插入图片描述

录入金额

{{data.insertSum}}

录入笔数

{{data.insertNum}}

登录次数

{{data.loginNum}}

登录时间:

{{data.lastTime}}

当前时间:

{{timestr}}

{{userName}} 您好,欢迎登录温州民间借贷备案管理系统

转载请注明出处或者链接地址:https://www.qianduange.cn//article/10822.html
标签
评论
发布的文章

@JsonSerialize注解的使用

2024-06-24 23:06:21

npm install报错

2024-06-24 23:06:56

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!